Créer une favicon.ico depuis un PNG
Transformez votre PNG en vrai fichier ICO multi-tailles pour votre site.
L’importance du format ICO pour les favicons
Une favicon est l’icône minuscule à côté de votre URL dans la barre d’adresse. Les navigateurs la cherchent au chemin /favicon.ico sur votre domaine. Un PNG simple ne suffit pas : il faut un fichier ICO qui contient plusieurs résolutions.
Un seul fichier ICO peut intégrer 16×16, 32×32, 48×48 et 64×64 pixels. Le navigateur choisit la meilleure version selon l’endroit où il a besoin d’afficher votre icône. PNG n’existe qu’en une taille à la fois.
Les tailles d’ICO qui comptent vraiment
- 16×16 : l’onglet du navigateur (l’usage le plus visible)
- 32×32 : la barre d’adresse, les signets, la liste d’onglets
- 48×48 : le raccourci bureau si l’utilisateur épingle votre site
- 64×64 : les tuiles Windows 10/11 (pas garanti, mais plus propre si présent)
Concepts clés
- Favicons en PNG vs ICO — Un PNG simple affiche bien sur quelques navigateurs modernes, mais les vieux explorateurs et Windows refusent PNG pour les favicons. L’ICO est l’assurance universelle.
- Changement de favicon — Même si votre ICO change, beaucoup de navigateurs le gardent en cache pendant des semaines. Les utilisateurs verront l’ancien favicon longtemps. Patience.
- Apple et iOS — Apple ignore favicon.ico et cherche apple-touch-icon-precomposed.png à la racine. Pour iOS, créez aussi ce fichier PNG de 180×180 pixels en parallèle.
Comment installer le favicon.ico
Après conversion, téléchargez votre favicon.ico. Placez-le à la racine de votre serveur web : /httpdocs/, /public_html/, ou /www/. Les navigateurs le cherchent d’abord là.
Optionnellement, ajoutez une ligne dans le <head> de votre HTML : <link rel="icon" href="/favicon.ico">. Cela force le navigateur à utiliser votre favicon précis et élimine les délais de recherche automatique de 20 à 30 secondes.
Questions sur la création de favicon en ICO
Mon PNG est très grand (2000×2000), comment il devient 16×16 ?
Le redimensionnement dégénère vite. À 16×16, chaque détail du PNG d’origine disparaît. Mieux vaut partir d’une source simplifiée : un logo épais, une silhouette claire, pas une photo détaillée.
Je n’ai qu’un PNG 32×32, pas un 2000×2000. C’est un problème ?
Non, ICO peut upscaler facilement. De 32 vers 64, c’est acceptable. De 32 vers 16, ça peut être mou. L’outil adaptea vos ressources au mieux.
Y a-t-il une différence entre .ico et .png comme favicon modernes ?
Les navigateurs récents acceptent PNG direct. .ico reste plus universel sur Windows et IE. Sur mobile, ni l’un ni l’autre ne compte vraiment : c’est apple-touch-icon.png qui prime.
Combien de temps avant que le nouveau favicon s’affiche ?
Quand vous actualisez votre page, le navigateur cherche le nouveau favicon. Mais il cache aussi agressivement les anciens. Pour forcer, utilisez un paramètre de cache : <link rel="icon" href="/favicon.ico?v=2">.
Mon PNG a un fond transparent. Comment ICO le gère-t-il ?
L’ICO préserve la transparence de votre PNG. Sur un fond blanc de navigateur, les pixels transparents se montreront blancs. Sur certains onglets gris, ils paraîtront gris. Testez sur plusieurs fonds.