Kritika's Blog

Kritika's Blog

How to add a favicon to a website in a single line of HTML?

How to add a favicon to a website in a single line of HTML?

This blog explains how to add a favicon to a webpage and its uses.

Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Each one of us would login to websites or view multiple sites every single day in our life. And most of us are guilty of having more than one tab open in a browser eg: Facebook, Amazon, Google, Gmail etc and even with so many tabs open we are still able to click on the correct tab by looking at that small icon on the browser tab which gives us an indication as to which site it is.

Have you ever wondered what is that small icon next to the browser title called?.

Well, that is favicon.

As part of this blog, we are going to see,

  1. What is a favicon?
  2. How to identify a favicon on a webpage?
  3. How to add a favicon to a website with just a single line of HTML?.
  4. Does favicon help with SEO?

What is favicon?

A favicon is a small icon associated with a website/page/application which is present next to the webpage title in a browser.

It helps users visually identify websites more easily within browser tabs, bookmarks, shortcuts, and address bars. Example - When more browser tabs are open by the favicon user can easily identify the tab and click on it to view the webpage or the same goes for when there are more bookmarks are present etc. With so many tabs/bookmarks open favicon makes it easier for users to identify the site by the image.

How to identify a favicon on a webpage?

fav-tweet.png

  • The highlighted icon in a circle, is how it shows on the browser when the tabs are open.
  • The highlighted icon in the rectangle below is how it shows when the website is bookmarked. You can see a list of favicons for websites bookmarked here eg: google, Facebook, Gmail etc

How to add favicon to a website?

<head>
    <title> My test site </title>
    <link rel="shortcut icon" type="image/jpg" href="images/favicon.png"/>
    .....
</head>
  • add a link tag in the head section of your webpage. [Refer to the above code piece.].

link tag should have the rel attribute value as

  • icon if just using it for favicon next to the browser title/bookmarks/address bars etc.
  • the same icon will be used when the webpage is saved as a shortcut to your desktop/laptop.

href="images/favicon.png"

  • add the path to the favicon as the href value
  • Square icons are expected to be used as favicon. Most used sizes are - 16x16, 32x32 or 48x48.
  • Back in the days the image extension for favicon was .ico for old browsers, but in recent times mostly .png or svg type images are used.

Does favicon help with SEO?

The more important question to ask is does favicon helps with search engine optimization(SEO). No, it directly does not influence SEO, but it does help in creating brand awareness among the users visiting the site because most favicons are logos of the particular brand. Users are mostly seen to revisit pages that have the favicon present compared to the ones which does not. Because when people see a website without one, they tend to feel that it's not a genuine site.

Well, that is it for this blog, and by now you should know how to add a favicon to a website and its uses.

Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.

Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.

Interested in reading more such articles from Kritika Pattalam Bharathkumar?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this