Comment ajouter un favicon WordPress à votre site Web ? (3 méthodes)

Qu'est-ce que WordPress Favicon ?

Les favicons WordPress sont de petites icônes généralement de taille 16 × 16 pixels qui représentent votre marque et sont situées près de votre page que vous pouvez facilement voir dans l'onglet de votre navigateur.

Auparavant, lorsque Google Analytics n'existait pas, les favicons étaient utilisés comme un outil pour déterminer le trafic Web. Mais maintenant, il est bien connu pour améliorer l'UX et la reconnaissance de la marque.

En plus de cela, avoir un WordPress Favicon aide à la reconnaissance de la marque. Puisqu'il peut être facilement visible sur les onglets de votre navigateur, les signets, les archives d'historique, etc. Ils peuvent également être utilisés comme raccourci d'un site Web sur de petits appareils tels que les smartphones ou les onglets. Il contribue à faire gagner du temps aux utilisateurs et leur permet d'identifier facilement le site Web à parcourir sans aucune difficulté.

Pourquoi les avantages d'utiliser WordPress Favicon ?

Outre la reconnaissance de la marque et l'amélioration de l'expérience utilisateur, dont nous avons déjà discuté, l'avantage d'utiliser WordPress Favicon est qu'il garantit au visiteur qu'il navigue sur le bon site Web et qu'il se trouve sur la bonne page.

Supposons que vous ayez ouvert de nombreux onglets dans votre navigateur, à mesure que le nombre d'onglets augmente, le titre de votre site Web sera masqué, comme indiqué ci-dessous :

À ce stade, Favicon vous aide à identifier rapidement votre site Web afin que vous puissiez facilement le basculer. Vous pouvez même demander à vos visiteurs d'ajouter le raccourci du site Web sur l'écran d'accueil de leur navigateur ou sur de petits appareils tels que les smartphones pour un accès facile et rapide à votre site Web.

Après tout, l'un des principaux objectifs de chaque site Web est de fournir une expérience utilisateur unique afin que les visiteurs puissent facilement visiter le site Web encore et encore. C'est ce que WordPress Favicon aide dans votre site Web WordPress, aidant à établir une forte reconnaissance de la marque et à améliorer l'expérience utilisateur au niveau supérieur.

Voyons maintenant comment créer un magnifique favicon WordPress pour votre site Web.

Comment créer un favicon WordPress ?

Pour créer WordPress Favicon, la première chose que vous devez faire est de décider de la taille de WordPress Favicon et des appareils qu'il doit prendre en charge. Cependant, il existe une liste complète des différentes résolutions de favicons disponibles qui prennent en charge divers navigateurs et plates-formes.

Mais dans cet article, nous utiliserons la résolution la plus recommandée et la plus largement acceptée, afin qu'il devienne facile pour vous de créer facilement un WordPress Favicon pour votre site Web sans aucune confusion.

Quelques meilleurs conseils pour créer des favicons WordPress

• La résolution la plus recommandée pour Favicon est de 512 × 512 pixels.
• Choisissez une image qui doit être belle même si elle est réduite à une résolution de 16 × 16 pixels.
• Suivez toujours les directives fournies par Google pour être éligible à un favicon à côté de vos résultats de recherche.
• Vous pouvez choisir des images rectangulaires ou carrées, car vous aurez la possibilité de les personnaliser après ou avant de les télécharger sur WordPress.

Il existe de nombreuses façons de créer un favicon WordPress. Vous pouvez embaucher un designer qui peut mieux comprendre votre marque et concevoir un favicon d'aspect professionnel. Vous pouvez utiliser le plugin WordPress Favicon pour créer un favicon. Vous pouvez même concevoir par vous-même si vous savez utiliser Adobe Photoshop.

En plus de cela, divers outils en ligne sont également disponibles, tels que le générateur de Favicon et Favicon.cc, à l'aide desquels vous pouvez facilement créer un Favicon.

Supposons que vous allez créer un favicon pour votre site Web, xyz.com. Vous ne savez pas comment utiliser Adobe Photoshop et même vous n'avez pas assez de budget pour engager un designer professionnel. Dans ce cas, vous allez utiliser le générateur de Favicon.

tout d'abord, vous devez visiter le site Web et télécharger l'image que vous souhaitez convertir en favicon de votre site Web, comme indiqué dans l'image ci-dessous :

Choisissez les paramètres appropriés, tels que

• Générez des icônes pour les applications Web, Android, Microsoft et iOS
• Générer des icônes uniquement pour 16×16 WordPress Favicon.ico

Cochez les cases et cliquez sur le bouton créer un favicon. La page Web se rechargera dans une page de téléchargement à partir de laquelle vous pourrez facilement télécharger votre fichier zip Favicon comme indiqué ci-dessous :

Cependant, vous pouvez également ajouter manuellement le Favicon à votre site Web en copiant le code comme indiqué ci-dessus et en le collant dans l'en-tête de votre document HTML.

Si vous n'avez choisi aucun outil pour concevoir votre favicon et que vous avez choisi de concevoir vous-même, il y a certains points que vous devez garder à l'esprit avant de commencer à concevoir.

• Gardez le design simple et propre, car il sera rétréci que d'autres, les détails pourraient se perdre.
• Votre conception de favicon doit être de la même couleur, des mêmes graphiques ou polices que le logo principal de votre site Web ou doit représenter votre marque.
• Concevez d'abord votre Favicon dans une résolution plus grande, puis redimensionnez-le selon vos besoins.

Une fois que vous avez fini de concevoir votre favicon, vous devez enregistrer le fichier dans un format de fichier pris en charge. Auparavant, il y avait un type de fichier WordPress Favicon particulier "WordPress Favicon.ico" largement utilisé. Mais maintenant, les choses ont changé et de nos jours, tous les navigateurs Web modernes prennent désormais en charge les formats de fichier PNG, GIF et ICO.

Cependant, les formats de fichiers JPEG sont également disponibles et largement utilisés pour enregistrer les fichiers Favicon. Mais certaines anciennes versions d'Internet Explorer ne les prennent pas en charge. Il est donc préférable de s'en tenir uniquement à ceux qui bénéficient d'un soutien universel.

Comment télécharger WordPress Favicon sur votre site ?

Après avoir conçu et enregistré avec succès votre Favicon, il est temps de télécharger ou d'ajouter un Favicon à votre site WordPress. Vous pouvez le faire de trois manières,

1. Via le personnalisateur WordPress
2. Utiliser un plugin pour ajouter Favicon
3. Ajouter un favicon manuellement

Ajout de Favicon à l'aide de WordPress Customizer

Après la sortie de la version 4.3 de WordPress, une nouvelle option a été introduite grâce à laquelle il devient un moyen simple et rapide pour vous de télécharger et de recadrer des images à utiliser comme Favicon.

La seule chose que vous devez faire est de télécharger une image claire de haute qualité, de préférence de résolution 512X512. Tout d'abord, connectez-vous à votre tableau de bord WordPress > Apparence > personnaliser , comme indiqué ci-dessous :

La page se chargera pour personnaliser la page où vous devrez cliquer sur l'onglet Identité du site comme indiqué ci-dessous :

Après avoir cliqué sur l'onglet Identité du site, vous devez rechercher le bouton "Sélectionner l'icône du site" comme indiqué.

Après cela, une interface WordPress Media apparaîtra à partir de laquelle vous pourrez télécharger des images ou utiliser les images existantes de la médiathèque pour créer votre Favicon. Cliquez maintenant sur le bouton "Sélectionner" situé dans le coin inférieur droit.

Après cela, vous pouvez recadrer ou redimensionner l'image sélectionnée pour l'adapter parfaitement à votre Favicon, continuez en cliquant sur le bouton Recadrer l'image pour la finaliser.

Après avoir terminé toutes les étapes ci-dessus, il est temps d'enregistrer toutes les modifications et d'appuyer sur le bouton de publication pour le mettre en ligne. Cependant, à tout moment si vous n'êtes pas satisfait de votre Favicon, vous devez répéter les étapes ci-dessus pour le changement de WordPress Favicon.

Utilisation d'un plugin WordPress Favicon pour ajouter Favicon à votre site

Si vous recherchez plus d'options autres que la fonctionnalité d'icône de site WordPress par défaut, vous pouvez vous aider des plugins WordPress Favicon. Il existe différents plugins Favicon gratuits et populaires qui ont la même fonctionnalité simple mais vous offrent beaucoup plus d'options de compatibilité et une expérience plus personnalisée.

L'un des plugins WordPress Favicon les plus populaires et les plus utilisés que vous pouvez utiliser est Favicon de RealFaviconGenerator.

Ce plugin a pris la compatibilité trop au sérieux afin que vous puissiez configurer un Favicon réactif compatible avec la majorité des navigateurs Web populaires.

Pour commencer, vous devez d'abord installer le plug-in ReavFaviconGenerator via le tableau de bord WordPress> Plugins> ajouter un nouveau fichier .

Suivi en cliquant sur le bouton Installer et en l'activant. Allez maintenant dans Apparence > Favicon et sélectionnez une image qui doit être au moins 70×70 dans la médiathèque et cliquez sur le bouton Générer Favicon comme indiqué ci-dessous :

Au moment où vous cliquez sur Générer un favicon, vous serez redirigé vers le site Web du plugin où vous devez faire défiler vers le bas et cliquer sur le bouton « Générer vos favicons et votre code HTML ».

Pendant que l'outil fonctionne en arrière-plan, il vous redirigera vers le tableau de bord WordPress. Maintenant, votre favicon est en place et prêt.

Ajouter manuellement un favicon WordPress

Si vous ne savez pas comment accéder au répertoire racine, nous vous recommandons vivement de vous en tenir aux deux méthodes simples ci-dessus. Mais si vous préférez toujours utiliser la méthode manuelle, vous devrez alors le faire via un client FTP ou cPanel fourni par votre fournisseur d'hébergement Web .

Étape 1 : Mais avant cela, vous devez vous rendre sur le site Web Realfavicongenrator. Cliquez sur le bouton ' Sélectionnez votre image Favicon ' pour générer votre Favicon.

Une fois que vous avez téléchargé l'image, vous remarquerez la même interface utilisateur que lors de l'utilisation du plugin RealFaviconGenerator. Personnalisez ou apportez des modifications si vous le souhaitez et faites défiler la page Web et cliquez sur le bouton « Générer vos favicons et votre code HTML » comme indiqué ci-dessous :

Étape 2 : Lorsque vous cliquez sur le bouton Générer vos favicons et votre code HTML , la page passera à la page suivante à partir de laquelle vous pourrez télécharger le package favicon .

Extrayez le package Favicon téléchargé et téléchargez-le dans le répertoire racine de votre site Web via un client FTP ou cPanel fourni par votre client d'hébergement.

Chez WPOven , nous essayons d'offrir une expérience unique à nos utilisateurs et leur confort est notre priorité absolue. Par conséquent, nous fournissons un nouveau gestionnaire de fichiers pour gérer facilement les fichiers et dossiers de votre site.

Présentation de notre nouvel outil de site, le gestionnaire de fichiers.

En utilisant le gestionnaire de fichiers de WPOven, il vous sera facile de gérer les fichiers et dossiers de votre site. Vous pouvez être en mesure d'effectuer facilement les différentes tâches suivantes.

• Installer des plugins et des thèmes WordPress
• Créer, modifier, supprimer, renommer, déplacer et ajouter des fichiers et des dossiers
• Créez des archives avec zip ou décompressez et décompressez des fichiers
• Trier les fichiers
• Rechercher des fichiers et des dossiers
• Télécharger des fichiers

Pour accéder aux fichiers et dossiers de votre site via l'outil Gestionnaire de fichiers, vous devez d'abord vous connecter au tableau de bord WPOven. Sélectionnez ensuite le site sur lequel vous souhaitez travailler.

Sélectionnez ensuite le sous-menu « Outils » et cliquez sur le bouton « Lancer le gestionnaire de fichiers ».

Vous pourrez désormais voir les fichiers et dossiers de votre site dans le gestionnaire de fichiers

Cliquez sur le bouton "Ajouter des fichiers" et sélectionnez les fichiers extraits à télécharger.

Mais vous devez être conscient que le fichier que vous allez mettre doit être dans le dossier racine ou cela ne fonctionnera pas.

Étape 3 : Pour terminer l'ensemble du processus et faire fonctionner les choses correctement, la dernière étape que vous devez faire est d'ajouter l'extrait de code généré par RealFaviconGenerator à la section principale de votre thème WordPress.

Pour ajouter l'extrait de code suivant à la section d'en-tête, vous devez installer et activer le plug-in d'en-têtes et de pieds de page. Accédez ensuite à Paramètres> Insérer des en-têtes et des pieds de page et collez l'extrait de code dans la section d'en-tête, comme indiqué dans l'image ci-dessous, puis cliquez sur Enregistrer.

Après avoir terminé toutes les étapes, votre favicon devrait commencer à apparaître.

Et si WordPress Favicon ne s'affiche pas ?

Si votre WordPress Favicon ne s'affiche pas, même si vous avez suivi toutes les étapes mentionnées ci-dessus, cela peut être dû aux raisons suivantes :

1. Utilisation d'un mauvais type de fichier WordPress Favicon - PNG, GIF et JPEG sont quelques-uns des formats de fichiers image qui sont désormais pris en charge par les navigateurs modernes pour Favicon. Mais ils ne sont pas pris en charge par les anciens navigateurs. En plus de cela, même la majorité des navigateurs Web préfèrent l'utilisation du format de fichier WordPress Favicon.ico, il est donc préférable d'y aller. Formats Ico pour éviter tout problème de compatibilité.
2. Impossible de configurer la taille de favicon appropriée - Une autre raison de ne pas afficher le favicon sur votre site Web peut être l'incompatibilité de la taille de l'image du favicon avec la taille de l'écran de l'appareil. Cela peut être éliminé en utilisant le type de fichier favicon.ico qui stocke plusieurs versions d'une image dans différentes tailles et résolutions. Ainsi, le favicon peut être facilement visible sur n'importe quelle taille d'écran.
3. Plugin WordPress Favicon incompatible avec le thème – Il est également possible que si vous utilisez un plugin générateur WordPress Favicon, il présente des problèmes d'incompatibilité avec le thème actuel que vous utilisez. Il est donc préférable de vérifier les mises à jour du plugin et sa compatibilité avec votre thème actuel et votre version WordPress.

Résumé

Maintenant, vous avez découvert comment WordPress Favicon peut aider à la reconnaissance de la marque et à l'amélioration de l'expérience utilisateur. Et la meilleure partie est que n'importe qui peut facilement créer et implémenter des favicons sur son site Web en suivant toutes les directives et ces étapes simples :

1. Vous pouvez créer facilement des favicons avec de nombreuses options disponibles, telles que l'utilisation d'outils de génération de favicon en ligne, de plugins et avec l'aide de professionnels.
2. Vous pouvez également les ajouter facilement à votre site Web via l'option de personnalisation de WordPress, utiliser un plugin ou le faire manuellement.

Enfin, si vous avez d'autres points précieux à ajouter que nous avons manqué de mentionner dans cet article, veuillez nous en informer dans la section des commentaires ci-dessous :

Questions fréquemment posées