Blogger

[Solved] Favicon Not Showing on Android Google Chrome or Any Mobile Browser

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.
Favicon
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.

Article written by:

Satyendra is a Biotechnologist from the city of Nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, poetry, and basically anything nerdy.

Join the discussion

  1. Anonymous

    Only your trick works

  2. Deepak Patel

    thank you brother , but one problem my old favicon is showing in google search

  3. Satyendra Maurya

    Don't worry. It will be updated after some time.

  4. The Shortcomix Guy

    Hey thanks. Works well. By the way, I like the logo and look of this website on mobile view.

  5. May San Pedro

    Hey, thanks for this info. I will try to follow your tips as my favicon isn’t showing on mobile search.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top