Français
Créez des favicons à partir d'une image, d'un texte ou d'un emoji — toutes les tailles et le HTML à coller.
Dernière mise à jour
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
Un *favicon* est la petite icône qui s'affiche dans les onglets de navigateur, les favoris, l'historique et l'écran d'accueil iOS / Android quand quelqu'un sauvegarde votre site. C'est un petit détail qui a un impact étonnamment grand sur le ressenti d'un projet : livrer un vrai favicon, c'est la différence entre un carré placeholder et un produit fini.
Les navigateurs modernes demandent le favicon dans plusieurs tailles et formats différents. Les icônes d'onglet et de favoris attendent un PNG 16×16 ou 32×32. Safari iOS veut un apple-touch-icon.png de 180×180. L'ajout à l'écran d'accueil d'Android veut du 192×192 et du 512×512 dans un manifest web. Les vieux navigateurs et certaines intégrations attendent encore un favicon.ico multi-résolution. Recadrer tout ça à la main, une taille à la fois, c'est beaucoup de boulot — un générateur de favicon le fait en un clic.
Ce générateur tourne entièrement dans votre navigateur. L'image que vous chargez est décodée dans un <canvas> en local, chaque taille de sortie est rendue à côté, et le pack complet (PNG, ICO, manifest web, README et snippet HTML) est emballé dans un .zip sans jamais rien uploader.
favicon.ico est un format conteneur capable d'embarquer plusieurs tailles (16, 32, 48) pour que les anciens appelants trouvent toujours ce dont ils ont besoin.apple-touch-icon.png et les entrées d'un manifest.webmanifest) — les deux doivent être présentes.Utilisez **Texte** pour un monogramme de 1 à 3 caractères, **Emoji** pour une icône à un seul glyphe, ou **Image** pour déposer un PNG, un JPEG ou un SVG. Le mode Image est le meilleur point de départ si vous avez déjà un logo.
Choisissez une couleur de fond (et une couleur de texte pour les monogrammes). Sélectionnez **Carré**, **Arrondi** ou **Cercle** — les carrés arrondis correspondent à la façon dont iOS coupe les icônes de l'écran d'accueil, ce qui donne un rendu natif.
Le nom du site devient la meta tag application-name et le short_name du manifest.webmanifest de la PWA. Utilisez le nom de marque que les utilisateurs verraient dans un favori de navigateur.
Faites défiler la ligne d'aperçu pour confirmer que l'icône reste lisible à 16px et 32px (les tailles d'onglet). Si le design perd en lisibilité à cette taille, simplifiez la source — moins de caractères ou un recadrage plus serré.
Cliquez sur **Télécharger le pack favicon (.zip)** pour récupérer tous les fichiers de sortie d'un coup. Déposez les fichiers à la racine de votre site, puis collez le snippet HTML dans votre <head> — c'est terminé.
Chaque téléchargement contient les fichiers ci-dessous. Le snippet HTML les relie — si vous n'avez besoin que d'une partie, gardez ceux qui correspondent aux plateformes que vous supportez.
| Fichier | Taille | Utilisé par | Notes |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Onglets de navigateur (fallback legacy) | Conteneur ICO multi-résolution — tous les navigateurs demandent encore cette URL. |
favicon-16x16.png | 16×16 | Icône d'onglet de navigateur | Utilisé sur les écrans haute densité via <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Onglet de navigateur + favoris | L'icône d'onglet principale sur les écrans retina. |
favicon-48x48.png | 48×48 | Vignette de site Windows, barre des tâches | Embarqué aussi dans favicon.ico pour les anciens appelants. |
apple-touch-icon.png | 180×180 | Ajout à l'écran d'accueil Safari iOS | iOS utilise une capture d'écran de secours si c'est absent — livrez-le toujours. |
android-chrome-192x192.png | 192×192 | Écran d'accueil Android | Référencé depuis le manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Invite d'installation PWA + splash | Obligatoire pour les PWA installables. |
site.webmanifest | — | Métadonnées d'installation PWA | Liste les icônes, le nom, la couleur du thème. Lié via <link rel="manifest">. |
Tapez 1 à 3 lettres (par ex. **Co**, **C** ou **JS**), choisissez une couleur de marque, et sélectionnez **Arrondi** pour une silhouette qui s'intègre bien à iOS.
Les monogrammes sont les plus lisibles à 16px parce qu'il n'y a aucun détail à perdre. Utilisez une lettre majuscule en gras ou une paire de deux lettres serrée, et gardez un fort contraste entre couleur du texte et du fond.
Choisissez un emoji qui colle à l'ambiance du projet — un truc comme une fusée pour un lancement, un tube à essai pour une expérimentation, des livres pour de la doc. Mettez un fond neutre.
Les favicons emoji ont un ton sympa pour les sites perso, les hackathons et les projets parallèles. N'oubliez pas que le même emoji n'a pas la même tête sur macOS (Apple) et Windows (Segoe) — une fois exporté, le pack fige le rendu macOS / Linux / Chrome que vous voyez dans l'aperçu.
Déposez un PNG ou un SVG de votre logo, augmentez le curseur de **Padding** pour éviter que l'artwork touche les bords, et activez **Remplir avec la couleur de fond** si votre logo a des bords transparents.
Les entrées SVG s'affichent nettement à toutes les tailles. Les entrées PNG fonctionnent aussi mais deviennent floues au-delà de leur résolution native — partez d'une source au moins en 512×512.
apple-touch-icon.png. iOS retombera sur une capture d'écran de la page — généralement moche — si aucune Apple touch icon n'est déclarée.<link rel="icon" href="/images/favicon.ico">. Ça marche, mais les navigateurs continuent de sonder /favicon.ico à la racine du site. Mettez aussi une copie à la racine, ou acceptez les 404 dans vos logs d'accès.favicon.ico multi-résolution (16/32/48), un PNG 32×32, un apple-touch-icon.png 180×180 pour iOS, et des PNG 192×192 et 512×512 déclarés dans un site.webmanifest pour Android et les PWA installables. Le pack téléchargé par cet outil contient tout ça.<link rel="icon" type="image/png">. Ils supportent aussi tous l'URL legacy /favicon.ico. Les favicons SVG sont supportés dans les navigateurs modernes et permettent à un seul fichier de s'afficher net à toutes les tailles — c'est génial si votre logo est déjà vectoriel, mais Safari iOS a quand même besoin du fallback PNG.Cmd/Ctrl + Maj + R), videz les données du site dans les DevTools, ou bumpez une query string sur l'URL du favicon (/favicon.ico?v=2). Un CDN devant votre site demande généralement aussi un purge./apple-touch-icon.png. Le pack l'inclut.<canvas>, et toutes les sorties (PNG, ICO, ZIP, manifest) sont produites en local. Rien ne quitte votre machine.