0

I know, this is not a new technique and this question has bee asked a few times in different variations. But none of them (nor googling) could help me fixing my problem.

I'm using the following links:

<link rel="shortcut icon" type="image/x-icon" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon144.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon72.png" />
<link rel="apple-touch-icon-precomposed" href="http://example.com/wp-content/themes/scott-odlo/images/favicon/favicon57.png" />

It's a WordPress theme, so I cannot simply put the icons in the web root. The icons actually do work, for example when I add the site to my iPads favs, I can see the beautiful retina icon.

But when hitting "Add to Home Screen" it does not work and show a black icon instead:

enter image description here

Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107

1 Answers1

2

When iOS cannot find a suitable icon, it generates a miniature of the page as a replacement. Is your page mainly dark? If so, that (partly) explains the black icon.

Your code is correct, yet there are two discrepancies regarding iOS7, which changes the rules:

  • The sizes have changed. For example the 72x72 picture should now be 76x76 since iOS7. Well, iOS7 can cope with the old sizes, so this is not the explanation for what you observe.
  • The precomposed pictures are now deprecated. No more apple-touch-icon-precomposed, only apple-touch-icon are supported. This probably explains why your icon fails on the home screen.

See Apple references for new sizes, expected HTML code, etc.

In order to create the suitable pictures and HTML code, you can use this favicon generator. Full disclosure: I am the author of this site.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • Great generator, thanks! I still don't know the problem with my icons, but now it's working. I really hate windows, but it's cool that you implemented the tiles for W8! Your answer does not really fix my problem, but I'll accept it anyway, because you provided a GREAT workaround :-) – Julian F. Weinert Mar 06 '14 at 11:12
  • Oh, I was really confident about my "no more precomposed icons" point, too bad! But glad the service fixed your issue! – philippe_b Mar 06 '14 at 12:57