Comment faire et définir une icône de signet iOS Retina-Ready pour un site Web
Les développeurs Web et les propriétaires de sites Web font attention: vous devez définir une icône de marque-page iOS prête pour la rétine. Les icônes des signets s'appellent une icône Apple Touch et ces images personnalisées deviennent l'icône affichée sur l'écran d'accueil des utilisateurs lorsqu'elles mettent en signet un site Web sur un iPad, iPhone ou iPod touch dans iOS ou le panneau des signets de Safari pour OS X. Sans un jeu de fichiers Apple-Touch-icon personnalisé, les utilisateurs obtiendront une vignette ennuyeuse et souvent laide de la page Web elle-même, et sans utiliser une icône rétine, l'icône des signets semblera pixélisée et généralement horrible sur le nouvel iPad écran.
Voici ce que vous devez faire pour créer une rétine parfaite Apple Touch Icon pour n'importe quel site Web en quelques étapes faciles.
1) Créer l'icône du site 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 permet de créer de jolies icônes iOS aussi facilement qu'un clic ou deux. Coller dans un site Web ou un logo d'entreprise et vous êtes plutôt bon à faire. Si vous n'avez pas quelque chose à éditer des fichiers PSD, Photoshop CS6 beta est excellent et gratuit à télécharger et à utiliser jusqu'à ce que la version finale sorte plus tard dans l'année.
2) Enregistrer en tant que PNG et nommez l'icône Retina Website Bookmark
L'icône doit être un PNG, et il doit être nommé l'une des deux choses. Chaque nom de fichier offre une apparence légèrement différente de l'icône affichée sur l'écran d'accueil de l'utilisateur:
- " Apple-touch-icon.png " ajoutera la surbrillance de la surbrillance à l'icône
- " Apple-touch-icon-precomposed.png " affichera l'icône telle qu'elle a été créée à l'origine, sans la surbrillance
Utilisez cette dernière option 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écharger le site Web Bookmark Icône tactile 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. C'est généralement le même emplacement que le fichier d'index principal des sites. Une fois téléchargé, confirmez qu'il est dans le bon emplacement en ouvrant un navigateur Web et en allant à "http://SITEURL.com/apple-touch-icon.png" et en s'assurant qu'il charge.
Voici un exemple d'icône de signet 512 × 512 prêt pour la rétine de OSXDaily.com:
Notez que sans le drapeau -precomposed, 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 en tant que signet.
4) Utiliser un appareil iOS et marquer le site
C'est la partie la plus facile, prenez un appareil iOS (de préférence un iPad 3 pour confirmer l'aspect de la rétine) et ouvrez Safari. Actualisez le site Web sur lequel vous avez chargé l'icône, puis appuyez sur l'icône en forme 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 présent.
En dépit d'être 512 x 512 pixels, l'icône rétine se réduira bien sur les anciens iPhones et non-rétine. Si vous voulez vraiment, vous pouvez utiliser CSS et HTML pour afficher des icônes de différentes tailles pour 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 rétine, il apparaîtra beaucoup mieux sur votre é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 il mérite une autre mention maintenant que l'iPad 3 exige des icônes et des graphiques de résolution nettement plus élevés.
