the miniature world of favicons and .ico files

want to create a favicon for your website? not sure what one is? a favicon is that little custom icon that appears to the left of a website’s url in the address bar of your web browser. they also show up in bookmarks, on tabs in tabbed browsers and as the icon for internet shortcuts on your desktop. they are just 16 x 16 pixels in size. but be forewarned, creating one is a bit trickier than you’d think. with the small dimensions comes constraints and decisions to be made. click on for more.

for a favicon to be recognized by web browsers, there needs to be a .ico file (usually favicon.ico) residing in the main directory of your website. most browsers besides internet explorer can use a .gif or .png file, but only .ico works in all browsers.

1. download the photoshop plugin or visit a .ico generator website.
if you’ll be using photoshop to create this, then you’ll need the windows icon (ICO) file format photoshop plugin to export to the .ico file format. google to find the best download for you. the plugin reads and writes .ico files in 1, 4 and 8-bit indexed and 24-bit rgb modes. it also reads and writes 32-bit “xp” icons (with 8-bit alpha channel). make sure to install the plugin first before you following the steps here. if you’d rather generate one at a .ico generator online, then i recommend www.favicon.cc. you can import a graphic or draw one from scratch here. this is the easier of the two paths.

2. plan ahead, then create the icon.
think of what element from your logo, brand or photo library would make for a good square shaped icon. because 16 x 16 pixels is such a small canvas area, it will be very difficult to be work at this small size. instead, create your icon on a larger canvas that is proportionate to 16 x 16, like 64 x 64. once it has been rendered, shhrink it down to 16 x 16 and see if it holds up well. it may be that you’ve included too much detail that won’t capture well at the smaller size. go back and edit the icon down to something simpler.

3. uploading the favicon.ico file.
connect to your webhost server. upload your favicon.ico file to the root directory – which is the same level as your home page (ie. index.html or index.php). it cannot be sitting in a folder and must be a loose file at this location. most browsers will find it automatically if you follow this.

4. testing and a simple fix.
sometimes the favicon won’t show up in all browsers automically. you can troubleshoot any issues by google searching for answers, or you can add the following code in the header section of each page, or in the header.php page:
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
if you want to use a .gif or .png file instead, then use this format instead (just remember that it won’t work in IE): <link rel=”icon” href=”/favicon.png” type=”image/png”> or
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

if your new favicon still does not display, try refreshing the page or clearing your cache — or put a ‘?’ at the end of the url, which tricks a browser into thinking the page is new.

5. more advanced troubleshooting.
you’ll want to google for more advanced troubleshooting in various. there is a wealth of information available if you type in “favicon” and the name of the browser you are troubleshooting.

6. multi-resolution favicons.
so if you’ve gotten this far, you can already see your favicon in your browser’s address bar, and it probably looks great. feeling ambitious?

in windows especially, favicons show up in several places. for instance, if you place a shortcut to a website on your desktop, then windows uses the favicon as the shortcut icon. but, on the desktop, windows uses a much larger size icon (often 48 x 48 pixels). when this happens, windows has to scale up your favicon and it will look blurry.

one of the cool things about .ico files is that they can contain multiple versions of the icon, at different sizes and color depths (kinda like an animated .gif contains multiple frames). when they do, windows uses whichever size and color depth is most appropriate. for the sizes, 16 x 16, 24 x 24, 32 x 32 & 48 x 48 pixels are most common, and all can be bundled into a single .ico file. creating a multi-resolution icon isn’t more work (necessarily). many of the .ico file generators will bundle multiple icons together in a single .ico file.

if you’re on windows, then you may have noticed before that some icons on your desktop have jagged (aliased) edges, while others’ curves bend smoothly. the smooth ones are due to providing icons with a version at 32-bit color depth, which allows true transparency. you can create a 32-bit version of your icon, along with 24-bit (16 million colors, gif-like transparency), 16-bit (256 colors) or even 8-, 4- or 2-bit. all can be stored in one .ico file!

so, summarizing here – if you want to make sure your favicon look great wherever people might see it, then try creating a few versions in your favicon.ico file.

16×16, 16-bit (256) colors
16×16, 32-bit colors
32×32, 16-bit (256) colors
32×32, 32-bit colors
48×48, 16-bit (256) colors
48×48, 32-bit colors

don’t go too crazy, because every variation makes your favicon a little bit bigger, which means it will take slightly longer to download.