Générateur de favicon en ligne

Générateur Favicon En Ligne Créer Favicon Texte Emoji Favicon Ico Png Télécharger Favicon Personnalisé Gratuit Favicon Canvas Javascript Favicon Multi-Tailles 16 32 64 Favicon Pwa Navigateur Générer Favicon Sans Logiciel Favicon Initiales Logo Intégrer Favicon Html

Créez votre favicon personnalisé depuis un texte ou un emoji. Téléchargez les versions PNG 16, 32, 64, 128 px et le fichier ICO multi-tailles. 100% dans le navigateur, aucune donnée envoyée.

🖼️

Générateur de favicon

⚙️ Paramètres

Texte ou Emoji (1-2 caractères)

Choisir un emoji

⏳ Chargement…

Fond

#4f46e5

Texte

#ffffff

Palettes rapides

Arrondi : 20%

CarréArrondiCercle

Police

Graisse

👁️ Aperçu & Téléchargements

Aperçu 128×128 px

16×16 px

32×32 px

64×64 px

Le fichier .ico contient 3 tailles (16, 32, 64 px) en un seul fichier.

Qu'est-ce qu'un favicon et pourquoi est-il indispensable ?

Le favicon (contraction de favorite icon) est la petite icône affichée dans l'onglet du navigateur, dans la barre d'adresse, dans les marque-pages et sur l'écran d'accueil des appareils mobiles. Apparu avec Internet Explorer 5 en 1999, il est devenu un élément incontournable de l'identité visuelle d'un site web.

Malgré sa taille minuscule, le favicon remplit des rôles importants :

Reconnaissance rapide : l'utilisateur repère votre onglet parmi des dizaines d'autres en un coup d'œil
Identité de marque : renforce la cohérence visuelle de votre présence en ligne
Confiance utilisateur : un site sans favicon paraît moins professionnel, voire suspect
SEO indirect : Google affiche le favicon dans les résultats de recherche sur mobile depuis 2019
PWA & mobile : utilisé comme icône d'application lors de l'ajout à l'écran d'accueil

Historique rapide

En 1999, Microsoft introduit le favicon via une requête automatique vers /favicon.ico à la racine du domaine. Les navigateurs modernes supportent désormais les formats PNG, SVG et ICO, avec des tailles allant jusqu'à 512×512 px pour les icônes PWA. Le standard HTML5 a formalisé la balise <link rel="icon"> permettant de spécifier n'importe quel chemin et format.

Où apparaît le favicon ?

Votre favicon sera affiché dans de nombreux contextes :

Contexte	Taille recommandée	Format
Onglet navigateur	16×16, 32×32	ICO, PNG
Barre d'adresse	16×16	ICO, PNG
Marque-pages	16×16, 32×32	ICO, PNG
Résultats Google (mobile)	48×48 minimum	PNG
Raccourci bureau Windows	32×32, 64×64	ICO
Apple Touch Icon (iOS)	180×180	PNG
PWA / Android	192×192, 512×512	PNG

Formats de favicon : ICO, PNG, SVG — lequel choisir ?

Le format ICO

Le format ICO est le format historique et le plus universel. Sa particularité : il s'agit d'un conteneur pouvant embarquer plusieurs images à différentes résolutions dans un seul fichier. Les navigateurs choisissent automatiquement la taille la plus adaptée au contexte d'affichage.


<link rel="icon" type="image/x-icon" href="/favicon.ico">


<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">

Les ICO modernes (générés par cet outil) embarquent des données PNG en lieu et place des anciens BMP, réduisant considérablement la taille du fichier tout en conservant la transparence alpha.

Le format PNG

Les favicons PNG offrent une meilleure qualité visuelle, notamment pour les logos complexes, grâce à la compression sans perte et au canal alpha (transparence). Depuis HTML5, un PNG peut être déclaré directement via la balise <link>.

<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">

Le format SVG

Le SVG est le format vectoriel, donc infiniment scalable sans perte de qualité. Il est supporté par Firefox (depuis v41), Chrome (depuis v80) et Edge (Chromium). Il ne l'est pas par Safari ni Internet Explorer. Il peut même s'adapter au mode sombre via une media query CSS intégrée dans le SVG.

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

/* favicon.svg — adaptatif dark mode */
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #818cf8; }
    }
  </style>
  <circle cx="50" cy="50" r="50"/>
  <text x="50" y="68" text-anchor="middle" font-size="55" fill="white">AF</text>
</svg>

Stratégie recommandée en 2025

La meilleure approche combine les formats pour une couverture maximale :

<!-- 1. ICO pour les vieux navigateurs (fallback automatique) -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- 2. SVG pour les navigateurs modernes (priorité haute) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- 3. Apple Touch Icon pour iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Intégrer votre favicon dans HTML

Une fois vos fichiers générés et déposés à la racine de votre projet, déclarez-les dans le <head> de chaque page. Voici une configuration complète et moderne :

Déclaration HTML complète

<!-- Dans <head> -->

<!-- Favicon ICO (16+32+64px intégrés) -->
<link rel="icon" href="/favicon.ico">

<!-- PNG pour navigateurs modernes -->
<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="icon" type="image/png" sizes="64x64"  href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest (PWA) -->
<link rel="manifest" href="/site.webmanifest">

Emplacement des fichiers

Les navigateurs cherchent automatiquement /favicon.ico à la racine du domaine même sans déclaration HTML — placez-y toujours un fichier ICO valide. Les autres formats peuvent être dans n'importe quel dossier, tant qu'ils sont correctement référencés dans le <head>.

projet/
├── favicon.ico           ← Racine du domaine (obligatoire)
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-64x64.png
├── favicon-128x128.png
├── apple-touch-icon.png  ← 180×180 pour iOS
└── site.webmanifest

Vider le cache du navigateur

Les favicons sont agressivement mis en cache par les navigateurs. Après un changement, forcez le rechargement avec Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (macOS), ou videz le cache depuis les outils développeur.

Astuce : Pour éviter les problèmes de cache en production, ajoutez un paramètre de version : href="/favicon.ico?v=2". Les navigateurs le traitent comme une nouvelle URL et rechargent l'icône.

Favicon pour PWA et applications mobiles

Si votre site est une Progressive Web App (PWA) ou peut être ajouté à l'écran d'accueil sur mobile, des tailles supplémentaires sont nécessaires. Le fichier site.webmanifest centralise la déclaration des icônes.

Fichier site.webmanifest

{
  "name": "Mon Application",
  "short_name": "MonApp",
  "description": "Description de l'application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/favicon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/favicon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Icône Apple Touch (iOS/iPadOS)

Safari sur iOS/iPadOS utilise l'Apple Touch Icon (180×180 px) lors de l'ajout du site à l'écran d'accueil. Contrairement aux autres plateformes, iOS applique automatiquement un arrondi à l'icône — inutile d'en ajouter un vous-même.

<!-- iOS — arrondi automatique appliqué par le système -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Couleur de la barre de statut iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-capable" content="yes">

Icône maskable pour Android

Android 8+ supporte les adaptive icons (icônes maskables). Elles permettent au launcher d'appliquer n'importe quelle forme (cercle, goutte, carré arrondi…) à votre icône. Le design doit tenir dans une zone centrale de 80% (safe zone) pour éviter que les éléments importants soient rognés.

{
  "src": "/icon-maskable.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Générer un favicon en JavaScript avec l'API Canvas

Cet outil utilise l'API Canvas 2D du navigateur pour dessiner le favicon directement côté client, sans serveur. Voici comment fonctionne le rendu, et comment reproduire la technique dans votre propre code.

Dessiner sur un canvas et exporter en PNG

function drawFavicon(size, text, bgColor, textColor, radiusPct) {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext('2d');

  // Fond avec bords arrondis
  const r = (radiusPct / 100) * (size / 2);
  ctx.beginPath();
  ctx.moveTo(r, 0);
  ctx.arcTo(size, 0,    size, size, r);
  ctx.arcTo(size, size, 0,    size, r);
  ctx.arcTo(0,    size, 0,    0,    r);
  ctx.arcTo(0,    0,    size, 0,    r);
  ctx.closePath();
  ctx.fillStyle = bgColor;
  ctx.fill();

  // Texte centré
  const fontSize = Math.round(size * 0.58);
  ctx.font         = `bold ${fontSize}px system-ui, sans-serif`;
  ctx.fillStyle    = textColor;
  ctx.textAlign    = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text.slice(0, 2), size / 2, size / 2);

  return canvas;
}

// Export PNG
const canvas = drawFavicon(32, 'AF', '#4f46e5', '#ffffff', 20);
const link   = document.createElement('a');
link.download = 'favicon-32x32.png';
link.href     = canvas.toDataURL('image/png');
link.click();

Construire un fichier ICO en JavaScript pur

Le format ICO est un conteneur binaire. Les ICO modernes embarquent des données PNG, ce qui simplifie grandement la construction via ArrayBuffer et DataView :

function buildICO(pngBytesList, sizes) {
  const count  = sizes.length;
  const dirSz  = 6 + count * 16; // header + entries

  // Calcul des offsets
  const offsets = [];
  let offset = dirSz;
  pngBytesList.forEach(b => { offsets.push(offset); offset += b.length; });

  const buf  = new ArrayBuffer(offset);
  const view = new DataView(buf);
  let pos    = 0;

  // En-tête ICONDIR
  view.setUint16(pos, 0, true); pos += 2; // reserved
  view.setUint16(pos, 1, true); pos += 2; // type = icon
  view.setUint16(pos, count, true); pos += 2;

  // Entrées ICONDIRENTRY
  sizes.forEach((s, i) => {
    view.setUint8(pos++, s >= 256 ? 0 : s); // width
    view.setUint8(pos++, s >= 256 ? 0 : s); // height
    view.setUint8(pos++, 0); view.setUint8(pos++, 0); // color, reserved
    view.setUint16(pos, 1, true);  pos += 2; // planes
    view.setUint16(pos, 32, true); pos += 2; // bit count
    view.setUint32(pos, pngBytesList[i].length, true); pos += 4;
    view.setUint32(pos, offsets[i], true);             pos += 4;
  });

  // Données PNG
  const u8 = new Uint8Array(buf);
  pngBytesList.forEach((bytes, i) => u8.set(bytes, offsets[i]));
  return buf;
}

// Usage
const blob = new Blob([buildICO(pngBytesList, [16, 32, 64])], { type: 'image/x-icon' });
const url  = URL.createObjectURL(blob);
const link = document.createElement('a');
link.download = 'favicon.ico';
link.href = url;
link.click();
URL.revokeObjectURL(url);

Changer le favicon dynamiquement en JavaScript

Vous pouvez modifier le favicon d'une page en temps réel — utile pour des indicateurs de notifications ou des états d'application :

// Changer le favicon depuis un canvas
function setFaviconFromCanvas(canvas) {
  let link = document.querySelector("link[rel~='icon']");
  if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
  }
  link.href = canvas.toDataURL('image/png');
}

// Exemple : favicon rouge si une erreur est détectée
function showErrorFavicon() {
  const canvas = drawFavicon(32, '!', '#ef4444', '#ffffff', 50);
  setFaviconFromCanvas(canvas);
}

// Exemple : favicon avec badge de notification
function showNotificationBadge(count) {
  const canvas = drawFavicon(32, String(count), '#f59e0b', '#1a1a1a', 50);
  setFaviconFromCanvas(canvas);
}

Bonnes pratiques favicon en 2025

Règles de design pour un favicon lisible

Simplicité absolue : à 16×16 px, seul un caractère, une lettre ou un pictogramme simple reste lisible
Contraste élevé : ratio de contraste ≥ 4.5:1 entre fond et texte pour la lisibilité dans les onglets sombres
Fond coloré + texte blanc/sombre : évitez les fonds transparents sur les onglets (fond du navigateur variable)
Cohérence avec la marque : utilisez les couleurs primaires de votre identité visuelle
Tester les petites tailles : vérifiez toujours le rendu à 16×16 et 32×32, pas seulement en grand

Checklist de déploiement

✅ favicon.ico présent à la racine du domaine
✅ Balises <link> déclarées dans chaque <head>
✅ apple-touch-icon.png (180×180) pour iOS
✅ site.webmanifest avec icônes 192 et 512 px pour PWA
✅ Testé dans Chrome, Firefox, Safari, Edge
✅ Vérification avec l'outil RealFaviconGenerator Checker
✅ Cache invalidé après mise à jour (paramètre ?v=)

Erreurs courantes à éviter

Erreur	Impact	Solution
Favicon uniquement en 16×16	Flou sur écrans Retina, mauvaise qualité Google	Fournir 16, 32, 64 minimum
Logo complexe comme favicon	Illisible à 16px	Créer une version simplifiée (initiales, symbole)
Fond transparent sur PNG	Invisible sur fond blanc (mode clair)	Ajouter un fond coloré ou un contour
Oublier l'Apple Touch Icon	Icône générique sur iPhone/iPad	Ajouter `apple-touch-icon.png` 180×180
Cache non invalidé	Ancienne icône affichée des semaines	Ajouter `?v=X` au href

FAQ — Générateur de favicon

Mes données sont-elles envoyées à un serveur ?

Non, à 100%. La génération s'effectue entièrement dans votre navigateur via l'API Canvas JavaScript. Aucune donnée n'est transmise à un serveur externe.

Quelle est la différence entre ICO et PNG pour un favicon ?

Le fichier ICO est un conteneur multi-résolutions (un seul fichier pour 16, 32 et 64 px) — idéal pour la compatibilité maximale. Le PNG offre une meilleure qualité et est préférable pour les tailles supérieures (128px et plus) et les navigateurs modernes.

Mon favicon ne s'affiche pas après mise à jour, que faire ?

Les favicons sont fortement mis en cache. Forcez le rechargement avec Ctrl+Shift+R, ou ajoutez un paramètre de version à votre URL : href="/favicon.ico?v=2". En production, videz aussi le cache CDN si applicable.

Puis-je utiliser un emoji directement comme favicon ?

Oui, et c'est très tendance ! Cet outil supporte les emoji directement. Vous pouvez aussi utiliser un emoji via CSS dans votre SVG favicon :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">⚡</text>
</svg>

Quelle taille de favicon est lue par Google pour les résultats mobiles ?

Google demande une image d'au moins 48×48 px pour afficher le favicon dans les résultats de recherche mobiles. Elle doit être accessible publiquement (pas de blocage Googlebot dans robots.txt). Utilisez les PNG 64 ou 128 px générés par cet outil.

Comment générer les tailles 192×192 et 512×512 pour PWA ?

Cet outil génère jusqu'à 128×128 px. Pour les grandes tailles PWA (192, 512 px), partez du PNG 128 px téléchargé et redimensionnez-le avec un outil image en conservant le ratio — la qualité canvas reste identique à toutes les tailles. Un outil comme Squoosh permet de redimensionner et optimiser gratuitement en ligne.

Le format SVG est-il supporté partout ?

Firefox, Chrome et Edge supportent les favicons SVG. Safari (desktop et mobile) ne supporte pas le SVG favicon. C'est pourquoi il est recommandé de toujours fournir un ICO ou PNG en fallback via la balise <link rel="icon"> avant la déclaration SVG.

Conclusion

Le favicon est un détail qui fait toute la différence dans la perception de professionnalisme de votre site. Avec cet outil, vous pouvez créer en quelques secondes un favicon personnalisé depuis un texte ou un emoji, l'exporter aux formats PNG multi-tailles et ICO, puis l'intégrer directement dans votre projet.

Pour une couverture optimale : placez favicon.ico à la racine de votre domaine, déclarez les PNG dans le <head>, ajoutez un apple-touch-icon.png (180×180) pour iOS et un site.webmanifest pour les PWA. Une stratégie en 3 fichiers suffit pour 99% des cas d'usage.