WebClip icon not working on home screen
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:
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, onlyapple-touch-iconare 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.