Add FAVICON To Website

Add FAVICON To Website

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.

vikas-yadav

About the author

Vikas Yadav is a writer to Bloggers Maker. He is also founder of bloggersmaker.com. He has vast experience in SEO of more than ten years in various niches i.e. Education, Pharmacy, Realty, Airline, Gifts, Data Recovery, Best Website Hosting, Mobile Application Development and News.

Leave a Comment