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.
Où apparaît votre favicon ?
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 :
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.
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.
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.
Simple, lisible à toutes les tailles
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.
fichier PNG ou JPEG
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
Ouvrir l'outil Générateur de Favicon
Sur pngsvg.fr, cliquez sur l'onglet Générateur de favicon dans la navigation principale.
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.
✓ Vos favicons sont prêts !
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)
<!-- 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)
<!-- 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 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
{
"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
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
functions.php de votre thème.
Méthode 2 : Code dans 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.
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
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
✨ 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
<head> de chaque
page
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 gratuitement100% 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.