0

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">
Tarun
  • 631
  • 7
  • 19
  • (off topic so I use a comment and not the answer I just posted) Why did you add a background manually? RFG shows you the black background issue when designing the icons and lets you add a background in a click. Was there something wrong? – philippe_b Apr 22 '16 at 08:29
  • @philippe_b No, by 'manually' I simply meant 'added using RFG'. – Tarun Apr 22 '16 at 12:12

2 Answers2

1

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 :)

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • Thanks for your answer! I don't mind Chrome using the Apple touch icon for the bookmark. The problem is it is using the Touch icon (which I can identify by the white background), and not `favicon.ico` even for the regular tab icon. Could this be because I have left the `favicon.ico` outside of the folder containing the other icons, and not declared it in the ``? – Tarun Apr 22 '16 at 12:24
  • No, Chrome should take `favicon.ico` even if it is not declared (but present in the root directory of the site). It would be worth running the compatibility test (https://realfavicongenerator.net/favicon_compatibility_test). You only need to run the first shot, "Test01 - Pictures in root directory". – philippe_b Apr 22 '16 at 15:17
0
<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.

MateoGodlike
  • 1
  • 3
  • Thanks for your answer! When I tried adding this `` to the ``, the correct favicon was displayed at first. However, when I refreshed the page, it went back to the white background one again and remained the same on further refreshes. Clearing the cache did not help. – Tarun Apr 22 '16 at 13:35