How to Create and Install Favicons

January 21st, 2010 by Matt

A favicon, short for “favorites icon,” is that little icon displayed to the left of the URL in modern browsers, such as Firefox, Safari, Camino, Internet Explorer 6, etc. This file needs to be in a special format, called Windows Icon (ICO) format. The following is a quick “how-to” on building your own. It’s really quite easy!

Create/Install Instructions

  • Create a 32 pixel by 32 pixel image in your favorite image editor. (You can create a 16 pixel by 16 pixel image, but 32 x 32 will display better for shortcut images, if you are using Windows with I/E. If you aren’t worried about Windows shortcuts, use 16 x 16. More on this later.) Save it as a .PNG file. At this size, the simpler the graphics, the clearer the icon will be. Also, you might want to save it with a transparent background if you don’t want a square image.
  • Using a software package that allows saving files as .ICO files, such as LemkeSoft’s great GraphicConverter X for the Mac, open your .PNG file and save it as “favicon.ico” in .ICO file format. You can also use Adobe Photoshop, but you’ll have to download a special free plug-in from Telegraphics and use the plug-in to save the file in .ICO format. It’s very important to specifically save your PNG file as a .ICO file. (For details about using the Photoshop plug-in, see the Photoshop Plug-In Procedures section below.) Another great option is to generate the .ICO file online via the FavIcon from Pics website. Simply upload your .PNG file via the “Browse” button and click “Generate Favicon”. It is very easy and seems to work really well.
  • Once your .ICO file is created, upload it into the top–level directory of your website (the same directory your index.html file lives in) using your favorite ftp software. If you are a Mac user and you haven’t yet tried it, try Transmit from Panic software. Awesome software!
  • Edit your home page HTML file and add the following lines into the <head> section of the page:

    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    Note: The “shortcut icon” line is what Windows I/E uses to display a shortcut icon when you drag the URL to the desktop. This is where the 32 x 32 pixel image comes in. It will display much better (clearer) when dragged to the desktop. If you don’t care about this, you can leave this out. The favicon will display fine without it.)

  • Upload your changed home page HTML file into the top–level directory of your website.
  • Refresh your home page with your browser. You should now see your new favicon. If you do not, please see the Caveats section below.

Photoshop Plug-In Procedures

(Applies to both Mac and Windows versions.)

  • Download the plugin from Telegraphics. Copy the “icoformat” file into the “File Formats” folder inside your Photoshop “Plug-Ins” folder. If you already have Photoshop running, make sure you quit and restart Photoshop to activate the plug-in.
  • Go to File>Save As and make sure you name the file “favicon.ico”. Under “Format” you must choose “Windows Icon (ICO)” from the pulldown menu. (This format will only be available in Photoshop after you download and install the plugin.)
  • Continue with Step 3 of the Create/Install Instructions listed above.

Caveats

As is often the case with multiple browsers, there are a couple of caveats if the favicon is not displayed:

For Internet Explorer 6: As usual, I/E is the most “flaky” in its display behavior for favicons. It will not display the favicon until you bookmark the page to your “favorites” list. Your favicon may disappear after a period of time and then magically reappear! This is a bug (one of many) in I/E. Either live with it or use a better, standards–based browser such as Firefox.

For Mac Safari: If you don’t see the favicon appear in your browser and you are using the Mac Safari browser, you will need to clear out the icon cache. Download “Safari Icon Manager” from Versiontracker.com (or other shareware software source). There are two versions…one for Safari version 1.2 and one for Safari version 1.3 and above. Use the appropriate version for the browser you are using. Follow these steps:

  • Start up Safari Icon Manager
  • Click on “Empty Cache”
  • Refresh your browser while browsing your home page. You should now see your new favicon.

For all browsers: Try typing a “?” at the end of the URL and refresh the browser. This will force the browser to flush out the cache and read in the new favicon.

Go Do It!

Caveats aside, that’s all there is to it. Give it a try!

Posted in Graphic Design, How To, The Web | No Comments »

No comments yet. Be the first.

Leave a reply