Comment créer un favicon pour votre site web
Transformez un logo en jeu complet de favicons (favicon.ico, PNG, icône Apple, manifeste web) et sachez où placer les fichiers et quel HTML ajouter.
· 4 min de lecture
Pour créer un favicon, partez d'une image carrée de votre logo, déposez-la dans le générateur de favicon et téléchargez le ZIP : il contient favicon.ico, des icônes PNG en plusieurs tailles, une icône Apple, des icônes Android, un manifeste web et le code HTML à coller dans vos pages.
La méthode rapide
- Préparez une image carrée de votre logo, idéalement de 512 × 512 pixels ou plus.
- Ouvrez le générateur de favicon et déposez l'image (PNG ou SVG de préférence).
- Saisissez le nom de votre site : il sera repris dans le manifeste web.
- Ajoutez si vous le souhaitez une marge de 10 % ou une couleur de fond.
- Cliquez sur Générer les favicons, vérifiez les aperçus et téléchargez le ZIP.
- Déposez les fichiers à la racine de votre site et collez le code HTML dans la balise
<head>de vos pages.
Votre image est traitée dans votre navigateur et n'est pas envoyée en ligne.
Partir de la bonne image
Un favicon s'affiche parfois en 16 × 16 pixels dans un onglet. À cette taille, les détails disparaissent.
- Faites simple. Une lettre, un symbole ou la partie graphique de votre logo rendent mieux que le logo complet avec son texte.
- Visez le carré. Une image rectangulaire est placée à l'intérieur du carré, ce qui laisse des bandes vides et rapetisse l'icône. Recadrez-la d'abord avec Recadrer une image.
- Prévoyez assez grand. 512 × 512 ou plus donne un résultat propre à toutes les tailles. Si vous n'avez qu'une petite image, Redimensionner une image peut en changer les dimensions, mais agrandir n'ajoute pas de netteté : un original plus grand reste préférable.
- Votre logo est en SVG ? Vous pouvez le déposer tel quel. S'il vous faut aussi une copie PNG à une taille précise pour d'autres usages, exportez-la avec SVG en PNG.
Quelles tailles, et pourquoi
Chaque appareil cherche un fichier différent :
| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32 et 48 px dans un seul fichier | Onglets, favoris, anciens navigateurs |
| favicon-16x16.png, favicon-32x32.png | 16 et 32 px | Navigateurs récents |
| apple-touch-icon.png | 180 px | iPhone et iPad, quand le site est ajouté à l'écran d'accueil |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 et 512 px | Écran d'accueil Android et applications web installables, via le manifeste |
| site.webmanifest | — | Indique à Android et aux navigateurs le nom du site, ses icônes et ses couleurs |
Tous ne sont pas indispensables — favicon.ico suffit pour les onglets — mais le jeu complet garantit une icône correcte partout, même sur l'écran d'accueil d'un téléphone.
Où placer les fichiers
Mettez-les à la racine du site, au même niveau que la page d'accueil, pour qu'ils soient accessibles à des adresses comme votresite.fr/favicon.ico. Certains navigateurs vont chercher /favicon.ico d'eux-mêmes, même sans code HTML.
Ajoutez ensuite les balises de lien dans le <head> de chaque page. Le générateur vous fournit le code exact ; il suit le modèle standard :
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Sur un CMS ou un créateur de site, cherchez plutôt un réglage « icône du site » ou « favicon » : beaucoup ne demandent qu'une image et s'occupent du reste.
Problèmes fréquents
L'ancienne icône s'affiche toujours. Les navigateurs gardent les favicons en cache très longtemps. Ouvrez directement l'adresse du favicon, forcez le rechargement de la page ou testez en navigation privée. La mise à jour peut prendre un moment.
L'icône est floue ou trop petite dans l'onglet. L'image de départ contient trop de détails ou de vide. Recadrez plus serré, simplifiez le dessin ou décochez la marge.
L'icône disparaît sur un onglet sombre. Un logo foncé sur fond transparent peut devenir invisible en thème sombre. Ajoutez une couleur de fond ou utilisez une version plus claire.
L'icône Apple apparaît sur fond sombre. iOS n'affiche pas la transparence sur les icônes de l'écran d'accueil : les zones transparentes peuvent devenir noires. Remplissez le fond avec la couleur de votre marque.
Les limites à connaître
- Le générateur crée les images et le manifeste ; il ne les met pas en ligne sur votre site — c'est à vous ou à votre hébergeur de le faire.
- Le même dessin sert pour toutes les tailles. Si vous voulez une version simplifiée en 16 px et une version détaillée en 512 px, créez-les séparément.
- Les moteurs de recherche peuvent mettre du temps à afficher un nouveau favicon dans leurs résultats.