Comme beaucoup de choses en développement web, les touch-icons [1] c’est le bordel.
Des formats différents en fonction des écrans, en fonction des résolutions d’écrans, des versions d’Android en vrac, et des développeurs perdus au milieu.
Bref, voici un petit squelette SPIP basé sur le travail Mathias Bynens.
L’idée est de placer un fichier apple-touch-icon.png dans le dossier squelettes/ de SPIP pour le décliner automatiquement dans toutes les autres versions.
Le fichier ne sera pas agrandi donc il vaut mieux utiliser un fichier de minimum 192px.
Dans certains cas, la gestion automatique n’est pas idéale.
On peut alors placer un fichier apple-touch-icon-VALEURxVALEUR.png pour remplacer celui générer automatiquement.
Par exemple, si je veux remplacer le fichier 72px : apple-touch-icon-72x72.png
- [(#REM)
- Favicon touch icon.
- Voir https://mathiasbynens.be/notes/touch-icons
- Ce fichier va générer les favicons pour un maximum de device.
- Il n'est pas inutile de passer ce squelette dans le filtre supprimer_ligne_vide (https://gist.github.com/phenix-factory/1dc0195bd655a654b9ef)
- ]
- [(#REM)
- Tableau des tailles, en px
- Pour le moment, ils n'ont pas encore pondu autre chose que des icônes carrées. On espère que cela ne change pas.
- ]
- [(#SET{taille_device,
- [(#ARRAY{
- 192,192,
- 180,180,
- 152,152,
- 144,144,
- 120,120,
- 114,114,
- 76,76,
- 72,72,
- 60,60,
- 57,57})]})]
- <BOUCLE_generateur_touch_icone(DATA){source tableau, #GET{taille_device}}>
- [(#REM)
- L'utilisateur fourni un fichier spécifique, on affiche directement
- ]
- [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|oui)
- [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png})">]
- ]
- [(#REM)
- Pas de fichier spécifique, on va créer l’icône si le fichier générique le permet.
- ]
- [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|non
- |et{#CHEMIN{apple-touch-icon.png}|hauteur|>={#VALEUR}|oui}
- |et{#CHEMIN{apple-touch-icon.png}|largeur|>={#VALEUR}|oui})
- [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon.png}|image_reduire{#VALEUR,#VALEUR}|extraire_attribut{src})">]
- ]
- </BOUCLE_generateur_touch_icone>
Un Gist est disponible pour ce code.
