A Favicon is a graphic icon or a small image that is associated with a website and displayed as a visual indicator of your website. It is meant to be an abbreviated term for Favorite Icon. Most websites have a brand and a brand image that uniquely identifies it. The favicon is usually the brand image in a smaller form, however it does not have to be the same as the brand logo.
You can use any image as your favicon as long you have the rights to use it. Usually the favicon is the same across all webpages on a website, as it is meant to uniquely identify the website. However, technically speaking there is no reason why you cannot have different images to represent different webpages or different sections of the website.
Uses of Favicon
Favicons are mostly used by website clients such as the website browsers and it is mainly used as an accessibility feature. Most web browsers display them on tabs and address bars as a visual identifier for the website. It is quicker for the user to identify which website the tab is displaying by just looking at the logo or the favicon.
Other mobile clients, such as Android or iOS operating systems can use it to create shortcuts if the website is saved as a browser bookmark or an app. It can also be used as a desktop icon if the website is saved as a shortcut to desktops or other compatible devices.
Favicon Image
The favicon image is pretty small in its size both in visual dimension as well as in file size. The most popular size are either 16×16 pixels or 32×32 pixels. As you can see, it is a square in its dimensions.
The image format is PNG, ICO or GIF. Most browsers also support other formats such as JPG or SVG but the support for these formats are not universal. You can easily create a favicon from your brand logo by using an image editor. There are also many online tools that allow you to do this as well.
If you are using an image editor, you use easily do this in three steps. 1) Crop the image to a square. 2) Resize the image to the desired pixel width and height. 3) Save the image in the appropriate image format.
Adding Favicon to your webpages
The favicon is defined in the head section of an HTML page. You will need to add this to every webpage on your website, to get the same effect on all pages. Usually, most websites will have an common header template or source file that is included by default into every page. You can include the link tag in this file.
If you are using WordPress or another CMS, then there might already be builtin functionality to specify a favicon. Some themes will provide you the option to specify custom code in the header, which can be used for these tags as well.
The recommended method to define the favicon is by using the link tag with the rel attribute. The rel attribute should have a string value: icon or shortcut icon. The following example shows you how to define the favicon image from any path.
<link rel="icon" type="image/png" href="/somewhere/myicon.png" />
Some browsers look for a file named favicon.png or favicon.ico in the top most folder of the website if it does not find an appropriate tag in the page. This method is mostly antiquated or deprecated and you should not rely on it, although many browsers still support it. However, you can support both method by naming your image file to favicon.ico and using that in the link tag.
<link rel="icon" type="image/png" href="/favicon.png" />
Troubleshooting
If the favicon is not displaying correctly even after defining it, then you will need to troubleshoot it. There are some common errors that happen that are easy to overlook.
Simple and Obvious Errors: Spelling mistakes in file names or tag names. This is more common than you think. Make sure that the browser you are using does support favicons.
File Path: I recommend that you use the complete and absolute path to the file starting with the root (/). Depending on how the website is structured, the relative paths can point to non-existent paths when included from pages in sub-folders.
File Permissions: You will definitely need to provide appropriate file permissions to the user who is running the web server. Usually, read permissions should be sufficient.
