Comment créer un favicon à partir d'un logo (toutes les tailles expliquées)

Pour créer un favicon à partir d'un logo, commencez par un logo carré (SVG, ou un PNG en 512x512 ou plus). Exportez un favicon.ico, idéalement avec les versions 16, 32 et 48px incluses, puis ajoutez une icône Apple de 180x180 et des PNG de 192/512 pour le manifeste, et liez-les dans votre HTML. Cela fait cinq fichiers (ICO, SVG, icône Apple et deux PNG de manifeste), et non une douzaine. Voici comment créer chacun d'eux et où les placer.

La réponse courte : les fichiers favicon dont vous avez besoin

L'ensemble minimal moderne comprend un ICO, un SVG, une icône Apple touch et deux PNG de manifeste. Les fichiers PNG séparés de 16/32/48 et les images de tuiles Microsoft sont inutiles lorsque vous disposez d'un ICO multi-tailles.

De nombreux générateurs vous remettent un ZIP contenant une douzaine de fichiers, dont la plupart ne sont pas demandés par les navigateurs. Un fichier maître en 512x512 suffit largement, vous n'avez donc jamais besoin de fichiers plus grands.

Tailles de favicon expliquées : à quoi sert chacune

favicon.ico (16, 32, 48)

L'ICO est un conteneur qui contient plusieurs bitmaps dans un seul fichier. Le bundle de qualité habituel est 16, 32 et 48px ; ajoutez 256 uniquement si vous tenez aux grandes icônes Windows.

Il reste utile d'en avoir un. Les crawlers, lecteurs de flux et robots d'aperçu de liens récupèrent couramment /favicon.ico à la racine du site par défaut. Chromium se comporte différemment : lors d'un test de requête publié, il n'a récupéré /favicon.ico que lorsque la page ne déclarait aucune icône. Avec un SVG déclaré, il n'a demandé que le SVG, et il a préféré l'ICO aux liens PNG autonomes.

Évitez le PNG autonome 32x32. Certains guides le listent, mais ce test a montré qu'il restait inutilisé lorsqu'un ICO est présent. Le test ne couvrait que Chromium, le comportement de Firefox et Safari n'est donc pas testé.

favicon.svg

Les favicons SVG fonctionnent sous Chrome 80+, Firefox 41+ et Edge. Le support Safari est plus récent et inégal, et les favicons SVG ne fonctionnent pas sous Safari sur iOS. Traitez le SVG comme un complément, jamais comme un remplacement de l'ICO.

apple-touch-icon (180x180)

180x180 est la taille Retina iPhone (60pt à 3x). Un seul fichier de 180px suffit : iOS le met à l'échelle pour les autres appareils, y compris l'iPad.

Icônes du manifeste (192 et 512)

Android Chrome et les applications web installées lisent les icônes depuis le manifeste de l'application web. Le fichier de 192px est l'icône lanceur et celui de 512px est l'icône d'installation/splash.

Ce dont Google Search a besoin

Google lit l'icône depuis votre page d'accueil. Tout format de favicon valide fonctionne, y compris ICO, PNG et SVG. Elle doit être carrée et d'au moins 8x8px. Google recommande une taille supérieure à 48x48, en multiples de 48, et vous obtenez une icône par nom d'hôte. Si l'icône est inadaptée, Google substitue un globe générique.

Préparez votre logo avant l'export

Carré, grand et transparent

La meilleure source est un SVG. Sinon, utilisez un PNG carré en 512x512 ou plus. Ne faites que réduire la taille : passer de 1024px à 16px conserve les détails des bords, passer de 32px à 16px non, et agrandir crée simplement du flou.

Si votre logo n'est pas carré, recadrez-le ou ajoutez des marges avec les outils de recadrage et redimensionnement d'images de Tool Cloud.

Conservez le PNG transparent et en sRGB. Ne le fusionnez pas et n'ajoutez pas d'arrière-plan "au cas où".

Un favicon peut-il être un JPG ? Oui, mais le PNG ou le SVG est plus propre. Le JPG n'a pas de transparence, donc une conversion JPG vers ICO vous donne un carré plein, et les artefacts de compression apparaissent à très petite taille.

Simplifiez pour 16 pixels

Un logo complet avec une devise devient illisible dans un onglet de navigateur. Ce qui fonctionne :

• Un symbole audacieux avec un fort contraste
• Deux ou trois couleurs unies
• Au maximum un ou deux caractères gras, sans logotype

Testez à taille réelle. Si vous ne le reconnaissez pas en une demi-seconde, simplifiez davantage.

Astuce : utilisez deux images pour le meilleur ICO

Pour une qualité maximale, utilisez une œuvre simplifiée pour les tailles 16 et 32 et une œuvre plus détaillée pour 48 et 256. Créez deux ICO, puis utilisez le simplifié comme favicon.ico et le détaillé pour les raccourcis Windows. C'est optionnel, et un seul logo bien simplifié convient à la plupart des sites.

Convertissez votre logo en ICO et le reste du pack

Option 1 : générez un pack de favicons

Ouvrez le Générateur de favicon de Tool Cloud, importez votre logo carré et téléchargez le ZIP des tailles standard de favicon. Utilisez les fichiers correspondant au tableau ci-dessus, et créez séparément ceux qui manquent (comme le SVG ou les PNG 192/512). Ignorez tout fichier que votre HTML ne référencera pas.

Option 2 : convertir un logo en un seul ICO

Si vous voulez seulement favicon.ico, utilisez le Convertisseur Image vers ICO. Importez votre logo et convertissez, puis renommez le résultat en favicon.ico. Vérifiez quelles tailles contient l'ICO ; s'il manque une version 16 ou 32px, utilisez plutôt le générateur ci-dessus.

Création des PNG 180, 192 et 512

Redimensionnez votre maître carré à 180x180, 192x192 et 512x512 et nommez-les apple-touch-icon.png, icon-192.png et icon-512.png.

Pour l'icône Apple, utilisez un arrière-plan opaque avec le logo centré et entouré de marges. iOS ne respecte pas la transparence et arrondit lui-même les coins, donc ne les arrondissez pas à l'avance. Fournissez toujours votre propre arrière-plan solide plutôt que de compter sur ce qu'iOS remplit.

Où placer chaque fichier dans votre HTML

L'extrait HTML

Importez tous les fichiers à la racine de votre site, puis ajoutez ceci dans la section <head>. Les attributs sizes suivent un article expliquant comment Chrome choisit les icônes :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Quelques remarques :

• Utilisez rel="icon". rel="shortcut icon" est hérité ; "shortcut" est non enregistré et redondant.
• Les navigateurs choisissent selon le type, pas la position, donc l'ordre n'est pas critique. L'attribut type="image/svg+xml" permet aux navigateurs ne supportant pas le SVG de le sauter et d'utiliser l'ICO.
• Donnez à l'ICO une taille concrète et au SVG sizes="any". Ajouter any sur l'ICO peut inciter Chrome à le préférer au SVG.

Le manifeste de l'application web

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Les critères d'installation de Chrome exigent les icônes 192px et 512px. Évitez "purpose": "any maskable" sur un seul fichier. Pour une icône masquable, créez un fichier séparé avec l'œuvre dans la zone sûre centrale (environ 409x409 du canevas 512).

Ajouter un favicon dans WordPress, Squarespace, Shopify et Wix

Les plateformes renomment leurs menus : vérifiez ce qu'affiche votre tableau de bord.

• WordPress : Apparence, Personnaliser, Identité du site, Icône du site. Importez un PNG 512x512.
• Squarespace : Design, Icône du navigateur. Un PNG carré 300x300 fonctionne (l'ICO est également accepté).
• Shopify : Paramètres du thème, Favicon. Importez un PNG carré 512x512.
• Wix : Paramètres, Paramètres du site, Favicon (cela peut nécessiter un plan premium).

Pourquoi votre favicon semble flou ou ne se met pas à jour

Icônes floues ou carrés pleins

Le flou provient généralement du redimensionnement à la hausse d'un petit raster ou d'un logo trop détaillé à 16px. Corrigez-le avec un SVG plus un ICO de 32px ou plus, et n'agrandissez jamais un 16x16. Un carré plein derrière votre logo signifie que la source ne comportait pas de transparence, souvent un JPG.

Ancienne icône toujours affichée

Les navigateurs mettent en cache les favicons pendant des jours ou des semaines. Essayez ceci dans l'ordre :

1. Effectuez un rafraîchissement forcé de la page.
2. Ouvrez /favicon.ico directement et actualisez la page.
3. Ajoutez une chaîne de requête, telle que /favicon.ico?v=2.
4. Vérifiez dans une fenêtre de navigation privée.
5. Confirmez que le fichier retourne HTTP 200, et videz le cache de votre CDN.

Les icônes de l'écran d'accueil iOS sont mises en cache par raccourci, donc les raccourcis existants ne changeront pas et les utilisateurs doivent ajouter à nouveau le site. Pour un rebranding, utilisez un nouveau nom de fichier.

Google Search ne l'affiche pas

Les mises à jour prennent quelques jours à quelques semaines, et changer l'URL de l'icône peut les retarder. Assurez-vous que votre page d'accueil référence l'icône avec rel="icon" et qu'elle respecte les règles de taille ci-dessus. Il n'existe pas de limite stricte documentée en KB ; les règles de Google portent sur les dimensions.

En pratique

Commencez par un fichier maître carré de 512px ou plus et simplifiez-le pour la taille d'onglet. Importez les fichiers, puis collez l'extrait HTML et le manifeste dans votre site, et vérifiez que le lien du manifeste est bien présent. Enfin, regardez le résultat à 16px : si le symbole n'est pas clair, simplifiez-le à nouveau.

Questions fréquentes

Avez-vous encore besoin d'un favicon.ico en 2026 ?

Oui. Les navigateurs, les lecteurs de flux et les robots d'aperçu de liens demandent /favicon.ico à la racine du site indépendamment de vos balises HTML, ce qui constitue une assurance peu coûteuse. Regroupez les versions 16, 32 et 48px dans un seul fichier.

Un favicon peut-il être un JPG ?

Techniquement oui, mais le PNG ou le SVG offre un résultat bien plus net. Le JPG n'a pas de transparence et présente des artefacts de compression ; les photos contiennent trop de détails pour des icônes de 16x16 pixels.

Quelle taille doit avoir un favicon pour Google Search ?

Google nécessite une image carrée d'au moins 8x8px et recommande une taille supérieure à 48x48px. Le SVG n'y est pas pris en charge, conservez donc un fichier ICO ou PNG déclaré avec rel=icon sur votre page d'accueil.

Ai-je besoin de fichiers PNG séparés de 16x16, 32x32 et 48x48 ?

Généralement non. Un fichier ICO multi-tailles couvre ces dimensions, et un test de requête Chromium a montré que les PNG autonomes étaient inutilisés lorsqu'un ICO était présent. Firefox et Safari n'ont pas été testés.

Pourquoi mon nouveau favicon ne s'affiche-t-il pas ?

Les navigateurs mettent en cache les favicons de manière agressive pendant des jours ou des semaines. Essayez un rechargement forcé, ouvrez directement /favicon.ico, ajoutez une chaîne de requête ?v=2 ou vérifiez dans une fenêtre de navigation privée.