CODEWITHSUNDEEP
htmladditionfaviconbookmarks
leonylyner
leonylyner

Reputation: 117

Website Favicon works normal but not in Chrome Bookmark

My website's favicon works perfectly fine when I access individual pages.

But when I bookmark it, only the root (xxx.com) shows the favicon. Other pages (i.e. xxx.com/anypage.html) don't show.

My website is: http://iogames.ga

There is a bookmark button for drag and drag, the file after dropped in Google Chrome Bookmark doesn't show the favicon.

What should I do to fix it? Thanks a lot!!! :)

Upvotes: 3

Views: 522

Answers (2)

mlegg
mlegg

Reputation: 832

I love this https://realfavicongenerator.net/ Once you upload a 260px X 260 px image the site creates all the various favicons and code. Then on tablets and moobile devices when you save the bookmark it looks like an app icon on your device example https://realfavicongenerator.net/favicon_checker?site=http%3A%2F%2Fnationalkitchencabinets.com%2F&ignore_root_issues=on#.V0yL-77PSSo

The page will give you code like this to post in the '' top section of your page. Then place ALL the icons it gives you into the root of the website.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Upvotes: 4

SG_Rowin
SG_Rowin

Reputation: 622

Try to using absolute path instead:

<link rel="shortcut icon" href="http://iogames.ga/favicon.ico" />

Upvotes: 1

Related Questions