CODEWITHSUNDEEP
htmliosgoogle-chromefavicon
Tarun
Tarun

Reputation: 651

Which favicon does Chrome use on iOS?

I have used the online tool RealFaviconGenerator to generate the favicons for my website, to support a variety of devices and browsers.

Most of my favicons have a transparent background, except for the apple-touch-icons as iOS adds a black background, which I do not want. So, I have manually added a white background and used that image instead for iOS.

The favicons work well with all the devices I have tested so far, except for Google Chrome on iOS (specifically, an iPad mini 1). What I want is the browser to use one of the icons with a transparent background, like it does on a computer (probably either favicon.ico or favicon.png). However, Chrome is instead using one of the apple-touch-icons, which has a white background.

My question is: Is this behaviour normal for Chrome on all iOS devices, or am I doing something wrong?

Additional Information:

I am not sure if this is relevant, but I am adding it anyway.

In order to make it easier to organise the favicon images, I put them all in a separate folder (instead of the root directory). However, I left the favicon.ico and browserconfig.xml files in the root folder, and removed the explicit links as the FAQ of the generator recommends so:

When your favicon is in the root directory, RealFaviconGenerator does not generate this code. This is because it somehow confuses some other browsers like Chrome. And since IE looks for a file named favicon.ico anyway, the best solution is to not even talk about it.

By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.

Any help will be gladly accepted!

UPDATE:

This is what I have in my <head> now. Notice that I have also added the favicon.ico as a <link>. When I tried using this, it seemed to work fine at first, with iOS Chrome displaying the correct favicon. However, when I refreshed the page once, the favicon went back to the earlier white background one and remained the same.

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

Upvotes: 1

Views: 3988

Answers (2)

philippe_b
philippe_b

Reputation: 41446

What you observe is normal, even if that's not what you want: iOS Chrome takes the Apple Touch icon for bookmark and favicon.ico for the regular tab icon. On an iPad Mini, it takes the 57x57 Touch icon and the embedded 16x16 pic of favicon.ico.

Android Chrome is not that different:

Long story short: there is no workaround. It would worth trying to remove all touch icons to see how iOS Chrome behaves, but this is not something you will do in production.

Oh, and as the author of RealFaviconGenerator, I congratulate you for this excellent choice :)

Upvotes: 1

MateoGodlike
MateoGodlike

Reputation: 1

<link href='/favicon.ico' rel='icon' type='image/x-icon'/>

or

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Have you tried this inside of your <head>? It works fine on my website. I have just tested it on Google Chrome for IOS.

Upvotes: 0

Related Questions