Guide complet 100% gratuit ⏱ 8 min de lecture Mis à jour : avril 2026

Créer un Favicon Professionnel avec PNGSVG.fr

Un favicon soigné, c'est la première impression que votre site laisse dans les onglets du navigateur, les favoris et l'écran d'accueil mobile. Dans ce guide complet, vous apprendrez à créer un pack favicon professionnel en moins de 60 secondes avec PNGSVG.fr, sans inscription, sans upload serveur, sans frais.

🧩 Qu'est-ce qu'un favicon, et pourquoi c'est important ?

Un favicon (contraction de favorite icon) est la petite icône associée à votre site web. Elle apparaît dans des dizaines d'endroits différents : onglets du navigateur, barre d'adresse, bookmarks, résultats Google, écran d'accueil iOS/Android, et même dans les applications de partage de liens.

💡

Un favicon bien conçu augmente la mémorisation de marque, rassure vos visiteurs sur le sérieux de votre site et améliore l'expérience dans les onglets multiples. C'est un détail visible à chaque session.

Où apparaît votre favicon ?

Mon Site - Accueil

Autre page

https://votre-site.fr

Le favicon apparaît :

Onglet navigateur : visible en permanence, même quand l'onglet est réduit
Barre des favoris : à côté du titre du bookmark
Historique du navigateur : pour reconnaître rapidement un site
Résultats Google : depuis 2019, Google affiche le favicon dans les SERP
Écran d'accueil iOS/Android : via l'Apple Touch Icon (180×180)
Applications PWA : icône d'application sur bureau ou mobile
Partages de liens (Slack, Discord, WhatsApp…)

📐 Les formats requis en 2026

En 2026, un pack favicon complet et compatible avec tous les navigateurs et appareils nécessite plusieurs formats. Voici exactement ce dont vous avez besoin :

16×16

Onglet

32×32

Favoris

48×48

Raccourci Windows

64×64

Favicon.ico

180

180×180

Apple Touch

512

512×512

PWA / Android

ICO

favicon.ico 16×16 + 32×32 multi-résolution Compatibilité max (IE, ancien Chrome)

32px

favicon-32×32.png PNG standard haute définition Chrome, Firefox, Edge modernes

16px

favicon-16×16.png PNG pour petits affichages Onglets compacts, historique

180px

apple-touch-icon.png 180×180 PNG sans transparence Écran d'accueil iPhone/iPad

192px

icon-192.png 192×192 PNG maskable Android Chrome (manifest.json)

512px

icon-512.png 512×512 PNG haute qualité PWA splash screen, stores

SVG

favicon.svg Vectoriel, scalable à l'infini Recommandé : dark mode natif

✅

Le SVG comme favicon principal est désormais supporté par tous les navigateurs modernes (Chrome 80+, Firefox, Edge, Safari 14+). C'est le format le plus léger et le seul qui supporte nativement le dark mode via prefers-color-scheme.

Tableau comparatif des formats

Format	Taille	Qualité zoom	Dark mode	Compatibilité	Poids
.ico	16-64px	Limitée	Non	Universelle	~5 Ko
.png	16-512px	Fixe	Non	Très bonne	2-50 Ko
.svg	∞ scalable	Parfaite	Natif	Moderne (88%+)	< 1 Ko

⚡ Pourquoi choisir PNGSVG.fr

Il existe une dizaine d'outils pour créer des favicons en ligne. Voici pourquoi PNGSVG.fr se distingue, notamment en termes de confidentialité et de workflow.

🔒

100% client-side Vos fichiers ne quittent jamais votre navigateur. Zéro upload serveur.

⚡

Ultra rapide Vectorisation en temps réel, favicon généré en 1 clic.

🆓

Gratuit sans limite Aucun compte, aucune limite d'utilisation, aucun watermark.

🧩

Workflow intégré PNG → SVG → Favicon en 1 seul outil, sans changer de site.

🛡️

Vie privée garantie

Contrairement à d'autres outils, vos logos et images d'entreprise ne transitent jamais par un serveur distant. Traitement 100% local.

🔄

PNG/JPEG → SVG intégré

Vous n'avez pas de SVG ? Pas de problème. Convertissez directement votre PNG en SVG vectorisé avant de générer le favicon, tout dans le même outil.

📦

Pack complet

Tous les formats générés d'un coup : .ico, .png (16, 32, 180, 192, 512px), .svg + le code HTML prêt à copier.

📋 Tutoriel pas-à-pas

Suivez ces étapes pour créer votre pack favicon complet. Le workflow entier prend environ 60 secondes.

Votre logo (PNG)

→

SVG vectorisé

→

Pack favicon complet

→

Code HTML prêt

Préparez votre image source

Idéalement, partez d'un logo à fond transparent (PNG avec alpha). Si vous n'avez qu'un JPEG, PNGSVG.fr le gère aussi, mais le résultat sera meilleur sans arrière-plan.

💡

Conseil : Pour un favicon, votre image doit être lisible à très petite taille (16×16 px). Évitez les designs très détaillés ou les textes. Un symbole ou initiale fonctionne mieux.

✓ Bon favicon

Simple, lisible à toutes les tailles

✗ À éviter

texte long et détail

texte long

illisible

Trop chargé, illisible en petit

Convertir votre PNG en SVG (si nécessaire)

Si vous avez déjà un fichier .svg, passez directement à l'étape 4. Sinon, commencez par l'outil de conversion.

pngsvg.fr - onglet PNG/JPEG → SVG

📁

Cliquez ou glissez votre
fichier PNG ou JPEG

Nombre de couleurs16

464

Aperçu SVG vectorisé

Ajustez le curseur Nombre de couleurs selon votre image. Pour un logo avec 2-3 couleurs, 8 à 16 suffit. Pour une image complexe, montez jusqu'à 32 ou 64.

Cliquez ensuite sur Télécharger SVG, vous obtenez votre logo vectorisé, prêt pour l'étape suivante.

Vérifier et optimiser votre SVG (optionnel mais recommandé)

Avant de générer le favicon, vérifiez que votre SVG est propre. Un bon favicon SVG doit :

Avoir un fond transparent (pas de <rect> blanc en background)
Être centré dans le viewBox (idéalement carré : viewBox="0 0 100 100")
Ne pas contenir de trop de détails fins qui disparaîtront à 16px

⚠️

Si votre SVG comporte du texte, assurez-vous qu'il est converti en chemin (paths) pour éviter les problèmes de police manquante. Dans Figma ou Illustrator : sélectionnez le texte → Contour du texte.

Ouvrir l'outil Générateur de Favicon

Sur pngsvg.fr, cliquez sur l'onglet Générateur de favicon dans la navigation principale.

pngsvg.fr

PNG/JPEG → SVG

Générateur de favicon ← vous êtes ici

SVG → PNG / ICO

📂

Charger votre fichier .svg

Charger votre SVG et télécharger les favicons

Cliquez sur Charger votre SVG et sélectionnez le fichier SVG de votre logo. L'outil génère instantanément tous les formats.

pngsvg.fr - Favicons générés

✓ Vos favicons sont prêts !

16×16 PNG

32×32 PNG

180×180 PNG

🗂️

favicon.ico

Téléchargez chaque format séparément, ou utilisez l'onglet SVG → PNG / ICO pour des exports personnalisés (taille PWA 512px, etc.).

Copier le code HTML fourni

PNGSVG.fr génère automatiquement le code <head> prêt à copier-coller. Rendez-vous à la section suivante pour le code complet et les variantes avancées.

💻 Le code HTML complet à copier

Placez ces balises dans la section <head> de chaque page de votre site (ou dans votre layout principal).

Code minimal (compatible 99% des navigateurs)

HTML

<!-- Favicon de base -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Code complet recommandé (avec SVG et PWA)

HTML

<!-- Favicon SVG (navigateurs modernes, recommandé en priorité) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Fallback ICO (IE, très vieux navigateurs) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG standard -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

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

<!-- PWA Manifest (Android / Progressive Web App) -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

Dark mode - favicon SVG adaptatif

Avec un favicon SVG, vous pouvez afficher une icône différente en mode sombre, sans JavaScript, uniquement avec du CSS dans le SVG.

SVG (favicon.svg)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    /* Light mode : fond blanc, icône sombre */
    .bg { fill: #ffffff; }
    .icon { fill: #1e293b; }

    /* Dark mode : fond sombre, icône claire */
    @media (prefers-color-scheme: dark) {
      .bg   { fill: #1e293b; }
      .icon { fill: #ffffff; }
    }
  </style>
  <!-- Fond -->
  <rect class="bg" width="100" height="100" rx="20"/>
  <!-- Votre icône ici -->
  <text class="icon" x="50" y="70"
    text-anchor="middle" font-size="60" font-family="sans-serif"
    font-weight="bold">V</text>
</svg>

manifest.json pour PWA

JSON (manifest.json)

{
  "name": "Mon Site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#7c3aed",
  "background_color": "#0a0e17",
  "display": "standalone"
}

🚀 Installer le favicon sur votre site

Choisissez votre plateforme ci-dessous pour les instructions spécifiques.

Placez tous les fichiers favicon à la racine de votre site (/)
Copiez le code HTML complet ci-dessus dans le <head> de vos pages
Si vous avez un fichier de layout commun, c'est l'endroit idéal
Videz le cache du navigateur (Ctrl+Shift+R) pour voir les changements

💡

Placez toujours le favicon.ico à la racine (/favicon.ico). Les navigateurs y font une requête automatique même sans balise HTML.

Méthode 1 : Customizer WordPress (recommandée)

Allez dans Apparence → Personnaliser
Cliquez sur Identité du site
Dans Icône du site, uploadez votre PNG 512×512 (WordPress redimensionne automatiquement)
Cliquez sur Publier

⚠️

WordPress ne gère pas nativement le favicon SVG. Pour un support complet (SVG + dark mode), ajoutez le code manuellement via le plugin Insert Headers and Footers ou dans le functions.php de votre thème.

Méthode 2 : Code dans functions.php

PHP (functions.php)

function add_custom_favicon() {
    echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml">';
    echo '<link rel="icon" href="/favicon.ico" sizes="any">';
    echo '<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">';
}
add_action( 'wp_head', 'add_custom_favicon' );

Via le panneau d'administration

Dans votre admin Shopify, allez dans Boutique en ligne → Thèmes
Cliquez sur Personnaliser votre thème actif
Allez dans Paramètres du thème → Logo ou Favicon
Uploadez votre image (PNG 512×512 recommandé)
Sauvegardez

Via le code du thème (SVG + avancé)

Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code
Ouvrez le fichier layout/theme.liquid
Ajoutez le code favicon dans la section <head>
Uploadez vos fichiers dans Assets

Next.js 13+ (App Router)

Placez vos fichiers dans le dossier app/ et Next.js les détecte automatiquement.

Structure de fichiers

app/
├── favicon.ico         ← détecté automatiquement
├── icon.svg            ← favicon SVG
├── icon.png            ← favicon PNG
└── apple-icon.png      ← Apple Touch Icon (180x180)

Next.js via metadata API

TypeScript (app/layout.tsx)

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: [
      { url: '/favicon-180x180.png', sizes: '180x180' },
    ],
  },
  manifest: '/manifest.json',
}

Dans l'éditeur Webflow, ouvrez Page Settings (icône ⚙️ en haut à droite)
Scrollez jusqu'à la section Favicon & App Icon
Uploadez votre PNG 256×256 minimum
Pour ajouter du code custom (SVG, manifest), allez dans Site Settings → Custom Code → Head Code

💡

Webflow génère automatiquement l'Apple Touch Icon à partir de votre upload. Utilisez le Custom Code pour ajouter le favicon SVG et le manifest.json pour PWA.

✨ Bonnes pratiques & astuces avancées

🎯

Priorisez la lisibilité à 16px

Testez toujours votre favicon à 16×16 px réels. Zoomez à 1600% dans votre navigateur pour voir exactement ce que verra l'utilisateur dans l'onglet.

🖼️

Un carré, pas un rectangle

Tous les navigateurs attendent un favicon carré. Si votre logo est rectangulaire, ajoutez des marges ou créez une version "icône" carrée spécifiquement pour le favicon.

🌑

Pensez au dark mode

Un favicon blanc sur fond blanc disparaît. Créez une variante adaptée avec un fond coloré ou utilisez le SVG avec prefers-color-scheme.

🚫

Évitez le texte long

Un logo texte complet devient illisible à 16px. Extrayez juste l'initiale ou le symbole de votre marque pour le favicon.

⚡

Préchargez avec rel="preload"

Pour les sites à performance critique, précédez votre favicon SVG d'un <link rel="preload"> pour l'afficher immédiatement.

🔍

Vérifiez sur Google Search

Utilisez l'outil d'inspection d'URL de la Google Search Console pour vérifier que Google indexe bien votre favicon dans les résultats.

Vider le cache favicon du navigateur

Les navigateurs cachent agressivement les favicons. Après un changement, forcez le rechargement :

Navigateur	Raccourci	Action complémentaire
Chrome	`Ctrl+Shift+R`	Ou ouvrir en onglet incognito
Firefox	`Ctrl+Shift+R`	Effacer les données de cache dans les paramètres
Safari	-	Développer → Vider les caches
Edge	`Ctrl+Shift+R`	Paramètres → Confidentialité → Effacer les données de navigation

Checklist complète avant mise en ligne

✓ favicon.ico présent à la racine

✓ favicon.svg pour navigateurs modernes

✓ apple-touch-icon.png 180×180

✓ manifest.json avec icônes 192 et 512

✓ Code HTML dans le <head> de chaque page

✓ Testé dans un onglet incognito (sans cache)

✓ Lisible en mode sombre ET clair

✓ Vérifié sur mobile (écran d'accueil)

Prêt à créer votre favicon ?

Convertissez votre logo en pack favicon complet en moins d'une minute, gratuitement, sans inscription, directement dans votre navigateur.

⚡ Créer mon favicon gratuitement

100% privé · Aucun upload · Tous formats inclus

❓ FAQ : Questions fréquentes

L'outil Générateur de favicon de PNGSVG.fr prend en entrée un fichier SVG pour générer les meilleures sorties possibles. Si vous n'avez qu'un PNG ou JPEG, commencez par l'outil PNG/JPEG → SVG pour vectoriser votre image, puis utilisez le SVG généré comme source pour le favicon. Tout cela se fait sur le même site, sans rechargement.

Plus votre image source est grande et nette, meilleure sera la vectorisation. Une image de 200×200 px minimum est recommandée. Pour une photo ou un logo complexe, partez d'un fichier d'au moins 500px. La taille maximale recommandée est de 5 Mo pour des performances optimales dans le navigateur.

Les navigateurs cachent les favicons de façon agressive. Essayez dans cet ordre : (1) ouvrir une fenêtre incognito, (2) forcer le rechargement avec Ctrl+Shift+R, (3) vider complètement le cache du navigateur dans les paramètres, (4) attendre quelques heures (le cache DNS peut aussi être en cause pour les nouveaux déploiements).

favicon.ico est le format historique qui contient plusieurs résolutions (16, 32px) dans un seul fichier. Il est compatible avec tous les navigateurs y compris les plus anciens. favicon.svg est vectoriel : il s'adapte à toute résolution, est plus léger, et supporte le dark mode via CSS. En 2026, la bonne pratique est de fournir les deux : SVG en priorité, ICO en fallback.

Non. PNGSVG.fr est un outil 100% client-side : tout le traitement se fait dans votre navigateur, en mémoire locale. Aucun fichier n'est envoyé, stocké ou analysé sur un serveur distant. C'est particulièrement important pour les logos d'entreprise ou les assets confidentiels.

Google affiche les favicons dans les résultats de recherche depuis 2019, à côté du nom de domaine. Bien que ce ne soit pas un facteur de classement direct, un favicon soigné augmente le taux de clic (CTR) car il renforce la reconnaissance de marque et le sentiment de confiance. C'est également un signal de qualité pour les utilisateurs.

L'Apple Touch Icon doit faire 180×180 px en PNG sans transparence (Apple applique ses propres coins arrondis). Il est utilisé quand un utilisateur iPhone/iPad ajoute votre site en raccourci sur l'écran d'accueil. PNGSVG.fr génère automatiquement ce format. Si votre logo a un fond transparent, Apple le remplira en noir. Mieux vaut prévoir un fond de couleur dans votre SVG source.

Oui ! Un favicon SVG peut contenir des animations CSS ou SMIL. Cependant, les animations de favicon sont très discrètes à 16-32px et peuvent être une distraction. Utilisez-les avec parcimonie, elles fonctionnent très bien pour des indicateurs d'état (chargement, notification) plutôt que comme animation permanente.