What is a Favicon and how do I implement one?

So what is a Favicon?

The above screenshot shows the browser tab bar in Apple Safari. The little icon to the left of the website name is the Favicon. These little icons help users quickly spot your website amoungst all their open browser tabs.

Favicon are also used in the books marks that you can save of your frequently used sites.

How do you create a Favicon?

A few years back when these first came out it was a simple job of creating a PNG file which was 128 x 128 and changing the extension to .ICO. Now it’s much more complex, but the good news is there are tools to help you handle this compexity.

Favicon Template File

You can right click and save the PNG below. This is a useful template file for a Favicon. It’s 512×512 and was what I used to design the Favicons for this site.

Once you have edited the Favicon template file so that it represents your website or brand you can use it to generate icons of all the various sizes needed for different platforms and devices.

You can do this manually but there’s a great website I use these days called https://realfavicongenerator.net you upload your edited Favicon template and use the generate option. This will then give you a zip file containing all the different versions of your icon and the HTML code you need to install.

You can unzip the file on your computer and copy the icon files into the root directory of your website.

You then need to add the HTML code that Realfavicongenerator generates for you before the </head> line in your HTML.