Générateur de favicon : Comment créer un favicon à partir d'un PNG

Chaque site web a besoin d’une favicon. C’est la petite icône carrée qui apparaît dans les onglets du navigateur, la barre de favoris, l’historique du navigateur, et sur l’écran d’accueil iOS ou Android lorsqu’un visiteur enregistre un raccourci vers votre site. Elle apparaît également dans les résultats de recherche Google à côté du nom de votre site — un détail qui affecte l’apparence de votre marque pour quiconque vous trouve via la recherche organique. Sans favicon, les navigateurs reviennent à une icône de page vierge générique qui donne l’impression qu’un site même soigné n’est pas terminé. Si vous avez déjà un logo au format PNG, un générateur de favicon le transforme en un fichier favicon.ico fonctionnel en moins d’une minute, sans installation et sans compte requis.

Quelles sont les tailles de favicon dont vous avez réellement besoin ?

Il n’existe pas de taille de favicon universelle unique, car différents contextes tirent différentes résolutions à partir du même ensemble de fichiers. L’ensemble pratique couvre six tailles :

Taille	Format	Cas d’utilisation
16×16	ICO / PNG	Bande d’onglet du navigateur, barre d’adresse
32×32	ICO / PNG	Raccourci de la barre des tâches, onglet sur les écrans haute densité de pixels
48×48	ICO	Raccourci de bureau Windows
180×180	PNG	Icône tactile Apple – écran d’accueil iOS
192×192	PNG	Raccourci de l’écran d’accueil Android via le manifeste web
512×512	PNG	Écran de démarrage Android via le manifeste web

La taille de favicon à partir de laquelle vous commencez compte. Travaillez toujours à partir d’une source carrée de grande taille (512×512 ou plus) afin que toutes les tailles plus petites soient réduites proprement. L’agrandissement à partir d’une miniature de 16×16 crée un flou qu’aucun affûtage ne peut corriger.

Pour la plupart des sites, le fichier ICO gère les couches 16×16, 32×32 et 48×48 dans un seul conteneur. Les tailles 180×180, 192×192 et 512×512 sont des fichiers PNG distincts référencés en HTML ou dans un manifeste web.

ICO vs PNG vs SVG

Les trois formats fonctionnent comme des favicons pour un site web. La bonne réponse est d’en utiliser plus d’un.

ICO est un format conteneur Microsoft qui regroupe plusieurs tailles dans un seul fichier. Placez favicon.ico à la racine de votre domaine et tous les navigateurs — y compris les plus anciens — le trouveront automatiquement sans aucune balise HTML. Un fichier, aucune configuration.

Le format PNG est pris en charge par tous les navigateurs modernes lorsqu’il est déclaré avec une balise <link>. C’est le seul format qui fonctionne pour les icônes tactiles Apple et les icônes de manifeste Android. Le PNG préserve également la transparence totale du canal alpha, de sorte que votre icône s’affiche clairement sur n’importe quelle couleur d’arrière-plan d’onglet.

SVG est un format vectoriel pris en charge par Chrome, Firefox et Edge. Parce qu’il s’adapte à n’importe quelle résolution sans pixellisation, un seul fichier SVG couvre toutes les densités d’affichage. Le SVG prend également en charge les requêtes média prefers-color-scheme intégrées, ce qui permet au favicon de basculer automatiquement entre une version sombre et claire. Safari ne prend pas encore en charge les favicons SVG, donc le SVG ne peut pas remplacer l’ICO — mais c’est un complément solide.

Recommandation pratique : expédiez favicon.ico (contenant 16×16, 32×32, 48×48) en tant que solution de secours, ajoutez un SVG pour les navigateurs modernes et le mode sombre, et incluez un PNG 180×180 pour l’icône tactile Apple. Cette combinaison couvre tous les principaux navigateurs et appareils.

Comment créer un favicon à partir d’un fichier PNG

Les étapes suivantes décrivent comment créer un favicon pour un site Web à l’aide du convertisseur PNG vers ICO sur privateconvert.org. L’outil fonctionne entièrement dans votre navigateur - le fichier ne quitte jamais votre appareil, il n’y a pas de compte à créer et aucun filigrane n’est ajouté à votre sortie.

1. Préparez votre PNG source. Utilisez une image carrée de 512×512 pixels ou plus. Si votre logo est un mot-symbole horizontal, recadrez-le pour ne laisser que le symbole ou la première initiale - les mots-symboles deviennent illisibles à 16 pixels de large. Assurez-vous que le PNG a un arrière-plan transparent si vous voulez que l’icône soit propre sur n’importe quelle couleur d’onglet.

2. Ouvrez le convertisseur. Allez sur privateconvert.org/tools/png-to-ico.

3. Déposez votre PNG sur la page. Pas de bouton de téléchargement à chercher - faites glisser le fichier directement sur la zone de dépôt.

4. Téléchargez le fichier ICO. Le convertisseur génère un favicon.ico contenant les couches standard 16×16, 32×32 et 48×48. Cliquez sur télécharger. Le fichier est prêt à être déployé.

5. Créez les tailles PNG supplémentaires si nécessaire. Pour l’icône tactile Apple, redimensionnez votre PNG source à 180×180. Pour les icônes de manifeste Android, produisez un 192×192 et un 512×512. Tout éditeur d’images ou redimensionneur en ligne fonctionne ; le convertisseur ICO sur privateconvert.org gère le côté ICO.

Quelques conseils avant de convertir :

• Commencez par la version la plus haute résolution de votre logo, pas une miniature compressée.
• Le convertisseur préserve la transparence du canal alpha, de sorte qu’un PNG avec un bord façonné ou transparent reste net dans la sortie ICO.
• Si vous utilisez un environnement de staging en parallèle de la production, utilisez une couleur de fond différente sur le favicon de staging. La différence visuelle instantanée dans l’onglet vous indique d’un coup d’œil dans quel environnement vous vous trouvez.

Comment ajouter un favicon à votre site web (HTML)

Placez favicon.ico dans le répertoire racine de votre domaine. La plupart des navigateurs vérifient votresite.com/favicon.ico automatiquement — aucune balise n’est requise. Pour un contrôle explicite de chaque format et taille, ajoutez les balises suivantes à l’intérieur de votre <head>:

<!-- Retombée ICO — fonctionne dans tous les navigateurs sans autre balisage -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Tailles PNG pour les 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">

<!-- SVG pour les navigateurs modernes + basculement en mode sombre -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Icône tactile Apple pour l'écran d'accueil iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Si vous n’avez qu’un seul fichier et que vous souhaitez la configuration la plus simple possible, la balise ICO unique est le minimum viable :

<link rel="icon" href="/favicon.ico">

Pour la prise en charge de l’écran d’accueil Android et des Progressive Web Apps, ajoutez un manifeste web référençant vos PNG 192×192 et 512×512 :

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Enregistrez le manifeste sous le nom manifest.webmanifest et référencez-le dans <head> :

<link rel="manifest" href="/manifest.webmanifest">

La valeur "purpose": "any maskable" pour l’entrée 512×512 indique à Android d’utiliser une icône de lanceur adaptative qui s’adapte à sa grille d’icônes en forme sans être coupée.

Comment ajouter un favicon dans WordPress, Shopify et Squarespace

Chaque plateforme offre un champ d’interface utilisateur dédié afin que vous n’ayez pas besoin de modifier le code HTML ou de télécharger des fichiers via FTP.

WordPress : Allez dans Apparence > Personnaliser > Identité du site. Cherchez le champ “Icône du site” près du bas. Cliquez sur “Sélectionner une icône de site”, téléchargez votre PNG, puis recadrez si vous y êtes invité. WordPress accepte toute image carrée et gère le redimensionnement. Utilisez au moins 512×512 pour la source. Cliquez sur “Publier” pour enregistrer.

Shopify : Allez dans Boutique en ligne > Thèmes, cliquez sur “Personnaliser” sur votre thème actif, puis ouvrez “Paramètres du thème” (ou la section d’en-tête selon votre thème). Trouvez le champ “Favicon”, cliquez sur “Sélectionner une image” et téléchargez un PNG ou ICO carré. Enregistrez et publiez le thème. L’icône apparaît en quelques minutes.

Squarespace : Allez dans Site Web > Pages, puis cliquez sur “Outils du site Web” en bas de la barre latérale gauche. Sélectionnez “Favicon”. Téléchargez un PNG carré — Squarespace le redimensionne automatiquement. Enregistrez la page.

Dans les trois cas, le processus est le même : produisez un PNG carré net de 512×512 ou plus à l’aide d’un générateur de favicon, puis laissez la plateforme gérer le dimensionnement d’affichage.

Pourquoi votre favicon n’apparaît pas

Un favicon qui fonctionne en développement mais refuse d’apparaître en production — ou disparaît après une mise à jour — remonte généralement à l’une des cinq causes suivantes.

Cache du navigateur. Les favicons sont mis en cache de manière agressive. Actualisez en force avec Ctrl+Maj+R (Windows/Linux) ou Cmd+Maj+R (Mac). Si l’icône n’apparaît toujours pas, videz entièrement le cache du navigateur ou testez dans une fenêtre de navigation privée/incognito. Certains navigateurs exigent de fermer et de rouvrir l’onglet avant que le cache ne soit vidé pour les favicons.

Chemin de fichier incorrect. favicon.ico doit se trouver exactement à la racine de votre domaine — votredomaine.com/favicon.ico, et non votredomaine.com/assets/favicon.ico. Si vous utilisez une balise <link> avec un chemin relatif, vérifiez que le chemin est correctement résolu à partir de la page que vous testez, et non seulement à partir de la page d’accueil.

PNG renommé se faisant passer pour un ICO. Changer l’extension d’un fichier de .png à .ico ne le convertit pas. Le format ICO est un conteneur binaire ; un PNG renommé est toujours un PNG et les navigateurs qui inspectent l’en-tête du fichier l’ignoreront. Faites passer le fichier par un véritable générateur de favicon pour produire un réel ICO.

Incompatibilité HTTPS et HTTP. Les navigateurs bloquent les requêtes de contenu mixte. Si votre site est servi via HTTPS mais que la balise <link> du favicon pointe vers http://, la requête est bloquée silencieusement. Vérifiez que l’URL du favicon utilise https://.

Mise en cache CDN. Si votre site est derrière un CDN (Cloudflare, Fastly, etc.), les nœuds périphériques peuvent servir une version obsolète de favicon.ico même après que vous l’ayez remplacé sur l’origine. Purgez le cache CDN spécifiquement pour l’URL du favicon, ou ajoutez un paramètre de chaîne de requête pour contourner le cache : href="/favicon.ico?v=2".

Questions fréquemment posées

Quelle est la taille minimale d’un favicon ? 16×16 pixels est la plus petite taille que les navigateurs affichent dans les onglets. Cela dit, vous devriez toujours inclure également 32×32 — les écrans haute densité de pixels et les raccourcis de la barre des tâches ont besoin de la version plus grande pour rester nets. Si vous utilisez privateconvert.org/tools/png-to-ico, l’ICO de sortie inclut automatiquement les deux tailles.

Dois-je utiliser PNG ou ICO pour mon favicon ? Utilisez les deux. ICO fonctionne comme une solution de secours universelle que les navigateurs trouvent automatiquement sans aucune balise HTML — c’est ce que les navigateurs recherchent lorsqu’aucune balise <link> n’est présente. PNG fonctionne pour les navigateurs modernes lorsqu’il est déclaré explicitement et est requis pour les icônes tactiles Apple et les icônes de manifeste Android. Les deux formats ont des fonctions différentes et ne sont pas interchangeables.

Un favicon affecte-t-il le SEO ? Non directement — Google n’utilise pas le favicon comme signal de classement. Cependant, il apparaît dans les résultats de recherche Google à côté du nom de votre site dans la SERP. Un favicon propre et reconnaissable renforce la reconnaissance de la marque et peut contribuer au taux de clics. Un favicon manquant ou cassé affiche une icône de globe générique dans les résultats de recherche.

Comment créer un favicon qui change pour le mode sombre ? Utilisez un favicon SVG avec une requête média prefers-color-scheme intégrée :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Référez le SVG à côté de votre favicon ICO de secours :

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

Les navigateurs qui prennent en charge les favicons SVG utilisent la version évolutive qui change de couleur. Safari et les anciens navigateurs reviennent au format ICO.

Qu’est-ce qu’une icône tactile Apple et en ai-je besoin ? L’icône tactile Apple est l’image qu’iOS utilise lorsqu’un visiteur enregistre votre site sur son écran d’accueil. Sans elle, iOS prend soit une capture d’écran de votre page, soit utilise votre favicon habituel, ce qui donne un mauvais rendu à la taille d’affichage de 180×180. Produisez un PNG de 180×180 avec un arrière-plan solide (iOS remplit la transparence avec du blanc et coupe les coins), ajoutez 20 pixels de marge pour que l’illustration dépasse le masque à coins arrondis, et référencez-le :

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

Qu’est-ce qu’une icône masquable ? Le lanceur adaptatif d’Android recadre les icônes en cercle, en goutte d’eau ou en “squircle” (carré adouci) selon l’appareil. Une icône masquable comprend un rembourrage supplémentaire autour de l’illustration — appelé une « zone de sécurité » — afin que l’icône ait l’air intentionnelle après le recadrage plutôt que coupée accidentellement. Ajoutez "purpose": "any maskable" à votre entrée 512×512 dans le manifeste web pour indiquer à Android qu’il peut appliquer le masque adaptatif.

Quelle image fonctionne le mieux comme favicon ? Des formes simples et très contrastées. Une seule lettre, une marque géométrique ou un symbole de logo audacieux reste lisible à 16 pixels. Les illustrations détaillées, les traits fins et les logos complets se transforment en bruit à de petites tailles. Si votre logo ne fonctionne qu’en tant que bloc horizontal, utilisez le favicon comme une opportunité de créer une icône d’application dédiée – juste le symbole, sans le texte. Vous pouvez créer un favicon à partir d’un PNG en quelques secondes sur privateconvert.org/tools/png-to-ico pour tester la façon dont votre œuvre se comporte à de petites tailles avant de vous engager.

---

Prêt à créer votre favicon ? Ouvrez le convertisseur PNG vers ICO sur privateconvert.org — déposez votre PNG, téléchargez l’ICO, et votre favicon est prêt. Pas de compte, pas de filigrane, pas de téléchargement de fichier.