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

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 tabs open in a browser eg: facebook, amazon, google, gmail etc and even with so many tabs open we are still a…


This content originally appeared on DEV Community and was authored by Kritika Pattalam Bharathkumar

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 tabs 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 help 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 user to identify the site by the image.

How to identify a favicon on a webpage?

fav-tweet.png

  • 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="shortcut icon" type="image/jpg" href="images/favicon.png"/>
    .....
</head>
  • add a link tag in the head section of your webpage. [Refer the above code piece.].

rel = "shortcut icon"

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.
  • adding value shortcut means 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, but in the recent times mostly .png type images are used.

Does favicon help with SEO?

The more important question to ask is does favicon help 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 which have the favicon present compared to the ones which does not . Because when people see a website without one, they tend to feel that its 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 checkout the short version of this blog in the below thread.


This content originally appeared on DEV Community and was authored by Kritika Pattalam Bharathkumar


Print Share Comment Cite Upload Translate Updates
APA

Kritika Pattalam Bharathkumar | Sciencx (2021-08-31T03:32:39+00:00) How to add a favicon to a website in a single line of HTML?. Retrieved from https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/

MLA
" » How to add a favicon to a website in a single line of HTML?." Kritika Pattalam Bharathkumar | Sciencx - Tuesday August 31, 2021, https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/
HARVARD
Kritika Pattalam Bharathkumar | Sciencx Tuesday August 31, 2021 » How to add a favicon to a website in a single line of HTML?., viewed ,<https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/>
VANCOUVER
Kritika Pattalam Bharathkumar | Sciencx - » How to add a favicon to a website in a single line of HTML?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/
CHICAGO
" » How to add a favicon to a website in a single line of HTML?." Kritika Pattalam Bharathkumar | Sciencx - Accessed . https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/
IEEE
" » How to add a favicon to a website in a single line of HTML?." Kritika Pattalam Bharathkumar | Sciencx [Online]. Available: https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/. [Accessed: ]
rf:citation
» How to add a favicon to a website in a single line of HTML? | Kritika Pattalam Bharathkumar | Sciencx | https://www.scien.cx/2021/08/31/how-to-add-a-favicon-to-a-website-in-a-single-line-of-html/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts