18 years ago in March of 1999, Microsoft released support for favicons with Internet Explorer 5.
Have you ever noticed that many websites display a little icon in your browser’s URL bar and bookmarks? That’s a favicon (which is short for favorite icon). While often taken for granted, the favicon can be an outlet for creativity, and an opportunity for a web developer to put a “special touch” on a website. The smallest size of a favicon is 16×16 pixels (seen below). That’s really tiny!
To make a favicon you can shrink down a larger graphic but, as you can probably imagine, a lot can get lost in translation. Complex logos often become muddied beyond recognition. Whether or not the result is acceptable is ultimately at the discretion of the developer. If the results of a scaled logo are less than desirable and the developer is feeling particularly inspired, its time to pull out the one-pixel paintbrush and get cracking on an original, tiny masterpiece. Lets put some of them under the microscope!
The three favicons above represent three different ways I’ve created favicons over the years:
- For Hamilton Convention Centre, their logo was scaled down and the result was good enough as-is.
- For RBC Convention Centre Winnipeg, I had to manually adjust their logo vectors to better align with the pixel grid.
- And for the rare few, I’ve even drawn the favicon one pixel at a time, like this beauty for HeartShare.
If you’d like to try your hand at drawing a favicon of your own, Check out favicon.cc, my old favorite favicon generator. It will auto-magically update the favicon of your browser window every couple seconds while you work!
Or, if your a web developer and you’ve been looking for a tool to help you generate favicons for all of the myriad devices and platforms in a few clicks, check out Real Favicon Generator.