Favicons have been around for quite a while, but now that IE9 is out when you create these images for your site you need to include a few more sized images than before. Here are some tips for creating them that I’ve learned from the design school of hard knocks.
Wikipedia defines a favicon like this:
“A favicon (pronounced /ˈfævɪˌkɒn/; short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon.“
Since they were introduced by Microsoft in 1999 with IE5, favicons have generally been created with sites like www.favicon.co.uk to help designers create those personal little icons for their individual sites. They have usually been created by embedding a 16×16 pixel and 32×32 pixel image together into one .ico file, which I’ve found Firefox needs.
With IE9′s pinned sites and jump lists Microsoft have increased the need for more images to be embedded into the site’s favicon. They suggest that you use four images for optimum use by IE9 : 16×16, 24×24, 32×32, and 64×64. The cool thing is that they also point you to an HTML5 web app that can be used in any ‘modern browser’ called X-Icon Editor. It helps make it easy to create and embed all four necessary images all at once.
Tips for Favicon Creation
- Use a graphic editor to create an image 64×64 pixels. I prefer Photoshop. Be sure to save it as a jpg, png, or gif.
- Go to www.xiconeditor.com in your favorite modern browser and upload the image. Be sure to tick off all four image sizes when importing consecutive images.
- Then click the export button followed by one more export button.
- Finally, be sure to place this “favicon.ico” file in your website’s root directory (the same folder that contains your index.html file). That takes care of favicons that most browsers will use for the address bars, bookmarks, and tabs. IE9 also will use the 64×64 image for the task bar when the site is pinned.
*If you don’t include a 64×64 pixel image in the favicon then IE9 will use the next largest image for the task bar favicon. The result will slightly pixelated. So, use it’s best to include the 64×64 image too.
Favicons for the Jump List
You can also include images for the jump lists. These need to be favicons that are created in the same manner as described above with multiple images embedded in them. These can be placed in the images folder of the site, for example: ./images/home_favicon.ico. You then link to them with relative urls in the meta tags just like you would call any other graphic on your website. Design is Philosophy has a good post outlining the correct usage of meta tags to create a custom jump list (only usable in Windows 7 and IE9).
Hope this is helpful. Enjoy tweeking your sites for IE9 users now.