Hey Geeky Bloggers! I hope you all doing well. This week I noticed one thing in my blog which really irritated me but I cannot do anything to fix it. The problem was related to the Favicon of the blog which was appearing everywhere but not visible in the Google Chrome browser.
Also, whenever I bookmark my blog then also the favicon was not visible and a blank default picture was shown.
Recently, while working around some minor tweaks I just realized to add some metatags which can help me to solve the favicon issue also and it worked pretty well.
Earlier also I share a blog post which was primarily focused on solving this favicon issue by displaying different sized favicon.
Here is the method which helped me to fix the issue of favicon not showing on the Google Chrome browser or iOS Safari Browser.
Follow the method to update your favicon to make it compatible with mobile browsers:
This can be simply solved by adding just two metatags in the <head> region which will facilitate the addition of favicons to the browsers.
1. Make your favicon in two different sizes with .png extension.
- The first size is 120×120 px
- The second size is 152×152 px
2. Upload those favicon png files to your host. In the case of the Blogger platform, you simply need to upload those files on any page created via the Pages section of the Blogger dashboard. Blogger users can also follow this page for tutorial regarding any picture(favicon) upload to Blogger.
3. Obtain the URL of both the favicon file you uploaded.
4. Copy the below metatags and paste it below your <head> tag and replace the URL in the code with their respective favicon file which you uploaded earlier.
<link href=’URL of 120×120 favicon file‘ rel=’apple-touch-icon’ sizes=’120×120’/><link href=’URL of 152×152 favicon file‘ rel=’apple-touch-icon’ sizes=’152×152’/>
5. Once you complete all the steps above just need to save your template or theme and open your website in Google Chrome and see the difference. That’s it! You are all done.
Note: This may take some time after completion to come into effect.
Only your trick works
thank you brother , but one problem my old favicon is showing in google search
Don't worry. It will be updated after some time.
Hey thanks. Works well. By the way, I like the logo and look of this website on mobile view.
Hey, thanks for this info. I will try to follow your tips as my favicon isn’t showing on mobile search.