Les développeurs Web et les propriétaires de sites Web font attention : vous devez définir une icône de signet iOS prête pour la rétine. Les icônes de signet sont appelées une icône Apple Touch, et ces images personnalisées deviennent l'icône qui s'affiche sur l'écran d'accueil des utilisateurs lorsqu'ils marquent un site Web sur un iPad, iPhone ou iPod touch sous iOS, ou le panneau des signets de Safari pour OS X.Sans un ensemble de fichiers d'icônes tactiles Apple personnalisés, les utilisateurs obtiendront une vignette ennuyeuse et souvent laide de la page Web elle-même, et sans utiliser d'icône prête pour la rétine, l'icône des signets aura l'air pixélisée et généralement horrible sur le nouvel écran de l'iPad.

Voici ce que vous devez faire pour créer une icône Apple Touch parfaite pour n'importe quel site Web en quelques étapes simples.

1) Créer l'icône du site Web iOS Retina-Ready

Utilisez un modèle ou concevez le vôtre. J'ai utilisé le kit d'icônes de rétine bricolage facile mentionné dans un article précédent, c'est un fichier PSD qui rend la conception de belles icônes iOS aussi simple qu'un clic ou deux. Collez un site Web ou un logo d'entreprise et vous êtes à peu près prêt à partir. Si vous n'avez rien pour éditer les fichiers PSD, la version bêta de Photoshop CS6 est excellente et gratuite à télécharger et à utiliser jusqu'à ce que la version finale sorte plus tard dans l'année.

2) Enregistrer au format PNG et nommer l'icône de signet du site Web Retina

L'icône doit être au format PNG, et elle doit être nommée de l'une des deux manières suivantes. Chaque nom de fichier offre une apparence légèrement différente de l'icône telle qu'affichée sur l'écran d'accueil de l'utilisateur :

• "apple-touch-icon.png" ajoutera la bulle de surbrillance à l'icône
• « apple-touch-icon-precomposed.png » affichera l'icône telle qu'elle a été créée à l'origine, sans la superposition de surbrillance

Utilisez cette dernière option précomposée si vous avez créé votre propre surbrillance ou si vous souhaitez que l'icône apparaisse plus plate sans la bulle omniprésente qui apparaît sur la plupart des icônes par défaut d'Apple.

3) Téléchargez l'icône tactile du signet du site Web dans le répertoire Web de base

Utilisez un client SFTP (OS X inclut FTP dans le Finder, et CyberDuck ou Filezilla sont gratuits) pour copier le fichier apple-touch-icon.png dans le répertoire Web racine. Il s'agit généralement du même emplacement que le fichier d'index principal du site. Une fois téléchargé, confirmez qu'il se trouve au bon endroit en ouvrant un navigateur Web et en allant sur "http://SITEURL.com/apple-touch-icon.png" et en vous assurant qu'il se charge.

Voici un exemple d'icône de signet 512×512 prêt pour la rétine d'OSXDaily.com :

Remarquez que sans le drapeau précomposé, l'icône ci-dessus affichera la bulle de surbrillance. Vous pouvez voir la différence entre les deux en comparant l'icône réelle à celle affichée dans les captures d'écran comme signet.

4) Utilisez un appareil iOS et marquez le site

C'est la partie la plus simple, prenez un appareil iOS (de préférence un iPad 3 pour confirmer l'aspect rétine) et ouvrez Safari.Actualisez le site Web sur lequel vous avez téléchargé l'icône, puis appuyez sur l'icône de flèche et sélectionnez "Ajouter à l'écran d'accueil", nommez le signet, puis revenez à l'écran d'accueil pour confirmer qu'il est là.

Même si elle mesure 512 x 512 pixels, l'icône de la rétine se réduira correctement sur les anciens iPhones et les appareils sans rétine. Si vous le souhaitez vraiment, vous pouvez utiliser CSS et HTML pour afficher des icônes de différentes tailles sur différents appareils, mais ce n'est vraiment pas nécessaire.

Maintenant, si quelqu'un marque votre site Web sur un iPad avec un écran Retina, il sera beaucoup mieux sur son écran d'accueil. C'est vraiment tout ce qu'il y a à faire. Et oui, nous avons déjà écrit sur l'icône tactile d'Apple, mais cela mérite une autre mention maintenant que l'iPad 3 exige des icônes et des graphiques de résolution nettement supérieure.