Add a Favicon to a Website

Add a favicon to a website

What is a favicon?

A favicon is a graphic icon or image that is associated with a particular web page and/or a website. Favicons are often displayed as visual reminders of the website’s identity: in the adress bar, in tabs and inside the favorites bookmarks menu. A favicon does not have a specific function, but it is pretty important. A favicon is critical for site recognition in a brower full of tabs, it adds extra polish that visitors higly value and it significantly helps to further establish your website’s branding. Your website will simply look incomplete without one.

How to add a favicon to your website

To add a favicon to your website, you first need to create a favicon image or logo. You also need a method to specify that the image is to be used as a favicon on your website.

Create favicon

When you create a favicon, it is important to know that your image must be square, using either 8-bit or 24-bit colors and that your image should best be created in a .jpg, .png, .gif format (for transparency reasons) and use the icon – .ico – file format, with size of up to 100k. Use your logo, use a stylized version of the first letter(s) of your site, use an icon that communicates what your site represents, … Once you have chosen or created your image, use a free service like realfavicongenerator.net to upload your image and to convert it into an icon. Note that your website design should support the static file upload feature. Verify whether this option is available in your site properties before you proceed.

Add favicon

If you only want one favicon, simply save the favicon .ico file to the root folder of your site. When uploaded, the favicon must be accessible from http://www.yourdomain.com/favicon.ico. Your browser should start displaying the icon for all pages on your site. If it does not, clear your browser cache and reload the page.

For better control, you can also specify favicons on a page-by-page basis. Save the .ico file anywhere on your site, for example as an image in your image folder. Then add the following code to your page:

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

When you use this approach, you definitely still want to upload a fallback icon to http://www.yourdomain.com/favicon.ico for situations where someone is browsing or bookmarking non-HTML content (like for example a PDF).

In sum:

1. Create a square image. If you want transparency, use the .png or .gif format.
2. Convert your image to  the.ico format using a free service like realfavicongenerator.net/.
3. Upload the new icon to http://www.yourdomain.com/favicon.ico . For finer control, use the code to specify favicons on a page-by-page basis.