(modifié le 19 décembre 2017 à 21:52)

Comme Apple aime faire comme personne, les machines de la marque cherchent à atteindre des images concues pour elles. Ce qui provoque des erreurs 404 avec la ressource que cela consomme et les logs qui se remplissent pour pas grand chose.

Voyons comment régler le problème avec une seule règle en .htaccess.

Plusieurs résolutions

Suivant si l'écran du visiteur est un iPhone, iPad, rétina ou non... c'est à dire suivant la taille et la résolution de l'écran le périphérique va aller chercher une image différente. Si l'image n'existe pas il va se rabattre sur une image moins adaptée, c'est à dire apple-touch-icon.png.

Si ça vous intéresse voici les explications d'Apple sur ce sujet.

La méthode longue

Utilisez un générateur d'icones qui va non seulement fournir les images à la bonne taille et avec le bon nom mais aussi le code (x)html qui va avec :

• Iconifier.net
• Realfavicongenerator.net

Personnellement je considère cette méthode lourde et abusive. Si l'on devait faire ça pour chaque fabricant bonjour l'angoisse.

La méthode radicale

Voici la méthode que je recommande. Générer une image au format 180x180 pixels et enregistrez-là à la racine de votre site sous le nom : apple-touch-icon.png.

Pourquoi 180 pixels ? parce qu'il s'agit de la résolution maximale demandée à par un iDevice actuellement.

Nous allons maintenant servir toutes les autres requêtes "apple" vers notre belle image. Les iDevices la redimensionneront à la volée si la taille ne leur convient pas.

Ajoutez dans votre fichier .htaccess :

<IfModule mod_rewrite.c>
RewriteRule ^apple-touch-icon-(precomposed)?.*\.png apple-touch-icon.png [L]
</IfModule>

Cela prend bien sûr en charge les images du style apple-touch-icon-precomposed.png.

Comme c'est une règle de réécriture rien ne montrera que c'est une redirection (contrairement à RedirectPermanent).

Voici une version plus fine afin d'éviter des matchs non souhaités :

<IfModule mod_rewrite.c>
RewriteRule ^apple-touch-icon-(precomposed|[0-9]{2,4}x[0-9]{2,4})?\.png apple-touch-icon.png [L]
</IfModule>

Conseil : testez votre regex avec regex101 (exemple).

Conclusion

Cela fait un moment que je devais l'appliquer sur BM, alors c'est chose faite. Chers utilisateurs de produits pommés vous devriez avoir une jolie icone 🙂

Simple et efficace.

source