Favicons: why and how to create favicons

The "WHY" of Favicons

Favicons ARE an integral part of your website and branding.

Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.

Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.

They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.

They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.

Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?

The "HOW" of Favicons: How to design & create a FavIcon:

Designing a Favicon:

  • If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
  • If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
  • Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
  • If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.

Creating a FavIcon: Converting an image to a .ico

  • Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
  • If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your .jpg, .png or .gif into a .ico file. The file created will be called favicon.ico. You will be directed to download it.
  • Upload the .ico file to the root directory of your website.
  • If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the .ico file in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
     

    <link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />

Uses of Favicons

Now your favicon can appear all across the web:

This entry was posted in Best Practices, Cursors & Icons, SEO, Web Development. Bookmark the permalink.

7 Responses to Favicons: why and how to create favicons

  1. Robert says:

    Thanks, I always wanted to know how to create this little but nice icons.

  2. Scott Nix says:

    I was actually going to write an article similar to this. So I read yours and noticed that you had a link to Dynamic Drive’s FavIcon Generator, I hadn’t seen that before, so thank you.

    Figured some of your readers also may want to know that there is a free plug-in for Photoshop so you can do it all yourself. The plug-in doesn’t list Photoshop cs3 as compatible, but it is, the article is just outdated. Figured this info might help someone. :)

    Favicon for Photoshop – http://www.telegraphics.com.au/sw/

  3. Estelle says:

    @Scott: Thanks for the Photoshop extension link. I added the link to the blog entry just in case a reader doesn’t make it to the comments section.

    Also, check out a list of favicon generators.

  4. DamianS says:

    Thanks Estelle! I always wanted to know how these icons were made and where they were placed on a website.
    FWIW, I dont use photoshop but Gimp, so I’ll have to track down a plugin to save as .ICO’s.
    BTW, is 10k for an .ICO rather large?
    Thats the size I got from the one from Dynamic Drive :/

  5. Estelle says:

    @Damian: My favicon came out to 1.1 KB. I did a search on my hard drive for .ico files, and file sizes seem to range from 0.3 KB (Yahoo!) to 26 KB (Google Earth) for a 16×16 .ico file. 16×16 seemed to run under 1.5KB, and 32×32 were around 3.5 KB. Your .ico seems to be large for a 16×16. Did you save it at a larger size?

  6. Amyobus Key says:

    As site brands increase in number, to stand out from the herd, you can always improve your design (move from a square letter, like the ugly Google favicon) all the way up to a transparent animated favicon. They work in Netscape and Firefox. Internet Explorer still needs a static favicon, and special code for your Head section so that everything works. You can find a tutorial here at http://www.cathetel.com/favicon.htm .

  7. Davis Rios says:

    It’s funny when you write that out as a function (that’s not a function by definition).