Générateur de favicon — favicon.ico et PNG
Outil en ligne qui crée favicon.ico, des icônes PNG multi-tailles, le manifest et le code HTML
Traitement dans le navigateur · aucun envoi de fichier
Un ou deux caractères restent les plus lisibles. 4 au maximum.
Inscrit dans « name » de site.webmanifest.
De quoi s’agit-il ?
Le favicon est la petite icône affichée dans les onglets du navigateur, les favoris et sur l’écran d’accueil. Cet outil transforme un logo, quelques lettres ou un emoji en toutes les tailles nécessaires, et vous fournit les balises HTML et le manifeste d’application web qui vont avec. L’image est traitée uniquement dans votre navigateur.
Mode d’emploi
- Choisissez À partir de. Texte ou emoji vous permet de régler le texte, la police et le fond ; Une image utilise le fichier de votre logo.
- Pour une image, décidez Comment la rendre carrée (recadrer le centre ou ajouter des marges) et activez ou non le Fond transparent. Choisissez une Forme : carré, carré arrondi ou cercle.
- Si vous le souhaitez, remplissez Nom du site, Nom court et Couleur du thème ; ils sont repris dans site.webmanifest et dans le code HTML.
- Vérifiez l’aperçu de chaque taille, puis téléchargez les fichiers un par un ou cliquez sur Tout télécharger (ZIP).
- Déposez les fichiers à la racine de votre site et collez le Code pour le
<head>de votre HTML dans votre page.
Fichiers et règles
| Fichier | Taille | Usage |
|---|---|---|
| favicon.ico | 16, 32, 48 | icône par défaut du navigateur, anciens environnements |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | onglet du navigateur |
| favicon-48x48.png | 48 | raccourci sur le bureau |
| apple-touch-icon.png | 180 | écran d’accueil iOS (carré opaque jusqu’aux bords) |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | Android, PWA |
| android-chrome-maskable-512x512.png (facultatif) | 512 | icône adaptative Android : motif dans la zone de sécurité centrale sur un fond jusqu’aux bords |
- Image maître : un carré de 512 px est dessiné d’abord, et toutes les tailles en sont tirées. Les petites tailles sont obtenues en divisant par deux étape par étape, ce qui garde des contours plus nets qu’une seule grosse réduction.
- Structure ICO : un en-tête de 6 octets, une entrée de répertoire de 16 octets par image, puis les données PNG.
- Mise en place du texte : la largeur du texte reste sous environ 78 % de l’icône et la taille de police sous 72 %.
- Couleur du texte : elle suit le fond pour donner un noir ou un blanc lisible ; vous pouvez toujours la changer.
Exemple de code
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Questions fréquentes
Mon image est-elle envoyée en ligne ?
Non. Le redimensionnement et l’assemblage du fichier ICO se font dans votre navigateur, et les résultats sont seulement téléchargés sur votre appareil.
Quels fichiers sont générés ?
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png et un favicon.ico contenant 16, 32 et 48. Un site.webmanifest et les balises link HTML sont fournis avec, et tout peut être téléchargé dans un seul ZIP.
Que contient favicon.ico ?
Des images de 16, 32 et 48 pixels stockées sous forme de flux PNG dans un conteneur ICO. Cette structure est lue par les navigateurs actuels et par Windows depuis Vista. L’outil écrit lui-même l’en-tête et le répertoire ICO, et ses tests vérifient les octets magiques (00 00 01 00) et le nombre d’entrées.
Que se passe-t-il si l’image n’est pas carrée ?
Un favicon est carré, donc par défaut le plus grand carré centré est recadré. Si le recadrage abîme votre logo, choisissez « Garder l’image entière avec des marges » pour conserver les proportions et laisser l’espace en trop transparent.
Des précautions avec le texte ou les emoji ?
À 16 pixels, seuls un ou deux grands caractères restent lisibles. Les emoji diffèrent d’une plateforme à l’autre, l’icône reprend donc le dessin affiché par votre appareil. Les polices viennent aussi de votre appareil, si bien que certaines lettres peuvent légèrement varier d’un ordinateur à l’autre.
Où placer les fichiers ?
Déposez-les à la racine de votre site et collez les balises link dans le head de votre HTML. S’ils sont dans un autre dossier, modifiez les chemins dans le code. Les navigateurs gardent les favicons en cache longtemps, alors videz le cache si une modification n’apparaît pas tout de suite.
