What is a Favicon?

A favicon is the small icon that you see next to the url in the address bar when you visit many websites.

EOTW Favicon

Favicon stands for “favorites icon”, they can also be called “bookmarks icons.” These small 16×16 icons also appear next to the website name when adding a website to your bookmarks list or toolbar.

Why does my site need a favicon?

Favicons serve many purposes for your site.

  • They build brand/logo recognition. Each time a uservisits your URL, they will see the favicon for your site in the address bar.
  • Your site is easy to identify in a bookmark list. When a user has a long list of bookmarked sites, or favorites, it is often difficult to find a single site.
  • If a user is simply browsing through their bookmarks, your favicon makes your site eye catching; it makes it stand out.
  • Many web surfers use the bookmarks toolbar in IE or Firefox. This is the perfect place to put favicons. Take my bookmarks toolbar for example: My Bookmarks Toolbar With a favicon, they don’t have to waste space with text, they can simply add your favicon. Not only does this continue to build recognition, but also saves users the frustration 0f abbreviating your site’s name to something they will remember.

How do I make a Favicon?

There are many ways to make a favicon, all of them easy. Most favicons are static, but some methods also allow you to animate your favicon. These animated favicons can be distracting, though, so be wary.

Web based Creators:

If you want to create a favicon in Photoshop, here is a great guide from PhotoShopSupport.com:

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

Ok, I created one, how do I install it on my site?

Installing your favicon is easy.

  1. Rename your favicon to favicon.ico if it is not already called that
  2. Upload the favicon.ico file into your home directory (the same one that contains your index). Do not put it in an images folder.
  3. To increase support for some browsers, add <link rel=”Shortcut Icon” href=”/favicon.ico”> to the html head of the index page and/or pages which you want to include the favicon. Many modern browsers do not need this code, but it is good to support as many as possible. If you use WordPress, you can add this line in header.php using the theme editor to have the favicon display on all pages.
  4. Visit and refresh your page, your new favicon should show up. If your browser does not display it, try refreshing the page or adding a ? to the end of the URL. If this does not help, clear the cache of the browser, close and reopen it. In IE6 you may need to add your site to the favorites menu. In Safari for Mac, you may need to clear the icon cache in User>Library>Safari>Icons. Unless you did something wrong, your favicon should now be showing up.
Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Twitter
  • Fark
  • Furl
  • Reddit
5 Responses to “Add a Favicon to your site”
  1. LGR says:

    There are some free favicons available at this favicon generator site as well. Some are pretty nice. I have used one or two myself.

    http://www.freefavicon.com/

  2. Nathan says:

    You can make animated favicons, too. They only show up in Firefox so far. Create an animated gif that is 16×16 and save it as favicon.gif. Now, rename it to favicon.ico. Don’t open it and rename it or anything like that, just rename it from windows explorer or the finder or whatever. You could use a php or ssi script to read the user-agent, and if it is Firefox, to insert and if it’s anything else, to insert the normal .

  3. Nathan says:

    Um, on the above comment it read it as actual HTML. In the last sentence, between “insert” and “and” it should say <link rel=”shortcut icon” href=”/firefox_favicon.ico” /> and between “normal” and “.” it should say <link>

  4. Hallo World! » Add a Favicon to your site says:

    […] Add a Favicon to your site Posted on July 7th, 2007 by blog Add a Favicon to your site […]

  5. Rubber Stamp says:

    Great info. thanks for sharing.

Leave a Reply

You must be logged in to post a comment. Login »