Favicon is derived from favorite icon. It is a 16×16 pixel icon used to represent a website or webpage or web application on the web browser. Favicon can be seen on your browser’s bookmark bar, history and in search results, alongside the page url. The other names of favicon are shortcut icon, website icon, tab icon, URL icon, or bookmark icon.
Importance of favicon.
It becomes very easy to identify any website or webpage or web application on the web browser visually by the users.
It also reflects brand recognition to identify easily any website or webpage or web application on the web browser by the user.
Various File Formats of Favicon Icon
There are three types of file format.
- ICO – favicon.ico
It is the original file format of favicon. It is developed by Microsoft. All browsers support this format of favicon.
- PNG – favicon.png
This is one of the simple favicon format as it doesn’t require special tools to create. it’s not compatible with IE5 through IE10.
- SVG – favicon.svg
These files are very lightweight files. They are infinitely scalable. The image quality is superb without sacrificing load times for heavy images. Only Chrome, Firefox, and Opera support SVG format favicons.
Various Common Favicon Sizes.
The favicon should be a square image.
The recommended sizes for ICO favicon are 16×16, 32×32, and 48×48 pixels.
The recommended sizes for PNG favicon are 16×16 and 32×32 pixels.
Effect on SEO
Although favicon doesn’t play any role in getting higher ranking in SERPs. But it can be beneficial for any website or webpage or web application in the following ways.
- It develops a brand trust.
- It helps in developing brand recognitions.
- The user easily and quickly picks the website or webpage or web application.
- It helps to increase click through rates (CTR).
- Some search engines like such as DuckDuckGo, display the favicon within the search results
How to Create or Generate a Favicon
It is very simple to generate a favicon. Follow these steps to generate a favicon.
- Choose any online tool to generate a favicon. The few online tools are
- https://www.favicon-generator.org/
- https://favicon.io/ etc.
- Provide your image by selecting the browser button.
- Click on Create Favicon.
- Download the favicon.
- Save the file.
- Extract the saved file to get the favicon images.
How to Implement Favicon
Follow these steps to implement a favicon having ICO file format.
Create a favicon
Create a favicon as per your requirement.
Naming the favicon
Make sure to name the favicon with the file format as favicon.ico. The web browser looks for the specific name favicon.ico.
Upload your favicon
The favicon should be uploaded at the root directory of your website.
Website url/favicon.ico
Testing the favicon
After uploading the favicon to your website’s root directory, test your website in the web browser whether it is properly displayed in the browser or bookmark list.
Follow these steps to implement a favicon having PNG file format.
Create a favicon
Create a favicon as per your requirement.
Naming the favicon
It is recommended to name the favicon with the file format as favicon.png.
Upload your favicon
The favicon should be uploaded at the root directory of your website.
Website url/favicon.png
Link to your favicon
It is required to specify the location of your favicon. You can use the following syntax to tell the web browser the location of the favicon.
<link rel="icon" href="http://www.yourwebsite.com/favicon.png">
Testing the favicon
After uploading the favicon to your website’s root directory, test your website in the web browser whether it is properly displayed in the browser or bookmark list.
