Adding a Shortcut Icon (Favicon) to Your Web Page

You may have noticed that when you visit certain web sites a small icon appears in the address bar or URL bar (the place in your browser where you type in a URL). If you look at the URL bar for the web page you are now reading, you should see a little moose [Alternate text for non-graphical
browsers: moose icon] . Also, if you open multiple "tabs" (not all browsers support tabs), the small icon appears on the tab next to the web page's title. This small icon is called a "favicon" or favorite icon. Favicons do not work with some browsers, but they do work with good ones like Firefox.

Would you like to have an icon like this displayed when someone visits your web site? It's a piece of cake to do so.

First, you need to create the icon. Use an icon editor to do this. The size of the icon file should be 16x16. If you don't have an icon editor, you can generate one on the favicon.io website. Sitepoint provides links to a number of icon and favicon editors. Another icon editor that has come to my attention is provided on the Website Planet website.

Next, upload the icon to your web site. Make sure that it has the right permissions (everyone should have read permission).

Then, add the following line of code to whatever page(s) you want to cause the favicon to appear. This code must appear in the web page's "header", that is between the <head> tag and the </head> tag.

<link rel="shortcut icon" href="PATH_TO_ICON_FILE/NAME_OF_ICON_FILE" type="image/x-icon"/>

Replace "PATH_TO_ICON_FILE" with the path to wherever you put the icon file (relative to the web page in which you put the code), and replace "NAME_OF_ICON_FILE" with the name of the icon file.

Now, open your web page in a browser that supports favicons. You may have to reload or refresh the page. Voilà! The favicon appears on the browser tab displaying the webpage.

If you're sure you've done everything right and it still doesn't work, check with your web hosting service to make sure that their web server software supports favicons.

Click here to return to Thomas Hedden's home page.

This page is viewable with any browser.