Comment Créer un Favicon Personnalisé dans WordPress

Que tu sois en train de créer un site web pour un podcast ou un blog personnel, le rendre mémorable et facile à utiliser peut être un défi. Lorsque tu configures les paramètres de ton site, il est essentiel d’établir ton identité de marque et de commencer à construire une solide réputation.

Une manière simple de créer une présence en ligne professionnelle est en concevant un favicon personnalisé. Lorsque tu ajoutes ton logo aux onglets du navigateur et aux résultats de recherche, tu peux augmenter la reconnaissance de marque et les taux de clics (CTR).

Dans cet article, nous te donnerons un aperçu des favicons et pourquoi tu devrais envisager d’en ajouter un à ton site WordPress. Ensuite, nous te montrerons comment créer un favicon personnalisé. Commençons !

Une Introduction Aux Favicons

Un favicon, ou ‘icône favorite’, est une image de 16×16 pixels qui aide à identifier ta marque sur ton contenu web. Il a été créé en 1999 pour aider à différencier les pages web mises en favoris.

Actuellement, tu peux voir des favicons en haut d’un onglet de navigateur au-dessus de la barre d’adresse. Ici, les visiteurs verront une petite icône de marque :

Si un site web n’a pas de favicon désigné, les utilisateurs verront à la place une icône de navigateur générique. C’est pourquoi de nombreux propriétaires de sites utilisent des favicons pour rendre leur contenu plus reconnaissable.

Tu pourrais aussi voir des favicons dans les favoris, ton historique de navigateur, ou parmi les résultats de recherche Google. Souvent, cette icône montre aux utilisateurs qu’ils sont sur le point de cliquer sur une ressource crédible et bien connue.

Super. Tu es à jour sur les favicons. Maintenant, nous allons te montrer comment en créer un.

Comment Créer Un Favicon WordPress Personnalisé (4 Méthodes)

Pour commencer à créer ton premier favicon, tu devras concevoir l’image que tu vas utiliser. Pour ce processus, nous recommandons d’utiliser Canva :

Canva est un logiciel de retouche d’images adapté aux débutants qui permet de créer un logo à partir de zéro. Alternativement, tu peux parcourir ses modèles de logo.

Peu importe l’option que tu choisis, assure-toi de concevoir une image carrée. Les favicons s’affichent généralement en 16×16 pixels, mais WordPress exige une hauteur et une largeur d’au moins 512px.

Après avoir conçu ton logo en tant que favicon, il est temps de l’ajouter à ton site web ! Voici quelques-unes des meilleures méthodes.

1. Ajouter Un Favicon Avec Le Personnalisateur WordPress 

Depuis WordPress 4.3, tu peux utiliser la fonctionnalité Site Icon pour créer un favicon personnalisé. C’est l’un des moyens les plus simples pour télécharger un favicon car tu n’auras pas besoin de créer un fichier favicon.ico ou de modifier ton fichier de modèle.

Trouve l’image que tu souhaites utiliser comme favicon. Ensuite, rends-toi dans Apparence > Personnaliser sur ton tableau de bord WordPress :

Cela ouvrira le personnalisateur WordPress. Ensuite, navigue vers Settings > Site Identity:

Ici, tu verras une section étiquetée Icône du site. Clique sur Sélectionner l’icône du site et télécharge ton image favicon :

Recadre l’image selon tes besoins. Sur le côté droit, tu peux voir un aperçu du favicon :

Après avoir terminé, clique sur Publier.

Mise à jour pour WordPress 6.5+

À partir de WordPress 6.5, il y a une toute nouvelle méthode (et plus facile que jamais) pour ajouter des Favicons dans WordPress. Il suffit de naviguer vers le Tableau de bord de WordPress, passer la souris sur Paramètres, et cliquer sur Général.

De là, tu verras un paramètre en haut pour Icone du Site. Il te suffit de cliquer sur la boîte Choisir une Icône de Site pour télécharger ton propre favicon.

Taille recommandée : Rapport carré, au moins 512px x 512px.

2. Ajouter Un Favicon Avec Un Créateur De Page WordPress

De nombreux créateurs de pages populaires peuvent ajouter un favicon personnalisé selon un processus similaire. Par exemple, Elementor dispose d’une fonctionnalité Icônes personnalisées dans ses Paramètres globaux.

Tout d’abord, tu auras besoin de t’inscrire à Elementor Pro. Cela te permettra de télécharger un favicon personnalisé.

Ensuite, ouvre n’importe quel article ou page avec l’éditeur Elementor :

Rends-toi dans Paramètres du site > Identité du site. Ici, tu verras le nom de ton site et sa description. Il y aura également des options pour télécharger un logo de site et un favicon de site :

Passe la souris sur la boîte grise sous Site Favicon et clique sur Choose Image. Télécharge ton favicon et sélectionne Insert Media :

Après avoir téléchargé ton favicon, descends en bas de l’écran et clique sur Update.

3. Installe Un Plugin De Favicon

Une des façons les plus simples d’ajouter un favicon à ton site web est avec un plugin de favicon. Cette option pourrait être la meilleure pour les personnes qui n’ont pas accès au Customizer ou qui recherchent une option plus simple que la programmation.

Pour ce processus, nous recommandons d’utiliser Favicon Rotator. Ce plugin WordPress gratuit te permet d’ajouter une image de favicon en quelques minutes :

Installe et active le plugin. Maintenant, navigue jusqu’à Appearance > Favicon:

Tu remarqueras deux options différentes pour créer des icônes personnalisées. Browser Icon place le favicon dans les onglets du navigateur. L’icône Touch Icon personnalise les favicons pour les appareils mobiles :

Cliquez sur Ajouter une icône à côté de Icône du navigateur. Téléchargez votre image de favicon :

Si tu as besoin de rogner, de tourner ou de retourner l’image, clique sur Edit Image. Ici, tu peux modifier les dimensions et les paramètres de la miniature selon tes besoins :

Quand tu as terminé, sélectionne Ajouter une icône de navigateur. Ensuite, clique sur Enregistrer les modifications.

4. Générer Manuellement Un Favicon

Si ton site web utilise une version ancienne de WordPress ou un thème ancien, tu pourrais avoir besoin d’ajouter manuellement un favicon en utilisant du code. Cette méthode peut également être avantageuse lorsque tu souhaites limiter le nombre de plugins tiers sur ton site.

Tout d’abord, télécharge ton fichier image dans un outil comme Real Favicon Generator. En utilisant ce logiciel, tu peux générer le codage personnalisé de ton favicon :

Commence par cliquer sur Sélectionne ton image Favicon. Après avoir téléchargé ton fichier image, Real Favicon Generator créera un aperçu de ton favicon :

Sur cette page, tu peux cocher la case qui dit Utiliser l’image originale telle quelle si elle te plaît telle qu’elle est. Cependant, tu peux également continuer à modifier la taille de l’image, la couleur de fond et le rayon de fond comme nécessaire.

Après avoir personnalisé l’image, défile jusqu’en bas de la page et clique sur Génère tes Favicons et ton code HTML:

Cela te montrera le code pour ton favicon. Télécharge le package Favicon et copie le HTML :

Avant de commencer à modifier ton code, nous te recommandons de sauvegarder ton site web. Cette étape assure que tu ne perdras aucune information importante en raison d’erreurs de codage.

Ensuite, ouvre ton tableau de bord cPanel. Bien que chaque fournisseur d’hébergement ait son propre tableau de bord, tu devras trouver le bouton Upload Files.

Avec DreamHost, ce bouton se trouve dans le coin inférieur gauche :

Ensuite, télécharge ton fichier favicon. Dans certains cas, cela permettra aux navigateurs de mettre à jour ton favicon sans ajouter de code. Cependant, tu pourrais devoir mettre à jour ton fichier header.php.

Pour faire cela, ouvre wp_content et clique sur le fichier header.php. Ensuite, sélectionne Edit:

Colle le code du favicon provenant du Générateur de favicon. Ensuite, tu devras peut-être vider le cache de ton navigateur ou redémarrer ton navigateur pour voir le nouveau favicon sur ton site web.

Éléments d’une Marque Forte

Un bon logo peut être la clé pour rendre ton entreprise unique et mémorable. Lorsque tu transformes ce logo en favicon, tu peux t’assurer que les visiteurs en ligne reconnaissent ton contenu de marque.

Pour récapituler, voici les meilleures méthodes pour ajouter un favicon à ton site web WordPress :

1. Ajoute un favicon en utilisant le Personnalisateur WordPress.
2. Utilise un constructeur de pages tel que Elementor.
3. Installe un plugin de favicon comme Favicon Rotator.
4. Code manuellement un favicon.

As-tu besoin d’aide pour construire ton site web à partir de zéro ? Chez DreamHost, nous offrons des Services professionnels qui incluent un design web personnalisé. Nos designers professionnels peuvent t’aider à créer un site web original, ainsi tu n’as pas à te soucier des petits détails comme les favicons !