Favicon not showing when adding to home screen
Dhanjee Rider
Hello bloggers today we learn about why your favicon is not showing up when you add your website to the homepage and how can we fix this problem.
![[Solved] favicon not showing when adding to home screen](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMhTKl8iG3Hicy6NGHhxcVakg3oiOiBzSxCuh1nIMkVcliTd4z5R9CMAo22QPbsVlif13kW4H5Oz9qEWo5eoL2HfV9vW6FA-BFEpiG9T-IsoKcgnA0fYHH84ZUrfyyXaJsMd8oNTk13Smpiss3_nsMxAnuTjP55-pX6zjPPVoD0UGhiuGdKuHebSJw/s1920/how%20to%20add%20favicon%20that%20show%20in%20homepage.webp "[Solved] favicon not showing when adding to home screen")
When you use a blogger website, there are default codes in your theme that do not show the favicon when you add your website to your homepage you can see demo in the thumbnail. However, it is now possible to add the favicon with simple codes.
How to show favicon when i am adding my website to home screen
If you want to add your favicon correctly to show up on the homepage, you need to add the custom Favicon meta tag to your blogger theme, you can delete your your old favicon meta tag if you want ๐คท.
Here, I will provide a code file that you can download and open in Notepad or Keep Notes.
Requirements:
First of all You will need an image that you want to use as the favicon for your website, and you will have to resize that image in the following sizes by Pixellab app or any other resizer it is hardwork but hardwork make powerful results ๐.
Resize your image in these ๐๐ป sizes
- 180x180
- 57x57
- 72x72
- 76x71
- 114x114
- 120x120
- 144x114
- 152x152
The main icon on your blog website is the 180x180 size, which is used as the home screen favicon. You need to paste the 180x180 image link in the apple touch icon, 180x180, and x-icon. In other words, one image link in three meta tags.
You can see Demo work on telegram group
How to make links of images:
You can use a blog post to generate links for your 9 images. Just create a post and upload all your photos, then collect all the links into a separate notepad or use Google Keep Notes app.
Now, create 9 images of the provided size using Pixellab to resize the images into 9 different sizes.
I have provided the code file ☝️ and now you need to replace my image link with your image link (if not my favicon will shows in your site). Then paste this code into your blogger theme (above <head>)and save it. Clear the cache of your browser and try to add your website to the homepage. Now, you will see your custom favicon on your homepage.
Enjoy and share this post with your blogger friends!
Last word
In this post we will provided information about Favicon not showing when adding to home screen , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
