Générateur de favicon

Un favicon ne se résume plus à un fichier de 16x16 pixels. Les navigateurs lisent favicon.ico pour les onglets et les favoris, iOS cherche un apple-touch-icon.png de 180x180 quand on ajoute le site à l'écran d'accueil, et Android ainsi que les applications web installables lisent des icônes de 192x192 et 512x512 déclarées dans un manifeste. Ce générateur de favicon crée tous ces fichiers à partir d'une seule image source et les regroupe dans un ZIP, avec les balises HTML qui les référencent.

Contenu du pack favicon

Chaque ZIP généré contient neuf fichiers. Les noms suivent les conventions courantes : il suffit en général de les copier à la racine du site.

• favicon.ico : un fichier ICO avec trois images (16x16, 32x32 et 48x48) stockées en PNG compressé. Les anciens navigateurs et les raccourcis Windows choisissent la taille adaptée.
• favicon-16x16.png, favicon-32x32.png, favicon-48x48.png : les mêmes tailles en PNG séparés, utilisées par les balises 16 et 32 px.
• apple-touch-icon.png : 180x180, la taille utilisée par iOS et iPadOS pour les raccourcis d'écran d'accueil.
• android-chrome-192x192.png et android-chrome-512x512.png : les deux tailles déclarées dans le manifeste pour Android et les applications web installables.
• site.webmanifest : un manifeste JSON qui liste les deux icônes Android, avec couleurs de thème et de fond blanches et un affichage standalone.
• favicon-snippet.html : cinq balises <link> (ICO, PNG 32 px, PNG 16 px, Apple Touch icon, manifeste) à coller dans le <head> de vos pages.

Avant la mise en ligne, ouvrez site.webmanifest et remplacez les valeurs génériques de name et short_name par le nom de votre site. Modifiez aussi theme_color si le blanc ne correspond pas à votre charte.

Comment créer un favicon à partir d'une image

1. Déposez une image PNG, JPG, WebP, BMP, TIFF ou AVIF. Un logo carré d'au moins 512x512 pixels donne le meilleur rendu, puisque 512 px est la plus grande taille produite.
2. Choisissez le mode d'ajustement : Contain ou Cover (détails plus bas).
3. Réglez le fond : laissez transparent ou saisissez une couleur hexadécimale comme #FFFFFF.
4. Cliquez sur Generate Favicon Package. Une grille d'aperçu affiche chaque PNG avec ses dimensions et son poids, ainsi que le poids du fichier ICO.
5. Téléchargez le ZIP, décompressez-le à la racine publique du site et collez les balises dans l'en-tête HTML.

Contain ou Cover : quel ajustement choisir

Un favicon est carré, un logo l'est rarement. Le mode d'ajustement décide du sort d'une image rectangulaire.

• Contain (par défaut) : l'image entière est réduite pour tenir dans le carré, puis centrée. Rien n'est coupé ; l'espace restant est rempli par la couleur de fond, ou laissé transparent. À privilégier pour un logotype horizontal ou tout logo dont les bords comptent.
• Cover : l'image est agrandie jusqu'à remplir le carré, puis le centre est conservé. Pas de bandes vides, mais les bords d'une image large ou haute disparaissent. Adapté aux photos, aux avatars ou à un symbole déjà centré sur une zone plus grande.

Le redimensionnement utilise un filtre Lanczos3, qui garde des contours nets quand un grand logo descend à 16 pixels. À cette taille, un symbole simplifié se lit mieux que le logo complet.

Fond transparent ou couleur unie

Un fond transparent permet à l'icône de s'adapter aux onglets clairs comme sombres. Une couleur unie est plus sûre pour l'Apple Touch icon, car iOS ne conserve pas la transparence des icônes d'écran d'accueil et remplit ces zones d'une couleur pleine, généralement noire. Le champ accepte le mot transparent ou une couleur à six chiffres (#RRGGBB) ; la notation courte #FFF est refusée. Le fond s'applique à toutes les tailles du pack. Si vous voulez un favicon transparent et une icône Apple sur fond plein, générez deux fois et prenez dans chaque ZIP les fichiers utiles.

Plusieurs sites d'un coup

Déposez plusieurs images source d'un coup : chacune obtient son propre ZIP nommé d'après le fichier (par exemple logo-favicon-package.zip), le tout regroupé dans un seul favicon-packages.zip. Le même ajustement et le même fond s'appliquent à toutes.

Limites à connaître

• Pas d'entrée SVG : le générateur accepte uniquement des images matricielles. Si votre logo est un SVG, exportez-le d'abord en grand PNG avec le convertisseur SVG vers PNG, puis utilisez ce PNG ici.
• Pas de favicon SVG en sortie : le pack contient uniquement des fichiers ICO et PNG, compris par tous les navigateurs. Les icônes « maskable » et les variantes pour mode sombre ne sont pas générées.
• Une petite source est agrandie : une image de 64x64 étirée en 512x512 sera floue. Partez de la plus grande version disponible de votre logo.
• Pas de recadrage manuel : Cover coupe toujours depuis le centre. Pour cadrer une zone précise, recadrez d'abord l'image avec l'outil de rognage, rotation et retournement.

Par rapport à un logiciel de retouche ou à la ligne de commande

On peut obtenir les mêmes fichiers avec un éditeur d'images en exportant chaque taille à la main, ou avec ImageMagick en enchaînant une commande de redimensionnement par taille puis une commande pour assembler l'ICO. Les deux fonctionnent, mais il reste à écrire le manifeste et les balises HTML. Ici, tout le jeu est produit en une étape avec des noms cohérents.

Votre logo reste sur votre appareil

Le générateur fonctionne entièrement dans l'onglet du navigateur. L'image est décodée, redimensionnée et compressée en ZIP par du code Rust compilé en WebAssembly, sans aucune requête qui transmettrait le fichier à un serveur. C'est utile pour une marque pas encore lancée ou le logo d'un client sous accord de confidentialité. Aucun transfert vers un tiers, ce qui simplifie la conformité RGPD. Vous pouvez le vérifier dans l'onglet Réseau des outils de développement, ou couper la connexion après le chargement de la page.

Questions fréquentes

Quelles tailles de favicon faut-il vraiment ?

Pour la plupart des sites : un favicon.ico contenant 16, 32 et 48 px, un PNG 32x32, une Apple Touch icon de 180x180, et des icônes de 192x192 et 512x512 déclarées dans un manifeste web. C'est exactement le contenu du pack.

Où placer les fichiers du favicon ?

À la racine publique du site, pour que /favicon.ico soit accessible. Les balises utilisent des chemins depuis la racine comme /favicon-32x32.png. Si vous placez les fichiers dans un sous-dossier, adaptez les chemins dans les balises et dans site.webmanifest.

Peut-on créer un favicon à partir d'un PNG transparent ?

Oui. Laissez le fond sur transparent : la transparence est conservée dans l'ICO et dans tous les PNG. Pour l'Apple Touch icon, une couleur unie évite le fond noir qu'iOS applique généralement aux zones transparentes.

Pourquoi mon favicon est-il flou ?

Soit l'image source est plus petite que les tailles produites, soit le logo comporte des détails trop fins pour 16 ou 32 pixels. Utilisez une source d'au moins 512x512 et, pour les petites tailles, une version simplifiée de votre symbole.

Faut-il modifier le manifeste web ?

Oui, c'est recommandé. Il contient des valeurs génériques pour name et short_name et des couleurs blanches. Modifiez-les pour qu'Android affiche le nom de votre site sous l'icône.

Mon logo est-il envoyé quelque part ?

Non. Tout s'exécute localement via WebAssembly. Rien n'est envoyé, stocké ni journalisé sur un serveur.

Pour choisir la couleur de fond à partir de votre charte, l'extracteur de palette de couleurs récupère les valeurs HEX exactes de votre logo existant.