Follow us to get updates related to latest posts Follow Now!

How To Add Hd Favicon In Blogger.

If you want to set HD favicon on your blogger blog then you have come to the right place..
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello! Welcome to Tech Ankur

If you are looking for How To Add Hd Favicon In Blogger. then this post is just for you.

How-To-Add-Hd-Favicon-In-Blogger.-3264x1632

If you want to set HD favicon on your blogger blog then you have come to the right place, you guys need a code to set HD favicon in blogger blog

Now let's start learning

What is a Favicon?

A favicon is a small, 16x16 pixel icon used on a web browser to represent a website or web page. Short for "favorites icon", favicons are typically displayed on tabs at the top of web browsers, but they are also found in your browser's bookmarks bar, history, and search results, along with page URLs.

How to set HD favicon in blogger

  • Open the code in notepad
  • If you are using android you may open in quick edit application
  <!--[ Favicon by- techankur.xyz ]-->
  <link expr:href='data:blog.homepageUrl + &quot;/favicon.ico&quot;' rel='icon' type='image/x-icon'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='57x57'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='72x72'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='76x76'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='114x114'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='120x120'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' sizes='144x144'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='152x152'/>
  <link href='https://blogger.googleusercontent.com/img/b/xxxx.png' rel='apple-touch-icon' sizes='180x180'/>
  
  • Here you will see various image sizes like 57x57, 192x192, etc.
  • Go to Image Resizer and resize your logo to the following sizes
  1. 192x192
  2. 57x57
  3.  72x72
  4. 76x76
  5. 114x114
  6. 120x120
  7. 144x144
  8. 152x152
  9. 180x180
  • After resizing image go toBlogger Dashboard
  • Click on New page
  • Click on the image icon at the top and import all sizes of images
  • Caption images by their size to remember the size of the image
How to set hd favicon in Blogger
  • Publish page 
  • Click on view 
  • Copy link address of image 
  • Replace image links from html code
  • After replacing all image Link
  • Copy all code
  • Go to blogger dashboard
  • Click on theme
  • Click on Edit html
  • Find <head>
How to set hd favicon in Blogger
  • Paste the code below <head>
  • Click on Save Theme

That's done!

If you face any problem, then join our tech ankur group

Copyright:
Tech Ankur

About the Author

Hey! Im Ankur Kumar, I am a professional part time blogger. Here we share informative and technical information. This blog is made to teach you something new. Buy Me a Coffee

Post a Comment

Please don't share any sensitive or personal details here.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
Site is Blocked
Sorry! This site is not available in your country.