Adding a Favicon

Design Tips- Last updated Nov 2, 2016

A favicon is an icon which is displayed in the browser navigation bar when a customer comes to your website, as well as is saved when a customer bookmarks your website. This icon is a 16px by 16px or 32px x 32px image in an ICO format.

If you would like to add a favicon to your website, you will first need to create an image in ICO format. Most image programs such as PhotoShop and Illustrator have this option if you go to File > Save As. If you do not see the ICO format, you can often download this file format to add to your image application. You will need to browse online to find the file format pack for your specific application. You can also do a search for favicon generators to find an online application which will create a favicon for you.

Once you have created your ICO favicon, all you need to do is name your favicon, favicon.ico and upload that into your root directory. All browsers look for "favicon.ico" in your root, and will automatically use that if found.

Alternate Option

If your favicon is not in your root, or is not named favicon, or some other unique situation, you will want to include the following in the HEAD section of your page.

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://example.com/favicon.ico">