Astuce : des icônes de signets iOS compatibles Retina

Anthony Nelzin-Santos |

Si vous avez un site ou un blog, vous savez probablement qu'Apple a prévu un système pour que vous puissiez personnaliser l'icône d'un signet ajouté à l'écran d'accueil d'un appareil iOS. Il suffit pour cela de créer un fichier apple-touch-icon.png placé à la racine de votre site (ou n'importe où ailleurs pour peu que vous utilisiez la balise meta spécifiée dans la documentation).

skitched

A gauche, l'icône du site Apple en 129x129, à droite celle de MacGeneration en 59x59.

Par défaut, ces icônes avaient une résolution de 59x59 pixels, ce qui est un peu juste pour l'écran Retina. Il faut donc désormais utiliser des icônes au format PNG de 129x129 pixels pour un affichage correct sur l'iPhone 4.

Tags
#iPhone 4 #Retina Display #Trucs et Astuces
avatar iQuest | 
Aaah c'est une bonne Info ça ! Je me posais justement la question.... C'est vrai qu'avec l'écran Retona, les "anciennes" icônes paraissent floues.
avatar drkiriko | 
Merci pour l'info
avatar patman11 | 
pourquoi n'appliquez vous pas cette astuce pour l'icône du site macgénération ? Je n'utilise plus macgé mobile car j'ai l'iphone 4 et l'appli ne marche pas, les articles ne sont pas mis en forme, et la police est trop grande. J'attend par ailleurs une màj !
avatar Ivan Justice | 
@ olive261 : Ah bon ? Moi l'appli MacG Mobile marche nickel sur mon iPhone 4. Par contre un petit bouton type A-/A+ pour grossir les textes ne serait pas de refus, MacG ! En tout cas MERCI à toute l'équipe, vous faites du SUPER BOULOT !
avatar flaket | 
Merci pour l'info mais de mon coté, c'est toujours pixellisé (voir image: http://twitpic.com/2365cn) si quelqu'un s'y connait et veux bien m'aider ce serait gentil de sa part :)
avatar flaket | 
Après plusieurs essais j'ai trouvé ma réponse. Je vous la partage. En fait j'utilise un serveur free et créé mes webapps dans différents dossiers. Ceux ci ne sont pas forcément à la racine du site. Dans la logique, je mettais mon webclip a la racine du dossier concerné mais sur iPhone celui ci apparaissait pixelisé et écrasé (comme sur ma capture d'écran: http://twitpic.com/2365cn). En fait pour que le webclip soit bien en HD il faut vraiment le mettre à la racine sur le serveur. Il est possible de renommé et de faire désormais un lien vers celui-ci via la meta nécessaire et tout fonctionne ;) Voila ! [màj] J'ai tout de même remarqué un bug…lorsque l'on souhaite utiliser la meta "apple-mobile-web-app-capable", le webclip redevient par défaut pixelisé et légèrement écrasé. (voir l'image: http://twitpic.com/236z1w)
avatar yaya | 
Comme le dit art.works, il y a un bug avec les sites utilisant le meta tag "web-capable" ... Car dans ce cas l'icône sera toujours en basse résolution même si on inclut une icône d'une résolution supérieure.
avatar Ivan Justice | 
Heu, j'avais pas vu qu'on pouvait régler la taille de la police des textes dans les préférences de l'appli MacG... Très bien !

CONNEXION UTILISATEUR