Find Solutions > Web Development

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 16x16 .png file and then convert it to an "icon resource" with a little program called png2ico. [Just below is a summary of how to make a favicon. After the summary are more details]

Details

[ what is a favicon?   |   making the favicon   |   installing the favicon ]

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.

How do you make one?

You create a 16x16 .png file and then convert it to an "icon resource" with a little program called png2ico which you can get here. Above is a summary of how to do it. Below are more details:

1. Make a small image:

1. In an image program such as Photoshop, make a 16 x 16 pixel image.
• Details about making the image:
• transparency:
  Since you won't know what colors might be in the background of your favicon, use a trasnparent background for your image if you don't want it to look like a box.
  icon resources only support binary transparency, that is, you can't do something like "40% translucent".
• size:
  You can also make a larger image (32 x 32), for a higher quality image when for when a url is displayed on the desktop. This isn't really necessary, because if the icon resource only contains a 16x16 image, it will be scaled to the appropriate size. But adding more and larger images is not necessary, and makes the favicon take longer to download.
• colors:
  Keep the number of colors below 16, and create a 16-color icon using the --colors 16 switch of png2ico (or even create a black and white icon with --colors 2). Then the file will be smaller and load faster.
2. Save this image as png format.
3. Save the image(s) in a folder with the png2ico program.

2. Turn it into a favicon:

using png2ico on your computer:

• From a dos prompt, cd to the folder with the png file, and run the png2ico command:
  png2ico favicon.ico yourfilename.png
  (The "dos prompt" is what you get when you type command (win98) or cmd (winxp) in the "Run" box.) If you need help with using dos, try this dos info.)
  Remember, png2ico is a command-line application (no gui, no icons, no mouse)! You have to launch it from the command line (dos prompt). You can NOT just double-click it - nothing will happen!
• This will make a new file, named favicon.ico
• You can add more images to the same icon resource to provide alternative resolutions, like this:
  png2ico favicon.ico yourfilename.png yourfilename2.png
  (See the "size" section above for things to think about when making bigger icons.)
• Get png2ico here.

OR
using a cool tool on a website:

• At http://tools.dynamicdrive.com/favicon/
• Upload your gif, jpg, png, or bmp, through the form, and it shows you what the favicon will look like and gives you a link to download it.
  There's more information about favicons at the bottom of the page.

3. Put the favicon (the favicon.ico file) on your website:

1. Send the favicon.ico to your website (with WinSCP, ftp, or whatever program you use to upload files).
2. The web browser will first look in the same directory that the file is in for a favicon. If it doesn't find it there, it looks in the top-level directory (like www.example.com/favicon.ico) so if you put it in the top-level directory, you can have a default favicon for all the pages on your website.

4. Add the <link rel ... /> lines to your web pages

• On some browsers, the favicon is not always displayed unless the web page explicitly declares its presence. To declare that your web page has an icon, put the following lines In the <head> section of your html pages:

  <link rel="icon" type="image/x-icon" 
      href="http://www.yourdomain.tld/favicon.ico" />
  <link rel="shortcut icon" type="image/x-icon" 
      href="http://www.yourdomain.tld/favicon.ico" />
  

• (Remember to replace www.yourdomain.tld with the address of your website!)
• For most browsers, it will work to say just: href="/favicon.ico" /> but MSInternet Explorer needs the full url of your website to display the favicon.

5. Now reload the page, and you should see your nice favicon in the address bar!

• Also, if someone bookmarks a page of your site, your favicon will appear in their bookmarks (favorites) list.

howto-favicon.html
Revised 13 May 2006

All content not copyright by anyone else is copyright © 2003–2006 James Walker.
License for use is the GNU Free Documentation License. Find it:
here in the License directory
or at the Free Software Foundation, www.fsf.org