Favicon! 0 Comments
No, it’s not the latest and greatest place to meet Sailor Moon-costumed babes and stuff bag after Watchmen-themed bag with useless, but free, tchotchkes. Favicons are the neat little Web site icons that appear in the address bar of your browser, and I finally got around to creating one.
Pretty, isn’t it? Did you know that Microsoft pioneered favicons in the release of Internet Explorer 5 as a way to spice up dreary bookmark menus? This was back when Microsoft actually contributed to the forward momentum of positive Internet change instead of holding it back. It wasn’t until later that favicons were incorporated into browsers’ address bars.
Most people know the purpose of a favicon and even understand how to implement one. Still, there are some unique things to keep in mind when generating the image itself.
A favicon should be appropriately sized at 16×16 pixels. You can design them to be larger, but most Web browsers are going to scale them back down to 16×16 (or smaller), so test your image to ensure it will still appear acceptably if scaled.
When originally introduced, Web designers were required to name their icon favicon.ico (thus the name) and place it in the root directory of their Web site. Internet Explorer 5 would then instinctually find the icon and use the image. Today’s browsers provided a little more flexibility by allowing you to specify a path for the file and an image format. Simply place a <link rel="icon" type="image/png" href="/path/image.png" /> tag in the <head> of your page.
However, later versions of Microsoft Internet Explorer only truly support icons that have a legitimate .ico extension and that are exported in the icon file format. Many designers have changed their preferred image’s extension to .ico without first actually converting them to Microsoft Icon Files. This creates a conflict that Microsoft Internet Explorer cannot resolve; such icon images will not be displayed.
So how do you create an .ico file? Well, I used favicon.cc. Go to the site, upload your image, generate a favicon.ico file and upload it to the root directory of your Web site. Easy as pie. The site even provides a preview of what the image will look like in an address bar, which is very convenient indeed.
—Ryan
