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.

I am a Front end developer currently working on React JS, HTML, CSS, Python, Vue JS, Webpack, Babel, AEM etc.
Search for a command to run...
This blog explains how to add a favicon to a webpage and its uses.

I am a Front end developer currently working on React JS, HTML, CSS, Python, Vue JS, Webpack, Babel, AEM etc.
No comments yet. Be the first to comment.
As a user when you open a site in mobile, we tend to pinch and zoom the page to see things more clearly. Have you ever wondered if that feature can be disabled?. Yes, it can be disabled. What's more interesting is that it can be done by just a single...
Are you planning to start your coding journey?. Then this is for you - a roadmap to help you achieve your goals.

7 ways in which you can add files to your commit using git add

As a website user, one would have come across links or buttons which say "Click to download" or "Download" on a website. Have you ever wondered how can you add one to your website?. Keep reading!!!. As part of this blog let us see how one can crea...

Display Hello World and custom message using two-way data binding

Build a random quote generator using an API - JavaScript

Kritika Pattalam Bharathkumar | Web Developer - The official blog of Kritika Pattalam Bharathkumar
22 posts
Front End Engineer | Writes about HTML, CSS, JavaScript and everything related to web development | Follow me on Twitter let's chat.
Each of us would log in to websites or view multiple sites every 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.
Well, that is the 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?
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 quickly identify the tab and click on it to view the webpage or the same goes for when there are more bookmarks present etc. With so many tabs/bookmarks open favicon makes it easier for users to identify the site by the image.

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
<head>
<title> My test site </title>
<link rel="shortcut icon" type="image/jpg" href="images/favicon.png"/>
.....
</head>
link tag should have the rel attribute value as
icon if just using it for a 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 favicons. Most used sizes are - 16x16, 32x32, or 48x48.
Back in the day, the image extension for favicon was .ico for old browsers, but in recent times mostly .png or svg type images are used.
The more important question to ask 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.