Créer une icône « Ajouter à l'écran d'accueil » personnalisée pour votre site web (iPhone)

L'iPhone génère une part majeure du trafic mobile. Quand un visiteur ajoute votre site à son écran d'accueil via Safari (« + » > « Ajouter à l'écran d'accueil »), une icône personnalisée (57×57 px sur anciens modèles, 180×180 px aujourd'hui) est bien plus reconnaissable qu'une miniature automatique de votre page d'accueil.

Matériel nécessaire

• Logiciel de retouche d'image
• Client FTP pour uploader l'icône
• Connaissances HTML de base

Instructions (3 étapes)

1. Créez l'icône carrée. Adaptez votre logo au format carré (ex: 180×180 px pour Retina). Redimensionnez dans votre logiciel graphique. Enregistrez en PNG sous le nom exact : apple-touch-icon.png.
2. Uploadez à la racine du site. Via FTP, placez apple-touch-icon.png à la racine de votre site (ex: https://votresite.com/apple-touch-icon.png).
3. Ajoutez la balise HTML (optionnel mais recommandé). Dans la section <head> de vos pages, insérez :
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
   Cela garantit la reconnaissance même si l'icône n'est pas à la racine ou si vous voulez une icône différente par page.

Note : iOS ajoute automatiquement les reflets et coins arrondis. Ne les ajoutez pas vous-même. Pour les écrans Retina, fournissez aussi apple-touch-icon-180x180.png (iPhone) et apple-touch-icon-167x167.png (iPad Pro).