3 façons simples d'ajouter un favicon WordPress en 2022 (Guide convivial pour les débutants)

Prêt à apprendre tout ce que vous voudriez savoir sur votre favicon WordPress ?

Si vous n'êtes pas familier, le favicon de votre site est cette petite icône qui apparaît sur l'onglet de votre navigateur Web. Par exemple, voici à quoi ressemble notre favicon chez HeroThemes :

Vous verrez également que certaines personnes appellent les favicons une "icône de site". Ne vous inquiétez pas, c'est la même chose.

Dans cet article, vous allez apprendre :

• Pourquoi devriez-vous vous soucier de quelque chose de petit comme votre favicon WordPress
• Comment créer un favicon pour votre site WordPress (et quelle taille et format utiliser)
• Comment ajouter un favicon à WordPress en utilisant trois méthodes différentes

Pourquoi vous devriez vous soucier de votre favicon WordPress

Je sais je sais. Une petite image qui n'apparaît que dans l'onglet du navigateur ne va probablement pas faire ou défaire votre entreprise. Mais il y a deux raisons pour lesquelles vous devriez prendre du temps pour créer un favicon pour WordPress.

Tout d'abord, l'utilisation d'un favicon contribue à l'image de marque et permet à votre site de se démarquer dans les navigateurs de vos visiteurs. Par exemple, quels onglets retiennent votre attention dans la capture d'écran ci-dessous ?

C'est HeroThemes et Twitter, non ?

C'est important parce que les gens aiment avoir plusieurs onglets ouverts ( non, vous n'êtes pas le seul à accumuler des onglets ! ). Même en 2009, les gens avaient en moyenne 3 onglets et plus, avec plus chez les jeunes. Et même si je ne trouve pas de données plus récentes, je suis prêt à parier que la moyenne a augmenté, pas baissé !

Au-delà de la marque de votre site dans les navigateurs et de sa mise en valeur, votre favicon aide également les utilisateurs mobiles. Si un utilisateur enregistre votre site Web sur son écran d'accueil, votre favicon apparaîtra sous forme d'icône sur de nombreux appareils .

Lorsque vous considérez à quel point il est facile d'ajouter un favicon WordPress, ces avantages valent vraiment la peine de prendre quelques minutes de votre journée.

Comment créer une image favicon de la bonne taille et du bon format

Avant de pouvoir suivre les instructions étape par étape dans les sections suivantes pour savoir comment ajouter un favicon à WordPress, vous devrez… avoir réellement l'image que vous souhaitez utiliser pour votre favicon !

Et cela signifie que vous devez connaître les bonnes dimensions et le bon format d'image pour votre favicon.

Avec la gamme d'appareils, cela est devenu plus compliqué qu'auparavant. Mais pour faire face à cette complexité, il existe également des outils qui prendront un favicon de démarrage et le formateront automatiquement pour tous les différents appareils.

Alors pour créer votre favicon, voici tout ce dont vous avez besoin :

• Une image carrée. La taille optimale du favicon WordPress est de 512 × 512 px, bien que quelque chose de plus petit comme 260 × 260 px soit toujours acceptable. Toutes les méthodes que je vais vous montrer redimensionneront au besoin .
• Une image png , qui est votre meilleur pari pour le web moderne.

Pour créer réellement votre image, vous pouvez utiliser un outil comme Adobe Photoshop ou GIMP. Ou, vous pouvez également utiliser quelque chose comme Favicon.io pour générer une image favicon à partir de texte ou d'un emoji.

Si vous avez un logo haute résolution qui traîne, la chose la plus simple à faire est simplement de saisir une version carrée de votre logo ( c'est ce que nous utilisons chez HeroThemes ).

Comment ajouter un favicon à WordPress (3 méthodes)

Une fois que vous avez votre fichier image, vous êtes prêt à ajouter ce favicon à votre site WordPress.

Ci-dessous, je vais vous montrer trois façons différentes d'ajouter votre favicon à WordPress. Chaque méthode est un peu différente , cependant.

Pour vous aider à choisir celui qui convient à votre site, voici un bref aperçu :

• Ajoutez un favicon avec les fonctionnalités de base de WordPress - c'est très simple et vous permet d'ajouter votre favicon via le personnalisateur WordPress. Le seul inconvénient est qu'il n'ajoutera pas de formats favicon pour tous les appareils. Pour la plupart des sites, c'est tout à fait correct, cependant .
• Plugin WordPress RealFaviconGenerator – cela facilite l'ajout d'un favicon pour tous les appareils . Le seul inconvénient potentiel est qu'il vous oblige à garder le plugin actif, ce que certaines personnes pourraient ne pas aimer.
• Méthode manuelle RealFaviconGenerator - au lieu d'utiliser le plugin, vous pouvez utiliser le site Web de RealFaviconGenerator et ajouter manuellement le code. Cette méthode élimine le besoin de garder un plugin actif, mais devient un peu plus compliquée car vous devrez ajouter un extrait de code à l'en-tête de votre thème.

Si vous êtes débutant, je vous recommande de vous en tenir à l'une des deux premières méthodes. Mais les utilisateurs avancés pourraient préférer la troisième méthode.

Comment ajouter un favicon à WordPress avec la fonctionnalité de base

Celui-ci est vraiment simple car il utilise une fonctionnalité de base de WordPress.

Pour commencer, rendez-vous dans Apparence → Personnaliser dans votre tableau de bord WordPress pour accéder au WordPress Customizer :

Une fois que vous êtes dans WordPress Customizer, cliquez sur l'option Site Identity :

Ensuite, recherchez la section Icône du site et cliquez sur Sélectionner une image pour télécharger votre image favicon :

Cela ouvrira la bibliothèque multimédia WordPress régulière où vous pourrez télécharger votre image comme vous le feriez normalement.

Une fois que vous avez téléchargé votre image, cliquez sur le bouton Sélectionner :

À partir de là, WordPress vous donnera la possibilité de recadrer votre image favicon, ainsi que des aperçus en direct de votre image en tant que navigateur et application.

Ajustez le recadrage approprié, puis cliquez sur Recadrer l'image :

Et tu as fini! Assurez-vous de cliquer sur l'option Publier en haut de WordPress Customizer et votre favicon devrait être en ligne.

Comment utiliser un plugin WordPress Favicon (couvre plus d'appareils)

Maintenant, je vais vous montrer comment utiliser un plugin WordPress favicon pour obtenir le même effet.

Encore une fois - la différence entre cette méthode et la précédente est que le plugin ajoutera des favicons optimisés pour plus d'appareils. Il vous offre également une interface qui vous permet de personnaliser l'apparence de votre favicon pour différents appareils.

Vous pourrez créer des favicons personnalisés pour :

• iOS
• Android
• Téléphone Windows
• etc.

Vous n'en avez pas nécessairement besoin - il s'agit plutôt de couvrir les cas extrêmes.

Pour suivre cette méthode, vous devrez installer le plugin gratuit Favicon by RealFaviconGenerator.

Une fois que vous avez activé le plugin, allez dans Apparence → Favicon . Utilisez le bouton Sélectionner dans la médiathèque pour télécharger ou sélectionner votre favicon dans la médiathèque WordPress.

Cliquez ensuite sur Générer un favicon :

Après cela, le plugin vous amènera sur un site extérieur où vous pourrez modifier l'apparence de votre favicon pour différents appareils.

Une fois que vous avez terminé ces ajustements, faites défiler vers le bas et cliquez sur le bouton Générer vos favicons et votre code HTML :

Et une fois que vous aurez cliqué dessus, vous serez redirigé vers votre tableau de bord WordPress et devriez voir un message de réussite, ainsi qu'un aperçu de votre favicon sur différents appareils :

C'est ça! Vous avez terminé. Assurez-vous simplement de garder le plugin actif - sinon, vos favicons disparaîtront.

Comment ajouter manuellement un favicon à WordPress en utilisant le même outil RealFaviconGenerator

Encore une fois, avec la méthode de plugin ci-dessus, vous devrez laisser le plugin actif pour continuer à utiliser vos favicons.

Si cela vous pose problème, vous pouvez également utiliser le même outil pour tout faire manuellement.

Le résultat final est exactement le même, il vous suffit de télécharger manuellement les images via FTP et d'ajouter du code à la section <head> de votre site.

Je vais diviser celui-ci en étapes parce que c'est un peu plus compliqué…

Étape 1 : Générez votre package Favicon

Pour commencer, rendez-vous sur le site Web RealFaviconGenerator et cliquez sur Sélectionnez votre image favicon pour télécharger votre image favicon :

Une fois que vous avez téléchargé votre image, vous verrez la même interface du plugin et vous pourrez parcourir et personnaliser votre favicon pour différents appareils.

Comme avec le plugin, faites défiler vers le bas et cliquez sur le bouton Générer vos favicons et votre code HTML lorsque vous avez terminé vos réglages :

Étape 2 : Téléchargez votre package Favicon sur votre site Web

Sur l'écran suivant, cliquez sur le bouton pour télécharger votre package Favicon :

Ensuite, vous devrez extraire ce package et le télécharger dans le dossier racine de votre site en utilisant FTP ( si vous n'êtes pas sûr de ce qu'est FTP, je vous recommande de vous en tenir à la méthode du plugin de la section précédente ).

Assurez-vous de mettre tous les fichiers dans le dossier racine - cela ne fonctionnera pas autrement.

Étape 3 : Ajoutez un extrait de code à <head> de votre thème

Pour finir, vous devrez ajouter l'extrait de code de RealFaviconGenerator à la section <head> de votre thème WordPress :

Ou, vous pouvez ajouter l'extrait de code suivant au fichier functions.php dans votre thème enfant ( vous devez utiliser un thème enfant ) :

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

L'une ou l'autre méthode est bonne !

Une fois que vous avez fait cela, vous avez terminé et votre favicon devrait commencer à fonctionner.

Ajoutez votre favicon WordPress aujourd'hui

Cela ne prend que quelques minutes pour ajouter votre favicon et offrir à vos visiteurs une expérience plus marquée.

Et voici la grande chose:

Une fois que vous avez ajouté un favicon à votre site WordPress, vous n'aurez plus jamais à y penser !

Avez-vous d'autres questions sur la façon d'ajouter un favicon WordPress ? Faites-le nous savoir dans les commentaires et nous vous aiderons !