Search code examples
htmlgoogle-chromefavicon

Website icon (rel=icon) not appearing in chrome for android

I have this code on every page of my website.

<link rel="icon" sizes="192x192" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" />

Yet when I go to my website on Chrome for Android and tap "Add to home screen" my icon never shows up in the dialog. My image is of the correct size and exists.

What is going on?

I have used this documentation from Google.

Update

My website is http://compesh.com Look at the page source and see if I've made any mistakes.

It works in Firefox for Android but not Chrome for Android and Chrome for Windows. I see this in Firefox WebIDE

broken website image in firefox webide

2nd Update Firefox for Windows is not showing my favicon image in the tab. Instead it is showing the wrong image and scaling it down to 16x16 pixels, instead of using my 16x16 favicon I specified in my web page.

Solution

  • You have placed below div (maybe mistakenly)

    <div style="display: none;">

    tag right after

    <meta name="viewport" content="width=610">

    in your head tag, that's why browser is closing your head tag before that div and favicon not showing. Remove that div from your head and everything will be fine.