Have you noticed some changes with my blog site? I finally got some time today to work a little bit on a logo and a favicon for this blog.

faviconsEvery website should have a favicon to make it instantly recognizable. Favicons, tiny icons, are displayed in the browser’s address bar, next to the website’s title in bookmarks as well as in a browser’s tab. So think of a Favicon as a mini-advertisement for your site, thus you have to pay an extra attention to make your favicon unique and attractive. It definitely is an essential part of your company’s or website’s branding.

cogmap
Favicon: cog

Keep in mind, that it’s not necessary for your favicon to be a miniature copy of your logo. Not all logos look good when resized down to 16×16 pixels. However it must fit the design of your logo and have a visual connection with it: pick up the logo or website’s colours, initials or shapes.

How to create a Favicon?

First of all, remember that the final size of a favicon should be 16×16 pixels and saved with .ICO extension.
You can use pretty much any graphics software, including Adobe Photoshop.

Plugin Download

You need to download a special plugin to export your Photoshop artwork to the .ICO file format. Windows Icon (ICO) file format Photoshop Plugin can be downloaded from Telegraphics. Follow the instructions in the Plugin’s README file. You’ll need to copy the plugin to your Photoshop’s plugin folder.

Design Process

ibit64 If you already have a logo, try resizing it down to 16×16 pixels and see how it looks. If it doesn’t look good, then start with a new design. It is a bit tricky to design an icon on a 16×16 pixels canvas, so start your project by opening a New File set to 64×64 pixels, RGB, 72dpi.

ibitsmOnce you’re done with the artwork, go to Image -> Image Size and enter 16×16. Make sure you have “Resample Image” checked and choose “Bicubic Sharper” – this way the image would be resized proportionally without a blur effect. If you’re unhappy with the result, go back to the big size and tweak the artwork.

Saving your Favicon

When the 16×16 artwork is ready to be saved, go to File -> Save as and choose Windows Icon (ICO) from the pulldown menu in the Format section. (Note: this extension would be available only if you’ve previously installed ICO Plugin). You can choose any name for your file, but the extension must be .ico, e.g. myfavicon.ico.

Final Steps

Connect to your site’s server and upload the favicon file to the root directory of your website. If you saved your icon as “favicon.ico” and stored in a root folder, some browsers would automatically pick it up. But to be safe, it’s best to add this code to the HEAD section of your HTML pages:
<link rel="shortcut icon" href="/favicon.ico" />

For your blog, go to Presentation->Themes->Theme Editor, click on “header.php” and add the code above anywhere before </head> tag.

That’s it. Now to test it, go to your browser and refresh your website. You should see your favicon in the URL bar.

An Alternative way of creating Favicons

If you already have a logo and want to create the favicon quickly and without a hassle of downloading and installing the Plugin, designing in Photoshop, then you can create it online here. Just upload your image and it’ll automatically create a ready to use favicon that you can download and upload to your website’s server. You can even create animated favicons there.

Favicon Inspiration

Here is a list of sites with Favicon galleries where you can get some inspiration for your favicon’s design:

  • Smashing Magazine features 50 Remarkable Favicons
  • DeltaTangoBravo showcases an amazing collection of Favicons
  • MpP Favicon Gallery has not only a big collection of favicons but also an informative description for each of them (mouse over each icon to read the details about it)

Hope you found this tutorial useful. Let me know if you have any questions about it.

Recent Bits
Related Bits
8 Bits From The Past
Design Critique: Leon Paternoster
Signature Colours
Web Design Dissected Into 8 Bits
8 Clever Logos
When The End Is Just The Beginning
Outstanding Posts Are Not Bestsellers
Visual Design Essentials
Comment Bits

16 Insightful Bits in response to “How To Make Your Site Recognizable with a Favicon”

  1. Great post.The explanation is very nice.I will be making one for me

  2. ibit

    Glad you liked it, Ashish. Have fun designing your favicon :-)

  3. Good Post :)

  4. ibit

    Thanks, Shankar. Btw, is it possible to add a favicon to a blogspot site?

  5. I think you can do it with customised templates, but i’m still not sure!

  6. guy

    mines not working:(
    please help???

  7. ibit

    I just visited your site, guy, and I saw a favicon in the URL. What exactly is not working? Can you give me more details, please?

  8. guy

    hi
    thanks very much for taking the time to check, but yes stupid me it does seem to be working now, i think it may have taken a few minutes to click in or somehting, but yeh it does work now so im really sorry to have bothered you lol, but i appreciate it anyways!!

  9. ibit

    oh, you’re welcome. I’m glad it worked out in the end.

  10. Great info, I did not know about the plugin.

    It is possible to create a favicon also on Blogger blogs:
    1. Open a free account in Google Page Creator and upload your favicon there
    2. In your Blogger account, go to Template, Edit html and insert the following code immediately after the head tag:
    <link href='http://youraccount.googlepages.com/favicon.ico' rel='shortcut icon'/>
    <link href='http://youraccount.googlepages.com/favicon.ico' rel='icon'/>

    3. Save and view blog.

  11. Vivien

    Simonne, Thanks so much for the instructions on favicons for Blogger blogs!

  12. You are welcome. I did not try that myself, but I know somebody who did and said it works.

    Do you know if there is any trick to make favicons show also on IE 6?

  13. Vivien

    Looks like on IE favicons will show up if you add that site to your Favourites. This site gives more tips on how to get favicon recognized by IE: http://www.rw-designer.com/favicon

  14. The subtle emerald greens of your Favicon lend themselves to an animated Favicon, which will activate on Firefox and Netscape, though not on Internet Explorer, which requires a second static file (or it will refuse to show your effort). So for those of a subtle artistic bent who want a little more edge for their sites, there is a tutorial here http://www.cathetel.com/favicon.htm . It has the code that you place in your Head to furnish one graphic to IE and the animated graphic to all others. Cheers.

  15. Thanks, Healing the Body. I liked your favicon, but for my site prefer to stick with the static one.

  1. 26 Internet Marketing How To’s for Every Level of Experience | Sparkplug CEO

    [...] Inspirationbit on Make Your Site Recognizable with a Favicon [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on