Comment ajouter un favicon à votre site WordPress : Personnaliseur, code et dépannage complet

Ajouter un favicon à WordPress prend environ 30 secondes : allez dans Apparence → Personnaliser → Identité du site → Icône du site, téléversez un PNG de 512x512 pixels et cliquez sur Publier. C'est fait.

Mais si cela ne fonctionne pas — ou si vous souhaitez plus de contrôle — continuez la lecture. Il y a quelques subtilités à connaître.

La méthode rapide : le Personnaliseur WordPress

Cette méthode fonctionne sur tous les sites WordPress à partir de la version 4.3 (sortie en 2015). Si vous utilisez une version un tant soit peu récente, cette option est disponible.

Étape 1 : Ouvrir le Personnaliseur

• Allez dans Apparence → Personnaliser dans votre administration WordPress
• Ou cliquez sur "Personnaliser" dans la barre d'administration en consultant votre site

Étape 2 : Trouver l'Identité du site

• Cliquez sur Identité du site dans la barre latérale du Personnaliseur
• Descendez jusqu'à Icône du site

Étape 3 : Téléverser votre image

• Cliquez sur Sélectionner l'icône du site
• Téléversez une image PNG d'au moins 512 x 512 pixels
• WordPress génère automatiquement toutes les tailles nécessaires (dont 32x32, 180x180, etc.)
• Recadrez si demandé, puis cliquez sur Publier

C'est tout. WordPress gère le reste — il crée les balises <link> pour les favicons de navigateur, les Apple touch icons et même l'image de vignette Windows.

La méthode par code : ajouter un favicon manuellement

Parfois, la méthode du Personnaliseur ne suffit pas. Peut-être construisez-vous un thème personnalisé, ou votre thème remplace le comportement par défaut. Voici comment l'ajouter avec du code.

Option A : Déposer les fichiers dans votre thème

Téléversez vos fichiers de favicon dans le répertoire racine de votre thème, puis ajoutez ceci dans le fichier functions.php de votre thème :

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Option B : Utiliser un favicon SVG

Les favicons SVG s'adaptent parfaitement à toutes les tailles et prennent en charge le mode sombre. Ajoutez ceci dans functions.php :

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

Le PNG de secours est présent pour Safari, qui ne prend toujours pas entièrement en charge les favicons SVG.

Utiliser un plugin (si vous préférez)

Plusieurs plugins gèrent les favicons, mais honnêtement ? Le Personnaliseur intégré fonctionne très bien pour la plupart des sites. Les plugins sont utiles si vous avez besoin de :

• Favicons différents par page ou article
• Tests A/B avec différentes icônes
• Multisite avec des favicons par site

Les options populaires incluent All in One Favicon et Flavor (anciennement flavicon). Mais encore une fois — essayez d'abord le Personnaliseur.

Thèmes blocs WordPress (édition complète du site)

Si vous utilisez un thème bloc comme Twenty Twenty-Four ou Twenty Twenty-Five, le processus est légèrement différent :

1. Allez dans Apparence → Éditeur
2. Cliquez sur Styles (l'icône en demi-cercle)
3. Naviguez vers les styles globaux de votre site
4. Le paramètre Icône du site se trouve toujours dans Apparence → Personnaliser → Identité du site

Les thèmes blocs utilisent toujours le même Personnaliseur pour le favicon. WordPress n'a pas encore intégré cette fonctionnalité dans l'éditeur de site.

Fichiers de favicon recommandés

Pour une couverture complète, préparez ces fichiers :

Le Personnaliseur WordPress gère la plupart de ces fichiers automatiquement lorsque vous téléversez une image de 512x512 pixels. Les fichiers SVG et ICO doivent être ajoutés manuellement si vous les souhaitez.

Dépannage : le favicon ne s'affiche pas

Tout vider

Les problèmes de favicon WordPress sont presque toujours liés au cache :

1. Cache du navigateur : Actualisez avec Ctrl+Shift+R (Windows) ou Cmd+Shift+R (Mac)
2. Cache WordPress : Si vous utilisez WP Super Cache, W3 Total Cache ou LiteSpeed Cache — purgez-le
3. Cache CDN : Cloudflare, Fastly ou autre — purgez les URL du favicon
4. Essayez le mode incognito : Ouvre une session propre sans fichiers en cache

Vérifier les conflits de plugins

Certains plugins SEO et frameworks de thèmes injectent leurs propres balises de favicon. Si vous voyez des balises <link rel="icon"> en double dans le code source de votre page :

1. Affichez le code source de la page (Ctrl+U)
2. Recherchez "icon" ou "favicon"
3. S'il y a des doublons, identifiez quel plugin les ajoute
4. Désactivez la fonctionnalité favicon du plugin, ou supprimez votre code ajouté manuellement

Problèmes de remplacement par le thème

Certains thèmes (surtout les thèmes premium) ont leurs propres paramètres de favicon qui remplacent ceux du Personnaliseur. Vérifiez :

• Le panneau Options du thème pour un paramètre de favicon
• Le fichier header.php du thème pour des balises <link rel="icon"> codées en dur
• La documentation du thème pour les instructions relatives au favicon

Dépannage : Google affiche un mauvais favicon

Google peut mettre des jours à des semaines pour mettre à jour les favicons dans les résultats de recherche. Voici comment accélérer le processus :

Exigences de Google pour les favicons

Google a des règles spécifiques pour l'affichage des favicons dans les résultats de recherche :

• Doit être un multiple de 48 px (48x48, 96x96, 144x144)
• Doit être carré
• Ne doit pas contenir de contenu inapproprié ou NSFW
• Doit représenter le site web (pas une icône générique)

Accélérer la mise à jour

1. Assurez-vous que votre favicon est en ligne et accessible
2. Ouvrez Google Search Console
3. Utilisez l'inspection d'URL sur votre page d'accueil
4. Cliquez sur Demander l'indexation
5. Patientez — cela prend généralement 1 à 2 semaines

Dépannage : le favicon s'affiche sur ordinateur mais pas sur mobile

Les navigateurs mobiles sont plus exigeants sur les formats de favicon :

• iOS Safari : Nécessite une apple-touch-icon (180x180) — le favicon standard ne s'affichera pas sur l'écran d'accueil
• Android Chrome : Recherche un manifest.json avec des références d'icônes pour l'écran d'accueil
• PWA : Nécessite des icônes 192x192 et 512x512 définies dans le manifeste de l'application web

Si votre site WordPress possède un manifeste d'application web (certains thèmes et plugins en ajoutent un), assurez-vous que les chemins des icônes sont corrects.

Considérations pour le Multisite

Vous utilisez WordPress Multisite ? Chaque site a besoin de son propre favicon.

• Le Personnaliseur est propre à chaque site, donc chaque sous-site peut avoir sa propre icône
• Les paramètres au niveau du réseau n'incluent pas de favicon par défaut
• Si vous souhaitez un favicon par défaut pour tout le réseau, ajoutez-le via functions.php dans un plugin must-use (wp-content/mu-plugins/)

Bonnes pratiques

• Commencez grand : Téléversez au moins du 512x512 — WordPress réduit, mais n'agrandit jamais
• Utilisez le PNG : Les arrière-plans transparents fonctionnent mieux qu'en JPEG
• Restez simple : Votre favicon est minuscule — les logos complexes seront illisibles en 16x16
• Testez sur tous les navigateurs : Utilisez Favicon.im pour vérifier votre configuration
• Versionnez votre favicon : Ajoutez ?v=2 à l'URL lors des mises à jour pour forcer le renouvellement du cache

FAQ

Comment ajouter un favicon dans WordPress ?

Allez dans Apparence → Personnaliser → Identité du site → Icône du site, téléversez une image PNG de 512x512 pixels et cliquez sur Publier. WordPress génère automatiquement toutes les tailles nécessaires.

Quelle taille doit avoir un favicon WordPress ?

Téléversez au moins 512 x 512 pixels. WordPress créera automatiquement les tailles 32x32, 180x180 et autres. Pour les résultats de recherche Google, utilisez des multiples de 48 px.

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

C'est généralement un problème de cache. Videz le cache de votre navigateur, celui de votre plugin de cache WordPress et celui de votre CDN. Essayez une fenêtre de navigation privée. Vérifiez également les conflits de plugins causant des balises de favicon en double.

Peut-on utiliser un favicon SVG dans WordPress ?

WordPress ne prend pas en charge les téléversements SVG par défaut pour des raisons de sécurité. Vous pouvez ajouter le support des favicons SVG manuellement via le code functions.php, ou utiliser un plugin qui active les téléversements SVG.

Comment ajouter des favicons différents pour les modes clair et sombre dans WordPress ?

Utilisez un favicon SVG avec des media queries CSS intégrées pour prefers-color-scheme. Ajoutez le fichier SVG manuellement via functions.php car le Personnaliseur ne gère que les formats PNG/ICO.

Références

1. Site Icon - WordPress Developer Resources - Documentation officielle WordPress
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Outil de test et de validation des favicons