Blog Topic #10—Fabulous Favicons!

Favicons, the tiny 16x16 pixel graphics that show up in the address bar of your browser for certain web pages, are a quick way for users to identify your page from a list of many bookmarks. A favicon can be a depiction of your site's logo or some other related icon and is helpful to round out the continuum of branding for your site.

The favicon file format is ".ico", a format not natively supported by Photoshop or other image creation software. A special plug-in must be downloaded and installed in order for Photoshop to read and save to the .ico format. Alternatively, there are on-line favicon creation services that allow you to upload an image you wish to use and generate a favicon.

Once you have created your favicon (named "favicon.ico"), you'll need to add it to your webpages so that web browsers can detect it. It must be placed in the root level directory, not in an "image" or other folder. It should sit at the same level as the "index" page. A small line of code should be placed into the head section for each page on which you wish the favicon to appear: (replace { with<)

{link rel="Shortcut Icon" href="/favicon.ico"}

This allows browsers which look for a direct link to the favicon image to find and display it properly.

It's quite a challenge to design a readable, recognizable and graceful graphic in such a small dimension! Find inspirational sites here, here and here. They can give good insight into what characteristics make an effective favicon.