Les favicons sont plus communément appelées les petites icônes qui s’affichent à côté des noms de sites web dans les onglets des navigateurs. Cependant, bien qu’elles soient originaires de là, votre favicon WordPress est également utilisée dans d’autres endroits tels que les signets du navigateur, les boutons de l’écran d’accueil d’iOS, et plus encore.
En tant que tel, il s’agit d’un élément important de votre stratégie de marque. Utilisée correctement, votre favicon ou « icône de site » peut aider les utilisateurs à identifier facilement votre entreprise. Elle peut contribuer à renforcer la reconnaissance de votre marque et même améliorer l’expérience de l’utilisateur du site.
Dans cet article, nous allons discuter des avantages de l’utilisation d’une favicon dans un site WordPress. Nous expliquerons ensuite comment en créer une, et vous présenterons trois options faciles pour l’ajouter à votre site.
Enfin, nous terminerons par quelques conseils et bonnes pratiques concernant les favicons de WordPress. Commençons !
Les avantages de l’utilisation d’une favicon WordPress
Si vous avez déjà eu trop d’onglets ouverts en même temps (coupable !), vous pouvez probablement apprécier l’utilité d’une favicon. Une favicon permet aux utilisateurs d’identifier rapidement votre site web lorsqu’ils ont plusieurs onglets ouverts dans leur navigateur :
Selon le nombre d’onglets ouverts, le titre de votre site ne sera pas toujours visible. Par conséquent, l’ajout d’une favicon peut contribuer à améliorer l’UX pour vos visiteurs.
Au-delà de la reconnaissance de la marque, l’utilisation d’une favicon WordPress peut également rendre votre site plus professionnel et plus crédible. En retour, cela peut contribuer à accroître la confiance des clients.
En outre, si quelqu’un enregistre votre site web sur l’écran d’accueil de son appareil mobile, votre favicon apparaîtra sous forme d’icône. L’utilisation du logo de votre marque ou d’une image similaire peut contribuer à rendre votre site plus facile à reconnaître et, de manière générale, à créer une esthétique cohérente.
Comment créer une favicon WordPress
Si vous avez déjà une favicon que vous êtes prêt à utiliser (la plupart des entreprises utilisent leur logo ou une variante de celui-ci), n’hésitez pas à passer à la section suivante. Sinon, nous allons voir comment créer votre image de favicon.
Dans le passé, vous deviez utiliser un fichier ICO spécifique pour votre favicon. Cependant, de nos jours, tous les navigateurs modernes permettent d’utiliser des fichiers ICO, PNG et GIF pour votre favicon. Le format JPEG est également largement pris en charge (lire : JPG vs JPEG), mais pas dans toutes les versions d’Internet Explorer, ce qui le rend moins idéal pour l’utilisation de favicon.
Si vous connaissez bien Photoshop, vous pouvez l’utiliser pour créer manuellement une favicon. Cependant, il est souvent plus facile d’utiliser un outil de base dans le cloud pour créer votre jeu d’icônes à partir d’une image existante.
RealFaviconGenerator (la version cloud du plugin dont nous parlerons plus tard) est une excellente option car :
- Il crée également des icônes d’applications.
- Il fournit des icônes de favoris aux formats PNG et ICO.
- Vous pouvez personnaliser votre favicon après avoir téléchargé votre image.
- Il vous suffit de coller le code que le plugin vous donne.
Il existe d’autres générateurs de favicons utiles :
- Favicon.cc, qui vous permet de créer une favicon à partir de zéro ou de télécharger une image existante.
- Favicon Generator, qui fonctionne de manière similaire à RealFaviconGenerator.
Pour utiliser RealFaviconGenerator, commencez par télécharger l’image que vous souhaitez utiliser en cliquant sur Sélectionner votre image Favicon :
Sur l’écran suivant, vous pouvez configurer des détails spécifiques sur votre ensemble de favicons (si vous le souhaitez). Lorsque vous avez terminé, faites défiler l’écran jusqu’en bas et cliquez sur Générer vos favicons et votre code HTML :
Sur la page suivante, cliquez sur « Favicon package » pour télécharger vos images favorites :
Veillez à laisser cette page ouverte si vous prévoyez d’ajouter manuellement la favicon à votre site.
Conseils pour la création d’un favicon WordPress
Il existe quelques conseils de conception et de formatage qui méritent d’être mentionnés et revus avant de créer votre favicon. Le plus important est que la taille recommandée pour les favicons est de 512×512 pixels.
Bien que votre favicon WordPress soit un carré parfait, vous pouvez également utiliser une image rectangulaire et la recadrer avant ou après l’avoir téléchargée dans WordPress. WordPress est doté d’une fonction intégrée de recadrage des icônes de site si vous les ajoutez via le Customizer (que nous vous présenterons sous peu).
De plus, il est important de noter que votre favicon s’affichera sous la forme d’un carré de 16×16px. Par conséquent, vous devez choisir une image qui sera belle une fois réduite à ces dimensions. Bien qu’elle s’affiche à cette taille, elle doit avoir une hauteur et une largeur d’au moins 512 pixels.
Enfin, il est judicieux de revoir certaines des directives de Google concernant la création et l’utilisation des favicons. Cela permettra de s’assurer que votre icône s’affiche de manière optimale dans les moteurs de recherche et les onglets du navigateur.
Comment ajouter une favicon WordPress à votre site web (3 options faciles)
Une fois que vous avez votre favicon, vous êtes prêt à l’ajouter à votre site WordPress. Examinons trois méthodes que vous pouvez utiliser pour cela.
1. Utiliser le personnalisateur WordPress pour télécharger votre Favicon
Depuis la version 4.3 de WordPress, tous les sites WordPress comprennent une fonction d’icône de site qui permet de télécharger et de recadrer facilement une image pour l’utiliser comme favicon. Pour la plupart des utilisateurs, il s’agit de la méthode la plus simple et la plus rapide pour ajouter une icône de favicon à WordPress.
Tout ce dont vous avez besoin est une image d’au moins 512×512 pixels. WordPress se chargera du reste du processus. Pour commencer, rendez-vous sur le site Apparence → Personnaliser dans votre tableau de bord WordPress :
De là, naviguez jusqu’à l’onglet « Identité du site » :
Ensuite, regardez en bas pour la section Icône du site, et cliquez sur le bouton Sélectionner l’icône du site :
L’interface normale de la médiathèque WordPress s’ouvrira. Vous pouvez soit choisir une image existante dans votre médiathèque, soit en télécharger une nouvelle. Si vous avez utilisé RealFaviconGenerator pour créer votre favicon, assurez-vous que le paquet que vous avez téléchargé est décompressé.
Une fois que vous avez une image qui vous plaît, cliquez dessus et choisissez Sélectionner dans le coin inférieur droit :
Si votre image n’est pas déjà un carré parfait (par exemple 512×512 px), WordPress vous donnera une chance de la recadrer sur l’écran suivant.
Utilisez la case pour mettre en évidence la partie de l’image que vous souhaitez utiliser pour votre icône. Vous pouvez voir un aperçu de l’aspect de votre image recadrée sur le côté droit de l’interface.
Une fois que vous êtes satisfait de l’aspect des choses, cliquez sur Recadrer l’image pour finaliser votre choix :
C’est tout ! Il vous suffit de sélectionner « Sauvegarder et Publier » pour faire vivre votre favicon. Si vous souhaitez modifier votre favicon à l’avenir, vous pouvez revenir à cette interface.
2. Installation d’un plugin pour ajouter votre favicon WordPress
Si vous préférez une solution de plugin à la fonctionnalité d’icône native du site WordPress, vous pouvez utiliser un plugin gratuit populaire appelé Favicon par RealFaviconGenerator (l’outil basé dans le cloud dont nous avons parlé précédemment).
Ce plugin est tout aussi simple à utiliser que le Customizer WordPress natif. Toutefois, il offre des options de compatibilité supplémentaires pour divers appareils et icônes d’applications. Pour l’utiliser, installez et activez le plugin gratuit via votre tableau de bord WordPress :
Une fois le plugin activé, rendez-vous sur Apparence → Favicon pour créer votre jeu de favicons. Il vous suffit de sélectionner ou de télécharger une image d’au moins 70×70 px (idéalement 260×260 px) :
Après avoir sélectionné votre image, cliquez sur Generate favicon. Lorsque vous sélectionnez ce bouton, le plugin vous emmènera hors de votre site WordPress vers le site RealFaviconGenerator.
En bas du site, faites défiler la page pour sélectionner Générer vos Favicons et votre code HTML (voir la section précédente). Pendant que l’outil fonctionne, Real Favicon Generator vous renverra à votre tableau de bord WordPress :
Après cela, votre favicon sera mis en place et prêt à fonctionner. Vous pouvez voir un aperçu de son apparence sur différents appareils dans l’interface du plugin.
3. Ajout manuel de votre Favicon via FTP
Si vous préférez faire les choses manuellement, il est possible d’ajouter un favicon à votre site WordPress via le protocole de transfert de fichiers (FTP) ou le gestionnaire de fichiers si votre hébergeur utilise cPanel.
Si vous optez pour cette méthode, vous devrez également créer votre propre image de favicon. Vous pouvez le faire en suivant les étapes que nous avons décrites plus haut dans cet article.
Pour cette démonstration, nous utiliserons le paquet que nous avons créé et téléchargé de RealFaviconGenerator, les instructions s’appliquent même si vous avez utilisé un outil différent pour créer votre favicon.
Pour ajouter manuellement un favicon WordPress à votre site web, vous devrez :
- Accéder aux fichiers de votre site, soit via un client FTP, soit via le gestionnaire de fichiers de votre cPanel d’hébergement.
- Localiser le répertoire racine de votre site et télécharger le contenu de votre paquet favicon (favicons.zip)
Les fichiers doivent se trouver dans le même dossier que vos dossiers wp-admin et wp-content. Ensuite, prenez le code RealFaviconGenerator qui vous a été fourni plus tôt, et soit :
- Utilisez un plugin comme Insert Headers and Footers pour l’ajouter à l’en-tête de votre thème.
- Collez-le directement dans la section <head> de votre thème, en éditant le fichier header.php de votre thème.
Using the Insert Headers and Footers plugin is optimal because it ensures that you won’t lose your favicon if you change WordPress themes down the road.
L’utilisation du plugin Insert Headers and Footers est optimale car elle vous assure de ne pas perdre votre favicon si vous changez de thème WordPress par la suite.
Pour ce faire, installez et activez ce plugin. Ensuite, rendez-vous sur le site → Insert Headers and Footers, et collez votre code dans la section Scripts in Header :
Veillez à enregistrer vos modifications. Ensuite, vous avez terminé !
Conseils supplémentaires pour l’utilisation des favicons WordPress
Si vous souhaitez que chaque site de votre réseau multisite ait une favicon unique, le moyen le plus simple d’y parvenir est d’utiliser un plugin favicon comme celui présenté ci-dessus. Bien qu’il soit possible de modifier les fichiers de votre thème pour activer des favicons uniques pour chaque site du réseau, le processus est beaucoup plus compliqué que l’utilisation d’un plugin.
Vous pouvez également envisager d’utiliser un réseau de diffusion de contenu (CDN) pour diffuser vos images de Favicons. Les trois méthodes dont nous avons parlé dans cet article stockent toutes vos images favicon sur votre serveur. Cependant, vous pouvez optimiser votre site encore davantage en utilisant un CDN pour diffuser ces images.
Lorsque vous installez Cloudflare ou un service comme KeyCDN, les navigateurs des visiteurs chargeront votre favicon à partir de votre CDN au lieu du serveur de votre site. Si vous utilisez un plugin comme CDN Enabler, il devrait automatiquement réécrire l’URL de votre favicon WordPress pour fonctionner avec les méthodes ci-dessus.
Résumé
Une favicon WordPress peut contribuer à renforcer la reconnaissance de votre marque et à améliorer l’UX pour les visiteurs de votre site web. Heureusement, vous avez le choix entre plusieurs options, ce qui rend l’ajout d’une favicon simple.
Les trois principales méthodes que vous pouvez utiliser pour ajouter une favicon WordPress à votre site sont les suivantes :
- Utiliser le “Customizer” WordPress pour télécharger une icône de site.
- Installer un plugin, tel que Favicon par RealFaviconGenerator.
- Ajout manuel d’une favicon via un client FTP ou votre gestionnaire de fichiers.
