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

Question

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

Answer 1

hey try this one just go to https://www.favicon-generator.org
and choose your file and click on create favicon.
Now Download the rar file and extract where your project file is and then copy below code
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
now refresh the browser or try in another browser

Answer 2

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.

Answer 3

buddy you are using html 4, why don't you use html 5.
and in href="/" it's not necessary to give full path/link. in your code
just do some minor change. i hope it will help you.
i guess #sarvesh has explain you everything
<link rel="icon" type="image" href="assets/graphics/favicon.png" sizes="16x16">

Answer 4

Since you are using a png file as your high res icon, can you try adding the type attribute, like so:
<link rel="icon" type="image/png" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" sizes="192x192" />
This helps distinguish it as a png file and not a regular favicon.ico file.

Answer 5

Try this in your href :
http://compesh.com/assets/graphics/touch-icon-chrome.png?v=2
You see the "?v=2" for clearing cache directly

Answer 6

Try this:
<link href="https://compesh.com/assets/favigen/favicon-96x96.png" rel="icon" sizes="96x96" />
Works fine on my android phone.
I tested it on
http://helledussen.com/test

Answer 7

I looked into this as well, and a solution I found was to make 4 different sizes and link to them with rel="apple-touch-icon". It has been tested on iPhone, iPad, Android, and Blackberry:
<link rel="apple-touch-icon" sizes="57x57" href="../images/YourIconName57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../images/YourIconName.png" />