The biggest new feature is the interface, you can now preview all found favicons before adding them to your database! The interface also allows you to select which favicons you want to use, or select (and preview) custom favicons! Go to the WordPress plugin repository to get the latest version! Also, please let me know if you have any bugs or issues, and I can include fixes and changes for version 1.1.

Above you can see a screenshot of the new admin panel, as you can see, there are options to select the favicon for each link, and you can pick the default favicon or enter a custom image address. The new version should be really simple to use, and require no explanation except for the info on the settings panel.

List bookmarks with favicons

Upon activation there is a function available that works just like WordPress’ built-in wp_list_bookmarks. The function is called list_iconized_bookmarks(), and it takes the same arguments as the original. The function takes images from the link_image field of each link. The images are displayed in front of the link, with class="favicon", and it is up to the user to define a proper style.

Iconized Links Widget

There is also a replacement Links widget available, to get iconized bookmarks into your blogroll. This widget has one option, which is the arguments string, with the same arguments that are passed to wp_list_bookmarks.

Iconizing

Iconizing might be a bit of a stupid name, but what this function does is add favicon-URLs to each of your links’ image fields! So you can just add a bunch of links to your blogroll, then run the plugin, and all favicons will be correctly set. You can start the plugin from the N.I.B. (Noio Iconized Bookmarks) panel in the settings screen. It allows you to define a default favicon, for when the real favicon cannot be found or doesn’t exist. It also allows you to define a specific word that will ‘lock’ the favicon if you put it in the Notes field of a link. Suppose you want to set another icon for a website, and you don’t want N.I.B. to overwrite your custom icon when you run an update. Then you just put this locking word in the link’s notes, and N.I.B. won’t change the icon.

Download

To use the plugin, just copy noio_iconized_bookmarks.php into your plugin folder, and activate it on the Plugins panel.
Get it from the WordPress repository.

References

I used a number of resources to help me build N.I.B. Here is some credit.

• Lonewolf-online’s tutorial about widget control panels.
• Devlounge’s tutorial for constructing admin panels.
• Jeff Minard’s function for retrieving favicon locations.

If you use the plugin, please tell me what you think about it! I’m very open to suggestions for improvements. Finally, if you want to donate money towards development of this plugin, go here.

There’s a couple things to know. First of all, most websites just store their favicons in a location like www.example.com/favicon.ico. If all websites would do this, you might think, there wouldn’t be a problem? Well, problems arise on websites with subdomains. Consider for example http://andr01d.newgrounds.com. As you can see, the favicon is not located by just appending /favicon to the link.

The way these websites point the browser to the favicon is by a tag in the head of the HTML. Like on this website. My favicon is hardly in an extraordinary location, but it felt safe to tell the browser where to look anyway.

<link rel="SHORTCUT ICON" href="http://www.noio.nl/favicon.ico"/>

The problem is that not all websites use the same method. Some have easy locations, some have a SHORTCUT ICON tag, some have both.

Google Shared Stuff

The best solution to a problem like this is letting someone else do the job. Google has an undocumented feature to retrieve the favicon for a certain link. I discovered this on some recent blog posts. This seems ideal, all you would have to do is create an image, and set the source to Google’s url.

<img src="http://www.google.com/s2/favicons?domain=www.famfamfam.com">
</img>

Unfortunately, the method has a few disadvantages.

• Not all favicons can be retrieved, for example, andr01d.newgrounds.com still fails. You do get a nice default icon though.
• The favicons get a white background, even if they are transparent. This would be ok for a white website, but I wanted to show transparent icons like they were meant to look.
• Since Google had no documentation on the feature, there is no guarantee that the service will be up forever. Depending on other sites is always a bit risky. (This even goes for Google)

The white background made me discard this method.

Javascript

This is a method that actually came very close to being usable.
The code below is an adaptation of this method by “the CSS guy”, but using mootools, to make it a bit shorter. The way you use it is as follows: just call the function as soon as the page is loaded, and specify what container you want to have the links faviconized in. For example: faviconizeElements('.bookmark-list li', 'image/defaulticon.png') would add favicons to all links inside a 'bookmark-list'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function faviconizeElements(selectors, nofavimg){
  var links = $$(selectors + ' a');
 
  links.each( function(link, index){
    var href = link.get('href');
    var fvcurl = getDomainFaviconURL(href);
    if(!fvcurl) fvcurl = nofavimg;
 
    var fvc = new Element('img', {
      'class':'faviconimg',
      'src':fvcurl,
      'events':{
        'error':function(){
          this.src = nofavimg;
        }
      }
    });
    fvc.inject(link.getParent(), 'top');
  });
}

The critical part is, ofcourse, how to get the URL of the favicon? This simple regular expression basically adds /favicon.ico to the domain. This will not work for all links, that’s why you can specify an icon to use as a default, if the favicon is not found.

21
22
23
24
25
26

function getDomainFaviconURL(linkurl){
  var domain = linkurl.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
  domain = RegExp.$2;
  var faviconurl = "http://"+domain+"/favicon.ico";
  return faviconurl;
}

With this method we still don’t catch the favicons that are not in a default location. To do that we would actually have to look into the HTML of the linked file, and find the SHORTCUT ICON tag. If we would load the HTML of every linked page to get the favicon, this would take a long time, and in the meantime there would be no favicons. With a lot of links, this might even take longer than the user spends looking at a page! And worse: the whole thing would be repeated every time the page loads. So, in a javascript approach, we are limited to fetching favicons with easily guessable locations.

WordPress specific

So, in order to avoid the problems of having to fetch the favicons while the user is waiting, I decided to store the favicon locations permanently in the WP-Links table. Each link in wordpress can have an image specified, and I will use that field to store the locations of the favicons for each link. I am writing a plugin for wordpress that can check for the locations of favicons, first by appending /favicon.ico, if that fails by downloading the HTML and looking at the SHORTCUT ICON tag. Then the plugin will store the found locations in the table. This is nice because the locations are stored, so they will only have to be found once. I will share the plugin, keep an eye out for a future post.

Plugin

The plugin is finished, check it out here.

A couple of weeks ago I found a job offer regarding a logo for a certain organization. The offer looked good, a small design job for a low budget, just what I need to build a portfolio. So I contacted the client, and we started discussing what the logo should look like. Unfortunately, after I sent the first proofs, the client didn’t reply to my emails anymore. I figured that he didn’t like it, but I wanted to be sure, so I contacted someone else at the client’s organization. I informed whether they still wanted me to create the logo for them, and the ‘president’ gave me the green light to continue. So, under his direction we continued work and came up with a second set of proofs, and it seemed the client was quite pleased. Unfortunately, again, I lost contact right before we were to proceed with payment and delivering the final files.

Because I actually liked the work that I’d done for them, and I wanted it to be used, I decided to check on their website whether they had said anything about the new logo. I found that they had another logo finished, that was done by another designer they had hired at the same time.

Now there is a couple of things I really don’t understand. First and foremost, why didn’t they contact me about hiring another designer? If it’s because they realize it’s rude to leave someone halfway, I can understand, but I thought that they would also realize that it’s far more rude to let someone do work when you don’t intend to use it or pay for it.

I think the main thing that people fail to realize, is that when you buy graphic design work, you are not buying the final product, you are buying the work that goes into it. What people should do is find a designer that they trust, based on previous work. Then work together with that designer until they have created something that they like. Unfortunately, the way most people think it works, and I have actually read this in a job offer once, is:

you make. i like, i pay

Most people looking for low-budget design jobs seem to think that when you create a logo for them, and they don’t like it, the designer can just keep the files. What am I going to do with logo’s that you don’t want to pay for? Turn them back into free time?