Définir "apple-touch-icon.png" pour personnaliser un site Web iPhone Bookmark FavIcon

Si vous possédez un site Web ou si vous en développez un pour quelqu'un d'autre, vous devez personnaliser l'icône de signet enregistré qui apparaît sur l'écran d'accueil d'un utilisateur iOS. Dans la capture d'écran ci-dessus, vous verrez le favicon personnalisé OSXDaily assis sur l'écran d'un iPhone.

La configuration de l'icône Apple Touch est une bonne idée car, par défaut, iOS n'enregistrera qu'une petite vignette du site. Les petites vignettes sont souvent difficiles à identifier et ne sont généralement pas très belles, alors définissons plutôt votre propre image de favicon.

Comment personnaliser et définir une icône Apple Touch pour un site Web

Créer l'icône, assurez-vous que c'est un carré, celui ici sur OSXDaily.com est 512 × 512 pixels, mais vous pouvez choisir d'autres tailles carrées si vous voulez vraiment - note plus grand est approprié pour les écrans rétine
Enregistrez l'icône de l'écran d'accueil en tant que fichier PNG et nommez-la: apple-touch-icon.png
Déposez apple-touch-icon.png dans le répertoire racine du serveur web, vous pouvez donc y accéder depuis domain.com/apple-touch-icon.png
Testez l'icône du signet de votre site Web d'accueil en visitant le site depuis Safari dans iOS, puis en tapant sur "Ajouter à l'écran d'accueil"
Regardez l'écran d'accueil de l'appareil iOS et vous verrez le signet enregistré avec votre nouvelle icône personnalisée, comme la capture d'écran ci-dessus

Tant que le fichier est correctement nommé et dans le répertoire racine des serveurs Web, Mobile Safari saura quoi en faire. Il n'y aura donc pas d'ajustement supplémentaire nécessaire pour afficher la favicon spécifique à iOS.

Pour référence, voici notre image 'apple-touch-icon.png' personnalisée que nous utilisons pour OSXDaily.com, cette icône exemple de signet est créée et dimensionnée de manière appropriée pour les affichages retina (en savoir plus sur la création d'un signet signet retina ici):

Vous remarquerez que le fichier d'icônes n'a pas la réfraction de la lumière enregistrée sur l'icône, iOS gère cela par lui-même. Vous pouvez utiliser n'importe quelle image que vous voulez, mais je vous recommande de créer un qui capture l'interface utilisateur familière des icônes iOS existantes.

Ce n'est évidemment pas la même chose que d'avoir une application iOS dédiée, mais une bonne expérience utilisateur mobile sur le Web est une bonne idée et elle évite ce qui peut être le prix élevé du développement d'une application iOS.

Et hé, si vous êtes préoccupé par des choses comme ça, vous utilisez probablement Photoshop pour au moins concevoir les icônes à droite? Consultez donc quelques conseils pour accélérer Photoshop pendant que vous y êtes.