Table of Contents
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
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
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.