En regardant mes logs, je me suis aperçu que qu'un user-agent demandait /apple-touch-icon-precomposed.png et /apple-touch-icon.png
Le apple-touch-icon est un petit icône spécifique d'accès au site web utilisé par l'iPhone, l'iPod Touch et l'iPad d'Apple.
L'apple-touch-icon-precomposed sera utilisé comme tel, alors que /apple-touch-icon subira une transformation : arrondis des coins arrondis et effet de brillance.
Donc pour éviter une erreur 404, vous devrez créer 2 png en plus : apple-touch-icon-precomposed.png avec effet et apple-touch-icon.png sans effet.
Soit vous les mettez à la base de votre site, soit vous les mettez dans un autre répertoire et dans ce cas vous devez faire une redirection.
RedirectPermanent /apple-touch-icon.png /images/apple-touch-icon.png ou en url rewriting :
RewriteRule ^apple-touch-icon.png$ /images/apple-touch-icon.png [R=301,L]
Si vous n'êtes pas en mesure de mettre un .htaccess et que vous ne voulez pas d'erreur 404 sur les apple-touch-icon lors mettez les apple-touch-icon à la base de votre site.
La taille de l'apple-touch-icon est de 57 x 57 px pour iPhone et de 114 x 114px pour iPhone 4+ et 72 x 72px pour l'iPad, sur Aple le apple-touch-icon est de 129 x 129px, donc je vous conseille de faire du 129 x 129px si vous ne devez qu'en faire un. Si la taille du /apple-touch-icon diffère c'est dû aux différences de résolution.
Par défaut si aucune balise link est spécifiée, le navigateur cherchera pour les tailles :
- 57 x 57 l'image : apple-touch-icon.png et apple-touch-icon-precomposed.png
- 72 x 72 l'image : apple-touch-icon-72x72.png et apple-touch-icon-72x72-precomposed.png
- 114 x 114 l'image : apple-touch-icon-114x114.png et apple-touch-icon-114x114-precomposed.png
- 129 x 129 l'image : apple-touch-icon-129x129.png et apple-touch-icon-129x129-precomposed.png
Ce qui veux dire que vous pouvez faire des redirections sans mettre de balise link :
RedirectPermanent /apple-touch-icon-72x72-precomposed.png /images/favorie/apple-touch-icon-72x72-precomposed.png
Mais si vous avez fait plusieurs tailles d'apple-touch-icon vous pouvez spécifier au navigateur quelle image prendre.
Pour cela on utilise la balise link dans la balise html head de votre page :
<link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="/image/apple-touch-icon-132.png" />
<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="/image/apple-touch-icon-326.png" />
Si vous voulez cibler les apple-touch-icon-precomposed.png mettre la valeur de rel à apple-touch-icon-precomposed
Il semble mais je ne suis pas en mesure de tester que vous pouvez aussi préciser la taille de l'apple-touch-icon en utilisant l'attribut sizes
<link rel="apple-touch-icon" sizes="72x72" href="/image/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="129x129" href="/image/apple-touch-icon-129.png" />
Template psd pour iOS icône
En savoir plus Le apple-touch-icon est un petit icône spécifique d'accès au site web utilisé par l'iPhone, l'iPod Touch et l'iPad d'Apple.
L'apple-touch-icon-precomposed sera utilisé comme tel, alors que /apple-touch-icon subira une transformation : arrondis des coins arrondis et effet de brillance.
Donc pour éviter une erreur 404, vous devrez créer 2 png en plus : apple-touch-icon-precomposed.png avec effet et apple-touch-icon.png sans effet.
Soit vous les mettez à la base de votre site, soit vous les mettez dans un autre répertoire et dans ce cas vous devez faire une redirection.
Exemple de code :
RedirectPermanent /apple-touch-icon-precomposed.png /images/apple-touch-icon-precomposed.pngRedirectPermanent /apple-touch-icon.png /images/apple-touch-icon.png
Exemple de code :
RewriteRule ^apple-touch-icon-precomposed.png$ /images/apple-touch-icon-precomposed.png [R=301,L]RewriteRule ^apple-touch-icon.png$ /images/apple-touch-icon.png [R=301,L]
Si vous n'êtes pas en mesure de mettre un .htaccess et que vous ne voulez pas d'erreur 404 sur les apple-touch-icon lors mettez les apple-touch-icon à la base de votre site.
La taille de l'apple-touch-icon est de 57 x 57 px pour iPhone et de 114 x 114px pour iPhone 4+ et 72 x 72px pour l'iPad, sur Aple le apple-touch-icon est de 129 x 129px, donc je vous conseille de faire du 129 x 129px si vous ne devez qu'en faire un. Si la taille du /apple-touch-icon diffère c'est dû aux différences de résolution.Par défaut si aucune balise link est spécifiée, le navigateur cherchera pour les tailles :
- 57 x 57 l'image : apple-touch-icon.png et apple-touch-icon-precomposed.png
- 72 x 72 l'image : apple-touch-icon-72x72.png et apple-touch-icon-72x72-precomposed.png
- 114 x 114 l'image : apple-touch-icon-114x114.png et apple-touch-icon-114x114-precomposed.png
- 129 x 129 l'image : apple-touch-icon-129x129.png et apple-touch-icon-129x129-precomposed.png
Ce qui veux dire que vous pouvez faire des redirections sans mettre de balise link :
Exemple de code :
RedirectPermanent /apple-touch-icon-72x72.png /images/favorie/apple-touch-icon-72x72.png RedirectPermanent /apple-touch-icon-72x72-precomposed.png /images/favorie/apple-touch-icon-72x72-precomposed.png
Mais si vous avez fait plusieurs tailles d'apple-touch-icon vous pouvez spécifier au navigateur quelle image prendre.
Pour cela on utilise la balise link dans la balise html head de votre page :
Exemple de code :
<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="/image/apple-touch-icon-163.png" /><link rel="apple-touch-icon" media="screen and (resolution: 132dpi)" href="/image/apple-touch-icon-132.png" />
<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="/image/apple-touch-icon-326.png" />
Si vous voulez cibler les apple-touch-icon-precomposed.png mettre la valeur de rel à apple-touch-icon-precomposed
Il semble mais je ne suis pas en mesure de tester que vous pouvez aussi préciser la taille de l'apple-touch-icon en utilisant l'attribut sizes
Exemple de code :
<link rel="apple-touch-icon" sizes="114x114" href="/image/apple-touch-icon-114.png" /><link rel="apple-touch-icon" sizes="72x72" href="/image/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="129x129" href="/image/apple-touch-icon-129.png" />
Template psd pour iOS icône
: http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
