example of favicon

Add Your Website Icon to the Browser Tab

The cool little icon that shows up in each web page’s browser tab is called a “favicon”.  Adding this tiny detail really gives your website a professional appearance in the browser.  Here’s how to do it – and this works with older versions of IE, unlike other solutions I’ve found on the Internet! 

First, you’ll need to generate the artwork.  Keep in mind that it will be reduced to a 16 x 16 pixel square, so it can’t be too detailed.  To allow for higher resolutions in the future, I generate it as a 32 x 32 pixel image.  The browser will reduce it as needed.  Create your icon and save it as a .png file.

Update

Since I wrote this article in 2012, the browser makers have standardized and now you just need one snippet of code and one icon file type. The following piece of code in the <head> section of your site will work for the latest versions of all major browsers now:

<link rel="shortcut icon" href="http://www.brianshim.com/webtricks/wp-content/uploads/2012/11/stars_favicon.png" type="image/x-icon" />

Substitute your 32 by 32 pixel.png image path inside the href.

If you’re interested in older browser backward compatibility, read on!

The Original Article

Note: this section applies to older browsers only. You no longer need to do this for the latest browsers!

For compatibility with IE and Chrome, you’ll also need a .ico version of the icon.  Not to worry, this is a common need and there is a website just for doing that: convertico.com.  Type in the path to your .png file and hit GO.  A link to download the .ico file will appear to the right.

Upload these icon files to your server.  I usually put them in the images directory.

Next, add the following lines to the <head> portion of your website assuming that they are stored in the images directory of your website:

<!-- Hide this line for IE (needed for Firefox and others) -->
<![if !IE]>
<link rel="icon" href="http://yourwebsite/images/favicon.png" type="image/x-icon" />
<![endif]>
<!-- This is needed for IE -->
<link rel="shortcut icon" href="http://yourwebsite/images/favicon.ico" type="image/ico" />

If you are using WordPress, the <head> section is defined in the header.php file located in wp-content/themes/your-theme-name/.


Now some explanation about the conditional “if” statement.  Through trial and error, I found that the .ico file does not work with Firefox, and that the .png file works with all browsers except for IE, which chokes if it sees the .png file.  Hence the conditional browser comments.  Also, I’m talking about IE9 here.  Earlier versions of IE are even worse.  Some require the .ico file to be in the root of the hosted directory.  I leave that to those who want to do the research.  If there’s anyone who knows of a single method that covers all browsers, please comment below, however, I have not found a more complete description of how to do this in my Internet searches.

One Important Caveat

Note that all browsers employ caching when it comes to images, including the icon image.  So, when you’re testing this you’ll need to clear your browser cache whenever you change the icon.

Hope this helps! – Brian



41 thoughts on “Add Your Website Icon to the Browser Tab

  1. The 4th line seems to have an excess ‘>’ which caused an additional line with that character appearing on top of my header banner image. Deleted it and problem was fixed. Many thanks! this works for all current versions of chrome, firefox, and IE at the time of posting this comment. Also noticed .ico seems to work with IE now.

  2. Hi, thanks for the tip! I have followed the instructions, and it works on all browsers I tested on, except for Chrome… Do you have any suggestions on how to troubleshoot?

    1. Sorry, the HTML got filtered out:
      rel=”shortcut icon” href=”http://www.brianshim.com/webtricks/wp-content/uploads/2012/11/stars_favicon.png” type=”image/x-icon”

      Put this inside the tag

      1. Thank you for the quick answer! I tried to change it, but still doesn’t work in Chrome. Strangely enough it still works for IE(?), even without refernce to the .ico file. Is it because I have IE 11?

  3. Thanks, I am so unskilled in making websites and things around, but this really helped. A little attention was needed as the links for the images were a bit different and I have used two different images, one .png and the other .ico. Don’t know if it would work with both being .ico, but for me it does not matter. Thanks a lot!

  4. I’m a little lost!
    I have copied my image, converted to .png AND .ico
    Do i copy the whole content of lines within the blue box above? and do i amend any details within?
    Thankyou

Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.