Créer une favicon .ico à partir de votre logo : le guide complet
La favicon est la première chose qu'un visiteur voit avant même d'ouvrir votre page. Voici comment en préparer une correctement à partir de votre logo.
Pourquoi le format .ico reste incontournable
Malgré l'existence de formats plus modernes pour les icônes de site (PNG, SVG), le fichier favicon.ico reste la référence historique reconnue sans exception par tous les navigateurs, y compris les plus anciens. C'est la valeur de repli la plus sûre, même si vous ajoutez également des variantes PNG ou SVG pour les usages plus récents (icônes d'accueil mobile, PWA).
Partir d'un bon visuel source
Une favicon s'affiche à une taille minuscule (souvent 16 à 32 pixels dans l'onglet du navigateur). Un logo trop détaillé ou trop chargé devient illisible à cette échelle. Les meilleurs résultats viennent en général d'un visuel simple, carré, à fort contraste :
- Partez d'une image carrée, idéalement 512×512 pixels ou plus, pour garder de la marge à la réduction.
- Simplifiez si besoin : un monogramme ou un symbole isolé fonctionne mieux qu'un logo complet avec texte à cette taille d'affichage.
- Un fond transparent (PNG) laisse la favicon s'adapter aux thèmes clair et sombre du navigateur.
La conversion
Déposez votre logo au format PNG (ou JPG) sur le convertisseur PNG vers ICO de ce site : l'image est automatiquement réduite à 256 pixels maximum, la taille standard utilisée pour les favicons et icônes d'application, en conservant la transparence si votre PNG en contient une.
Installer le fichier obtenu
Deux options, à combiner idéalement :
- Déposez le fichier à la racine de votre site sous le nom
favicon.ico: la plupart des navigateurs le détectent automatiquement à cet emplacement, sans configuration supplémentaire. - Référencez-le explicitement dans le
<head>de vos pages avec<link rel="icon" href="/favicon.ico">, pour un contrôle plus fiable sur tous les navigateurs.
Pour une compatibilité optimale avec les appareils Apple et Android, complétez votre favicon.ico par des variantes PNG dédiées (apple-touch-icon, icônes Android Chrome) : la favicon .ico couvre l'essentiel, ces variantes couvrent les cas particuliers.