Comment ça marche
L’image ou les lettres sont dessinées sur un canvas à chaque taille demandée par les navigateurs et les téléphones, puis enregistrées en PNG. Les versions 16, 32 et 48 px sont regroupées dans un seul favicon.ico. Tout est créé dans votre navigateur, rien n’est envoyé.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
À quoi sert chaque fichier
- favicon.ico : l’icône classique de l’onglet du navigateur. Tous les navigateurs et Windows la cherchent encore à la racine du site.
- apple-touch-icon.png : l’icône qu’utilisent l’iPhone et l’iPad quand on ajoute votre site à l’écran d’accueil. Elle a toujours un fond plein.
- icon-192.png, icon-512.png : Android et les applications web installables (PWA) les utilisent via le manifeste.
- site.webmanifest : un petit fichier JSON avec le nom, les couleurs et la liste des icônes de votre site.
Astuces
- Placez tous les fichiers à la racine de votre site, à côté de index.html, et collez le code dans le head de chaque page.
- Les formes simples et épaisses restent lisibles à 16 px ; le texte fin et les traits minces disparaissent.
- Les navigateurs gardent longtemps les favicons en cache. Ouvrez directement l’URL de l’icône ou utilisez une fenêtre privée pour voir le changement.
- La balise theme-color colore la barre du navigateur sur Android avec votre couleur de fond.
Normes et sources
- HTML Standard — link rel="icon" · WHATWG
- Web Application Manifest · W3C
- Configuring Web Applications (apple-touch-icon) · Apple Developer
Dernière révision 15 octobre 2026
Questions fréquentes
De quelles tailles de favicon ai-je besoin ?
Un favicon.ico en 16, 32 et 48 px, un apple-touch-icon de 180 px et des icônes de 192 et 512 px pour Android couvrent les navigateurs et téléphones actuels.
Mon logo est-il envoyé ?
Non. Les icônes sont dessinées et assemblées dans votre navigateur.
Puis-je utiliser un SVG ?
Oui. Les formats SVG, PNG, JPG, WebP et GIF sont acceptés ; une image carrée de 512 px ou plus donne le résultat le plus net.
Pourquoi l’icône Apple n’est-elle pas transparente ?
iOS remplit les zones transparentes en noir : l’icône de 180 px utilise donc toujours votre couleur de fond.
Mon nouveau favicon ne s’affiche pas.
Les navigateurs gardent les favicons longtemps en cache. Ouvrez directement l’adresse de l’icône, videz le cache ou essayez une fenêtre privée.