Si vous avez votre propre 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 iOS d'un utilisateur. Dans la capture d'écran ci-dessus, vous verrez le favicon OSXDaily personnalisé assis sur l'écran d'un iPhone.

Définir l'icône Apple Touch est une bonne idée car, par défaut, iOS enregistre simplement 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 favicon.

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

• Créez l'icône, assurez-vous qu'il s'agit d'un carré, celui ici sur OSXDaily.com est de 512 × 512 pixels, mais vous pouvez choisir d'autres tailles de carrés si vous le souhaitez vraiment. écrans rétine
• Enregistrez l'icône de l'écran d'accueil au format PNG et nommez-la : apple-touch-icon.png
• Déposez apple-touch-icon.png dans le répertoire racine du serveur Web, afin qu'il soit accessible à domain.com/apple-touch-icon.png
• Testez l'icône de signet de l'écran d'accueil de votre site Web en visitant le site depuis Safari dans iOS, puis en appuyant sur "Ajouter à l'écran d'accueil"
• Regardez l'écran d'accueil de l'appareil iOS et vous y 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, de sorte qu'aucun autre ajustement n'est nécessaire pour que le favicon spécifique à iOS s'affiche.

Pour référence, voici notre image personnalisée 'apple-touch-icon.png' que nous utilisons pour OSXDaily.com, cet exemple d'icône de signet est créé et dimensionné de manière appropriée pour les écrans Retina ():

Vous remarquerez que le fichier d'icône réel n'a pas la réfraction de la lumière enregistrée sur l'icône, iOS gère cela lui-même. Vous pouvez utiliser n'importe quelle image que vous voulez, mais je vous recommande d'en créer une 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 expérience utilisateur mobile décente sur le Web est une bonne idée et cela évite ce qui peut être le prix élevé du développement d'une application iOS.

Et, si vous êtes préoccupé par ce genre de choses, vous utilisez probablement Photoshop pour au moins concevoir les icônes, n'est-ce pas ? Alors jetez-y un coup d'œil pendant que vous y êtes.