Créer une favicon et l’ajouter à votre site

Choisissez la méthode adaptée : dans WordPress, ajoutez une image carrée via le réglage d’icône du site ; les autres éditeurs proposent généralement leur propre champ d’icône du site. Si vous modifiez le HTML, créez les fichiers d’icônes et suivez les instructions HTML. Le ZIP et le manifeste sont inutiles si votre éditeur crée les icônes.

Qu'est-ce qu'un favicon et où apparaît-il ?

Un favicon est la petite icône qui permet de reconnaître votre site dans un onglet ou un favori du navigateur. Une version plus grande peut représenter le site sur l’écran d’accueil d’un téléphone. Un même dessin peut donc nécessiter plusieurs tailles.

Imaginez un lecteur avec douze onglets ouverts. Le nom complet de votre entreprise ne tient peut-être plus à côté du titre, mais un symbole distinctif permet encore de retrouver le site. Concevez-le pour être reconnu dans cet espace réduit.

Le favicon diffère du logo d'en-tête et de l'image de partage. Modifier l'un ne remplace pas automatiquement les autres. Un logo large peut devenir illisible dans un carré minuscule.

Choisissez d'abord la méthode d'installation pour préparer seulement les fichiers utiles, sans considérer tout le pack comme obligatoire.

Si votre outil de création de sites propose son propre réglage d’icône, commencez par là. Les instructions HTML concernent les sites dont vous pouvez modifier le head commun aux pages. Coller les balises dans un bloc de contenu visible n’est pas une installation équivalente.

Choisissez un dessin lisible à 16 pixels

Gardez l'élément le plus reconnaissable : initiale forte, symbole simple ou silhouette d'une mascotte. Le nom complet et le slogan occupent trop de place. Retirez les détails visibles seulement en grand.

Imaginez une boulangerie avec un pain, des épis et le nom « Boulangerie du Rivage ». Le favicon peut conserver la silhouette du pain et une entaille caractéristique. Tous les détails réunis formeraient des taches minuscules.

Vérifiez la taille réelle. Un dessin de 512 pixels affiché en grand ne montre pas si un petit espace reste visible à 16 pixels. Reconnaissez-vous la forme en une ou deux secondes, sans zoom ?

• Une idée principale. Évitez plusieurs sujets qui se disputent le carré.
• Des contours nets. Les traits fins et petits évidements peuvent disparaître à la réduction.
• Prévoyez assez de contraste. Un symbole clair sur fond transparent peut se perdre dans une interface claire.
• Du texte avec mesure. Une lettre épaisse peut fonctionner ; le nom complet rarement.
• Une silhouette lisible. Simplifiez si la reconnaissance dépend des petits détails.

Une version dédiée aux petites tailles est légitime. Elle n'a pas à reproduire tout le logo. Dessinez séparément les formes précises à 16 pixels : le générateur redimensionne, mais ne choisit pas les détails de marque à supprimer.

Préparez l'image source sans perdre de détails

Exportez depuis l'original si possible. Un PNG carré d'au moins 512 × 512 pixels couvre la plus grande sortie du pack. Cela ne signifie pas que l'onglet affiche une image de 512 pixels.

Depuis un logo vectoriel, exportez un PNG carré dans votre logiciel de dessin. Pixilo accepte JPG, PNG et WebP, pas SVG. Conservez le fichier vectoriel pour les modifications futures.

Agrandir une icône floue de 32 à 512 pixels ne recrée pas les détails. Utilisez un meilleur original ou simplifiez le dessin. Le générateur avertit quand un côté mesure moins de 512 pixels, car les grandes sorties nécessitent un agrandissement.

Choisissez la composition carrée avant le poids du fichier. Ajuster un rectangle conserve ses proportions mais peut laisser beaucoup de vide. Le recadrage central coupe des éléments. Aucun des deux ne résout automatiquement un logo très large.

Si le sujet est décentré, choisissez d'abord le cadrage avec l'outil de recadrage. Le générateur découpe au centre et ne déplace pas le cadre vers un visage ou symbole sur le bord.

Essayez PNG pour la transparence et les contours graphiques nets. Avec JPG, vérifiez le flou et les petites taches autour du symbole. Changer de format ne restaure pas les détails perdus. Le guide JPG ou PNG aide à choisir.

Tailles et formats : quels fichiers faut-il ?

Vous n’avez pas besoin d’importer une icône pour chaque taille d’appareil. Partez des besoins de votre site. Un site HTML peut utiliser quelques icônes liées, tandis qu’un système de gestion de contenu peut créer ses variantes à partir d’une seule image.

Un fichier ICO peut contenir plusieurs images. Pixilo crée un véritable ICO avec des versions de 16, 32 et 48 pixels. Renommer un PNG en .ico ne crée pas cette structure. Un PNG contient une seule image, facile à examiner séparément.

L'icône Apple de 180 pixels a un autre rôle que le favicon du navigateur. La documentation web d'Apple décrit le lien apple-touch-icon pour l'écran d'accueil. Une minuscule icône de navigateur n'est pas une bonne source pour cet usage.

Le ZIP contient neuf fichiers. Les PNG de 32 et 48 pixels servent aux réglages demandant ces tailles ; inutile de tous les lier en plus de l'ICO et du PNG de 96 pixels. Les instructions sont pour vous, pas un fichier à publier pour les visiteurs.

Choisissez la transparence et les marges avec soin

Une icône transparente se pose sur le fond de l'interface. Testez un symbole sombre sur fond sombre et clair sur fond clair. S'il disparaît, utilisez un contour contrasté ou un fond uni.

Dans Pixilo, la transparence concerne l'ICO et les PNG de 32, 48 et 96 pixels. L'icône Apple et les versions de 192 et 512 pixels utilisent toujours le fond uni choisi, même si les icônes de navigateur restent transparentes.

La transparence n'efface pas un fond existant. Les pixels blancs autour du logo restent blancs. Il faut une source réellement transparente pour obtenir cet effet.

La marge s'applique à chaque côté : 10% laissent 80% de la largeur, 20% seulement 60%. À 16 pixels, ce dernier réglage donne environ 10 pixels au dessin. Un peu d'air aide, trop rend le symbole minuscule.

Examinez les marges déjà présentes. Si le logo ne remplit que la moitié centrale du PNG, une marge supplémentaire nulle conserve le vide initial. Recadrez le surplus avant de régler l'espacement.

Comparez la valeur par défaut avec une marge plus petite et plus grande. Regardez d'abord 16 pixels. Le pourcentage s'applique au canevas entier, pas seulement à la forme colorée.

Ajouter un favicon dans WordPress

Utilisez la fonction intégrée d’icône du site. La documentation WordPress conseille un PNG carré d’au moins 512 × 512 pixels. Depuis WordPress 6.5, ouvrez Réglages → Général, choisissez l’image et enregistrez. Dans les versions antérieures, le réglage peut se trouver dans Apparence → Personnaliser → Identité du site.

Avec un thème à blocs compatible, l’icône peut aussi être accessible sous Apparence → Éditeur → Identity. Les libellés dépendent de la langue de l’interface. Consultez la documentation de la section Identity de l’éditeur de site si elle correspond à votre écran.

Le fichier Pixilo icon-512.png convient. Vérifiez son fond uni avant import. Un PNG carré original adapté permet de conserver sa transparence.

1. Choisissez le PNG dans le champ d'icône du site.
2. Enregistrez, puis ouvrez l'accueil public et une autre page.
3. Vérifiez l'onglet. Si un composant fournit encore l'ancienne icône, suivez le dépannage.

WordPress crée les liens. Le ZIP n'est ni thème ni extension, et les balises HTML ne vont pas dans un article.

Le logo du site et l’icône du site sont deux réglages distincts. Modifier le grand logo de l’en-tête ne change pas forcément l’icône de l’onglet. Choisissez et enregistrez le réglage qui contrôle l’icône.

Créer un favicon à partir d'un logo avec Pixilo

1. Choisissez une image. Ouvrez le générateur de favicon et sélectionnez un JPG, PNG ou WebP de 25 Mo maximum. L’image ne doit pas dépasser 8000 pixels par côté ni 32 millions de pixels au total.
2. Choisissez l’ajustement. L’ajustement conserve toute l’image et ses proportions. Le recadrage carré prend une zone au centre. Vérifiez qu’aucun élément important n’est coupé.
3. Réglez la marge et le fond. Comparez les aperçus du navigateur à taille réelle et l’aperçu Apple. Choisissez si les icônes du navigateur doivent être transparentes.
4. Télécharger les fichiers utiles. ZIP fournit le pack ; le téléchargement individuel convient à un champ précis.
5. Installer et tester. Utilisez les réglages du site ou les instructions HTML. Vérifiez le site publié, pas seulement l'aperçu.

Ajustez les options jusqu’à obtenir de bons aperçus, puis téléchargez. Aucun bouton d’enregistrement séparé n’est nécessaire : le téléchargement utilise vos derniers choix. Un fichier déjà enregistré sur votre appareil ne change pas ensuite. Téléchargez-le à nouveau si vous modifiez le dessin.

L’image source et les fichiers générés restent sur votre appareil. Aucune image n’est envoyée au serveur de Pixilo. La page ouverte conserve l’image et les réglages, alors téléchargez le résultat avant de la fermer ou de la recharger.

« Choisir une autre image » réaffiche le sélecteur. Les options restent en place ; vérifiez l'ajustement, la marge et le fond pour le nouveau dessin.

Exemple : transformer un logo large en icône lisible

Supposons qu’une boulangerie possède un logo de 1200 × 600 avec un pain et un long nom. Il s’agit d’un exemple de démarche, pas d’une comparaison mesurée des illustrations de cet article.

1. Isoler le symbole. Exportez le pain depuis l'original en PNG carré de 512 × 512. Évitez une petite capture d'écran.
2. Retirer les marges inutiles. Gardez les bords du pain intacts et laissez le symbole occuper suffisamment le carré.
3. Comparer les petits aperçus. Commencez par l'ajustement complet et la marge par défaut. Si l'entaille disparaît à 16 pixels, simplifiez l'original au lieu d'agrandir une copie floue.
4. Tester le fond. Si le contour sombre se perd, essayez un fond uni contrasté pour le navigateur. Vérifiez aussi Apple.
5. Télécharger selon le site. Pour HTML avec navigateur et Apple, utilisez ICO, PNG de 96 pixels et icône Apple. Pour WordPress, prenez le PNG de 512 pixels.

Le symbole doit être identifiable avant installation. S'il fonctionne seulement en grand, retravaillez le dessin. La bonne extension ne corrige pas une composition surchargée.

Ajouter un favicon à un site HTML

Décompressez le ZIP et placez les icônes choisies dans le dossier publié par votre site. Avec les chemins ci-dessous, l’ICO doit être accessible à une adresse comme https://example.com/favicon.ico. Conservez les fichiers dans un dossier source ou de ressources publiques copié lors de la compilation. Un fichier ajouté uniquement au dossier généré peut disparaître à la prochaine compilation.

Placez les deux premières balises dans le <head> de la page pour les icônes du navigateur. Ajoutez la troisième si vous souhaitez aussi une icône Apple pour l’écran d’accueil. Si vos pages partagent un modèle head, placez-les dans ce modèle pour utiliser les mêmes références partout.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href indique l’emplacement du fichier et sizes ses dimensions. Le navigateur peut choisir selon le format, la taille et d’autres déclarations ; la première balise n’est pas toujours prioritaire. Consultez la référence MDN pour rel="icon".

Dans le dossier /icons/, modifiez les trois chemins : /icons/favicon.ico, /icons/favicon-96x96.png et /icons/apple-touch-icon.png. L'emplacement doit correspondre à la référence.

Un / initial part de la racine du domaine. Sous /portfolio/, adaptez les chemins à ce déploiement. Ouvrez chaque URL après publication.

Cherchez les anciennes balises favicon et manifeste dans le head. Remplacez les références obsolètes. Garder l'ancienne icône du thème rend le choix du navigateur difficile à comprendre.

Facultatif : ajouter ou mettre à jour le manifeste

Ignorez cette étape pour de simples icônes de navigateur. Le manifeste est séparé et inutile pour afficher l'icône d'onglet.

Un manifeste d’application web est un fichier JSON qui décrit l’application et ses icônes. Le site.webmanifest de Pixilo contient seulement des entrées d’icônes. Si vous avez déjà un manifeste, intégrez les nouvelles icônes sans remplacer le nom, l’URL de départ ou le mode d’affichage. Le guide de web.dev explique ces champs.

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

Pour un nouveau manifeste d'icônes, ajoutez la référence suivante dans le head commun. Si un autre est déjà lié, modifiez-le plutôt que d'ajouter un lien concurrent.

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

Sous /icons/, le lien devient href="/icons/site.webmanifest". Changez aussi les chemins JSON en /icons/icon-192.png et /icons/icon-512.png : leur barre oblique initiale vise la racine du domaine, pas le dossier du manifeste.

Les icônes générées utilisent purpose: "any". Ce ne sont pas des icônes maskable : celles-ci doivent conserver leurs détails importants lorsque l’appareil les découpe en cercle ou dans une autre forme. Un fond uni ne suffit pas. Ne changez pas ce rôle sans préparer et tester un dessin adapté. La référence MDN sur le rôle des icônes explique la différence.

Le fichier contient toujours uniquement des icônes, pas une configuration d'application complète. Il ne rend pas le site installable à lui seul.

Le favicon dans la recherche Google

Une icône reconnaissable peut aider le lecteur à identifier votre site dans les résultats de recherche. Considérez-la comme un détail de marque et de facilité d’utilisation, pas comme une garantie de meilleur classement ou de clics supplémentaires.

Les consignes Google exigent une image carrée d’au moins 8 × 8 pixels et conseillent une taille supérieure à 48 × 48. Le PNG de 96 pixels du pack est un choix pratique. Liez-le depuis la page d’accueil, gardez son URL stable et autorisez Googlebot à explorer l’accueil ainsi que Googlebot-Image à accéder à l’icône.

Google utilise un favicon par nom d’hôte, comme example.com. Une section à l’adresse example.com/blog/ ne reçoit pas d’icône distincte dans la recherche. L’affichage n’est pas garanti. Une nouvelle exploration et le traitement peuvent prendre des jours, voire des semaines. Une demande d’indexation dans Search Console ne force pas une mise à jour immédiate.

Si le navigateur affiche la nouvelle icône mais Google conserve l’ancienne, vérifiez d’abord les fichiers publics et les balises de l’accueil. Modifier sans cesse le dessin pendant l’attente complique l’identification de la version traitée.

Pourquoi l'icône manque-t-elle ou reste-t-elle ancienne ?

Distinguez un problème d’installation d’une ancienne copie en cache. Si l’URL de l’icône ne fonctionne pas, actualiser la page ne la réparera pas. Si l’URL montre la bonne image mais l’onglet non, vérifiez les balises et le cache.

Ouvrez l’URL exacte de l’icône dans un nouvel onglet. Elle doit montrer l’image, pas l’accueil, une connexion ou une erreur. Pour une vérification plus précise, ouvrez le panneau Réseau des outils de développement et rechargez la page. Un statut 200 ne suffit pas si la réponse contient du HTML plutôt qu’une image.

Examinez le head réellement publié sur l’accueil et une page interne. Une modification du modèle peut manquer dans le résultat de la compilation, ou un composant peut encore ajouter une ancienne balise. Recherchez les noms et chemins des fichiers installés.

Le navigateur peut garder le favicon indépendamment de la page. Fermez puis rouvrez l'onglet ; essayez un profil neuf ou un autre navigateur. Un simple rechargement ne remplace pas toujours l'icône et ces tests n'imposent pas un changement immédiat partout.

Avec un CDN ou service worker, vérifiez les réponses anciennes et actualisez le cache concerné. Corrigez un point, testez le résultat, puis continuez seulement si nécessaire.

Vérifications finales

• Dessin reconnaissable à 16 et 32 pixels sans zoom.
• Contours et couleurs lisibles sur fond clair et sombre.
• Fichiers conformes aux derniers réglages d'ajustement, marge et fond.
• Chaque URL ouvre le fichier public correct.
• Head commun sans références obsolètes en double.
• Références Apple et manifeste pointant vers les fichiers publiés.
• Autres réglages du manifeste existant préservés.
• Accueil et icône accessibles à Google pour l'éligibilité en recherche.

Conservez original et pack final ensemble. Notez où l'icône est configurée : modèle HTML, WordPress ou constructeur. Le prochain changement de marque sera plus simple.

Questions fréquentes

Quelle taille de favicon choisir ?

Utilisez un dessin carré net, assez grand pour les fichiers nécessaires. Une source de 512 × 512 couvre le plus grand fichier du pack, mais n’est pas obligatoire pour le seul onglet. Le tableau des tailles détaille les dimensions et les usages.

Faut-il ICO et PNG ?

Pas pour tous les sites. L’exemple HTML propose un ICO avec plusieurs petites images et un PNG plus grand. Un CMS peut produire ses propres variantes à partir d’un seul original. Suivez les exigences du réglage utilisé au lieu d’importer tous les fichiers disponibles.

Un favicon peut-il être transparent ?

Oui, les icônes du navigateur peuvent préserver la transparence. Vérifiez que le symbole reste visible sur différents fonds. Les icônes d’accueil utilisent le fond uni choisi, et l’option ne retire pas un fond déjà présent dans l’image source.

Pourquoi mon logo est-il flou ?

L’image source peut être floue ou contenir plus de détails qu’une petite icône ne peut montrer. L’agrandir ne résout aucun de ces problèmes. Utilisez un original net, simplifiez les détails et examinez les aperçus à taille réelle avant de modifier la marge.

Faut-il importer le ZIP dans WordPress ?

Non. Extrayez le PNG carré approprié, comme icon-512.png, pour le réglage d'icône. Le ZIP n'est ni thème ni extension.

Un favicon améliore-t-il le SEO ?

Il favorise une identité cohérente et reconnaissable. N'attendez pas un gain de classement. Respectez les consignes et le délai ; l'éligibilité ne garantit pas l'affichage.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)