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,
- What is a favicon?
- How to identify a favicon on a webpage?
- How to add a favicon to a website with just a single line of HTML?.
- 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?
- The highlighted icon in 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="icon" type="image/png" 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.
- this 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.
💡 Web Development 💡
Favicon - Explained
Every website has a logo/small image which shows on the top of the browser which is called as favicon.
Let's see how to add one to your website!!.
#webdevelopment #WomenWhoCode #DevCommunity23:15 PM - 04 Aug 2021
Top comments (2)
Yes good catch it should have been png. It has been updated now. And .ico was mostly used for old browsers specially IE11 and lowers, considering that majority have moved to modern browsers .ico might not be required anymore and is debatable based on what browsers you still support in your project etc. I guess. And yeah I have mentioned that .ico was used for old browsers.
Thank you for the feedback !!! Happy Coding :)
I was also wondering what was going on. I thought his way was a slightly different way of doing stuff.