How to Make and Use a favicon

A favicon is a website and bookmark icon. It is a little picture that can appear in the web browser in the bookmarks list, address bar, on the desktop, etc. To make it, you create a square file as png, jpg, or gif, and then convert it to an "icon resource" on the web. [Just below is a summary of how to make a favicon. After the summary are more details]

Summary

  1. Make an image [more ]
    1. In an image program (such as Photoshop), make a square image.
    2. Save this image as gif, jpg, or png format. Here is more about making the image.
    3. Save the image in any folder.
  2. Turn it into a favicon:

    using your graphics program on your computer:

    • The newer PhotoShop and other apps will "save as" favicon format.

    OR
    using a cool tool on a website. Two good ones are:

  3. Put the favicon (the favicon.ico file) on your website:
    • The file you got back, would be named favicon.ico.
      Now you want to upload it to your website so the world can see it.
    • "Flat file" (html file) website:
      Upload the favicon.ico into the web root (the main website folder).
    OR
    • CMS (WordPress, Joomla) website:
      Upload the favicon.ico into the "themes" or "templates" folder, in the theme/template that you are using for the site. You may want to put it into the images folder so it doesn't get mixed up with theme files.
  4. Add the <link rel ... /> lines to your web pages:
    In the <head> section of your html pages, put the following lines: 
    <link rel="icon" type="image/x-icon" 
    href="/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" 
    href="/favicon.ico" />
    If you got an animated icon as well, add this also: 
    <link rel="shortcut icon" type="image/gif" 
    href="/animated-favicon-name.gif" />
    (Remember to replace "animated-favicon-name" with the filename of your animated favicon gif!)
  5. Now reload the page, and you should see your nice favicon in the address bar!
    Hmmmm, what if it doesn't show up?

Details: [ what is a favicon?   |   making the favicon   |   if the favicon doesn't show ]

What is a favicon?

A favicon is a website and bookmark icon. It is a little picture that can appear in the web browser in the bookmarks list, address bar, browser tab, on the desktop, etc. A favicon is a nice and easy way to make your website look special.

Favicon is short for favorites icon The name comes from the Favorites (bookmarks) list for Microsoft Internet Explorer. When you add a site to your Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If it exists, this file will be used to provide an icon that is displayed next to the bookmark text. Other browsers (such as Mozilla, Firefox, Opera) now have support for favicons, and also display them in the address bar, browser tab, etc.

Making the favicon image

When you reload the page, you will probably see your new favicon in the address bar – But if you have changed the favicon to a different image, it probably won't appear.

favicon-howto.html
Revised 11 April 2010