Générateur de favicon

Qu’est-ce qu’un favicon et pourquoi un seul ICO ne suffit-il plus ?

Le favicon — abréviation de « favorite icon » — est la petite image affichée par chaque onglet de navigateur, entrée de favoris et résultat de recherche à côté du titre. Introduit en 1999 par Internet Explorer 5 sous forme d’ICO 16×16 px à la racine du site, il a longtemps été une image unique pour toutes les plateformes.

Avec l’essor des écrans Retina, des systèmes mobiles, des Progressive Web Apps et de la visibilité permanente des onglets, le tableau a changé. Aujourd’hui, un site entièrement compatible a besoin d’au moins cinq à sept tailles d’image différentes, plus un Web App Manifest, pour servir correctement toutes les cibles :

• 16×16 / 32×32 — onglets classiques, empaquetés dans favicon.ico
• 48×48 — épinglage de site sous Windows
• 96×96 — taille de favicon Chrome moderne
• 180×180 — apple-touch-icon iOS (depuis iOS 7)
• 192×192 / 512×512 — icône Android Home Screen et manifest PWA

Cet outil génère le set complet depuis un seul modèle — en local dans le navigateur, sans serveur, sans téléversement.

Vue d’ensemble du pipeline — que se passe-t-il dans le navigateur ?

Logo (PNG / JPG / SVG)
    ↓
[1] Décodage ImageBitmap      ─→ lecture de la taille native
    ↓
[2] Rasterisation Canvas       ─→ 7 tailles (16/32/48/96/180/192/512)
                                  avec clip de masque optionnel pour 192/512
    ↓
[3] Encodage PNG par couche    ─→ canvas.toBlob('image/png')
    ↓
[4] Encodeur ICO maison        ─→ 16/32/48 → favicon.ico (PNG-in-ICO, Vista+)
    ↓
[5] Quantizer median-cut       ─→ theme-color light + dark
    ↓
[6] site.webmanifest           ─→ JSON.stringify avec tableau d'icônes
    ↓
[7] Snippet HTML               ─→ balises <link> et <meta>
    ↓
[8] client-zip                 ─→ tout dans un ZIP

Toutes les étapes tournent dans un onglet de navigateur. L’encodeur ICO est un module TypeScript embarqué de 2 ko — il écrit directement dans un ArrayBuffer et empaquette les couches PNG au format ICO standard avec en-tête correct (00 00 01 00), table ICONDIRENTRY et calcul d’offset.

Maskable safe zone — qu’est-ce et pourquoi c’est important ?

Une icône Android Launcher classique est un carré : 192×192 ou 512×512 px avec contenu jusqu’aux bords. Depuis Android Oreo (2017), cependant, chaque OS applique son propre masque sur l’icône — Pixel 9 affiche des cercles, les Samsung des squircles, les anciens Pixel des teardrops. Qui livre une icône carrée voit sur certains appareils des bords blancs, sur d’autres des logos rognés.

La solution est le format Maskable Icon, inscrit dans la spec du manifest PWA depuis 2019. Il définit une safe zone de 80 % au centre de l’image :

   192px maskable PNG
   ┌─────────────────────┐
   │     mask-zone       │
   │  ┌───────────────┐  │
   │  │               │  │   Cercle intérieur : 80 % du côté
   │  │   safe-zone   │  │   (rayon = taille × 0,4)
   │  │  (toujours    │  │   = à 192 px : rayon 76,8 px
   │  │   visible)    │  │   les pixels ici restent visibles
   │  │               │  │   quel que soit le masque.
   │  └───────────────┘  │
   │     mask-zone       │
   └─────────────────────┘

Ce qui sort de la safe zone peut être rogné sur certains appareils. L’outil affiche le cercle à 80 % dans l’éditeur en direct sous forme de ligne pointillée. Avec les curseurs d’échelle et d’offset, vous positionnez votre logo pour que tous les pixels de marque restent à l’intérieur.

Les quatre formes de masque dans le picker montrent l’apparence de l’icône sur chaque appareil :

• Cercle — Pixel 9, iOS anciens, launchers ronds classiques
• Squircle — iOS 18+ (approximation de superellipse), Samsung One UI 6+
• Rounded Square — Android Material 3, OnePlus, Realme
• Teardrop — Google Pixel avec thème teardrop activé

SVG dark mode — pourquoi et pour quels navigateurs ?

Si votre favicon SVG fonctionne bien comme symbole sombre sur thème clair, il peut devenir difficile à lire sur thème sombre — le fond noir absorbe les chemins foncés. Solution : un seul fichier SVG avec @media (prefers-color-scheme: dark) intégré, qui bascule automatiquement sa couleur de fill.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    path { fill: #0F0F0F; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F5F5F5; }
    }
  </style>
  <path d="…votre logo…" />
</svg>

Compatibilité navigateur du SVG favicon avec media query :

• ✅ Chrome 76+, Edge 79+ — pleinement fonctionnel depuis 2019
• ✅ Firefox 67+ — pleinement fonctionnel
• ⚠️ Safari (toutes versions) — bug WebKit ouvert depuis 2020 (#262971), Safari rend les SVG favicons avec @media comme image statique
• ✅ Mobile Chrome / Firefox — fonctionnel

Nous livrons quand même des favicons PNG classiques pour que Safari ait un fallback propre. En pratique, un utilisateur Safari en dark mode voit donc le fallback PNG 32 px, qui peut être suffisamment neutre selon le design. Pour un support dark mode complet sur Safari, il faudrait aujourd’hui (encore) héberger deux favicons distincts et basculer en JavaScript — nous gardons le scope minimal et livrons la voie single-file SVG qui fonctionne proprement pour trois des quatre navigateurs majeurs.

En quoi ce générateur diffère-t-il des convertisseurs en ligne ?

La plupart des générateurs de favicons gratuits suivent un schéma similaire : téléversement → traitement serveur → lien de téléchargement. Ce modèle a plusieurs inconvénients :

1. Confidentialité — les logos sont des actifs de marque. Un téléversement signifie que votre marque réside au moins temporairement sur une infrastructure tierce. Pour des designs pré-lancement, des logos clients ou des matériaux de branding confidentiels, c’est un vrai problème.
2. Pas d’éditeur Maskable — la plupart des outils en ligne rognent les logos sans aperçu des masques OS. Résultat : apps avec bords blancs sur Pixel, logos rognés sur Samsung.
3. SVG dark mode totalement absent — aucun générateur gratuit ne propose le SVG dark mode single-file. La fonction est standardisée depuis 2019, mais n’est pas arrivée dans les workflows UI.
4. Theme-color manuelle — personne n’extrait la theme-color automatiquement du logo. Les utilisateurs doivent la deviner via un color picker.

Ce générateur fait les quatre points différemment :

• Pure-client — le logo reste dans l’onglet. Visible dans le panneau Réseau : pas de POST, pas de téléversement.
• Éditeur Maskable avec aperçu en direct — le cercle safe zone à 80 % est toujours visible, quatre formes de masque sont commutables.
• SVG dark mode avec @media intégré — un seul fichier SVG pour les deux modes (Chrome, Firefox, Edge).
• Extraction de couleur de marque median-cut — le ton dominant et l’accent atterrissent automatiquement dans les balises meta theme-color.

Quels manques volontaires a le générateur ?

Nous construisons un générateur de favicons, pas un Logo Maker. Volontairement absent :

• Génération de logos par IA — des services comme iconikai ou AutopptAI bâtissent des logos à partir de prompts. Cela relève du flux de design de logo en amont, pas du nôtre.
• Compte / créneaux de sauvegarde / historique de projet — viole notre promesse pure-client. Si vous fermez l’onglet, le résultat est perdu — c’est une feature, pas un bug.
• Microsoft Tile XML (browserconfig.xml) — Edge a supprimé les Live Tiles dans Windows 11, le fichier est obsolète.
• Favicon animé (APNG, SVG-SMIL) — le support navigateur est incohérent et l’usage étroit. Qui a besoin d’animations les héberge soi-même.
• Thèmes de couleur de marque / templates — nous sommes un convertisseur, pas un designer de logo. Les propositions de theme-color sont algorithmiques, pas curatives.

L’outil fait une chose bien et indique clairement où s’arrête le périmètre.

Quels outils liés s’intègrent au workflow favicon ?

Autres outils de l’écosystème kittokit pour le traitement d’image :

• SVG vers PNG — si vous n’avez besoin que de tailles PNG individuelles à partir de votre SVG, pas du set complet.
• Convertisseur de format d’image — PNG vers WebP ou AVIF pour la livraison web ; les deux plus petits que PNG à qualité égale.
• Optimiseur SVG — avant la génération du favicon, nettoyer les chemins SVG et retirer les métadonnées.