Dans cet article, nous allons discuter des avantages de l’utilisation d’une favicon dans un site WordPress. Nous expliquerons ensuite comment en cr\u00e9er une, et vous pr\u00e9senterons trois options faciles pour l’ajouter \u00e0 votre site.<\/p>\n
Enfin, nous terminerons par quelques conseils et bonnes pratiques concernant les favicons de WordPress. Commen\u00e7ons !<\/p>\n
Les avantages de l’utilisation d’une favicon WordPress<\/h2>\n
Si vous avez d\u00e9j\u00e0 eu trop d’onglets ouverts en m\u00eame temps (coupable !), vous pouvez probablement appr\u00e9cier l’utilit\u00e9 d’une favicon. Une favicon permet aux utilisateurs d’identifier rapidement votre site web lorsqu’ils ont plusieurs onglets ouverts dans leur navigateur :<\/p>\n Selon le nombre d’onglets ouverts, le titre de votre site ne sera pas toujours visible. Par cons\u00e9quent, l’ajout d’une favicon peut contribuer \u00e0 am\u00e9liorer l’UX pour vos visiteurs<\/a>.<\/p>\n Au-del\u00e0 de la reconnaissance de la marque, l’utilisation d’une favicon WordPress peut \u00e9galement rendre votre site plus professionnel et plus cr\u00e9dible. En retour, cela peut contribuer \u00e0 accro\u00eetre la confiance des clients.<\/p>\n En outre, si quelqu’un enregistre votre site web sur l’\u00e9cran d’accueil de son appareil mobile, votre favicon appara\u00eetra sous forme d’ic\u00f4ne. L’utilisation du logo de votre marque ou d’une image similaire peut contribuer \u00e0 rendre votre site plus facile \u00e0 reconna\u00eetre et, de mani\u00e8re g\u00e9n\u00e9rale, \u00e0 cr\u00e9er une esth\u00e9tique coh\u00e9rente.<\/p>\n\n Si vous avez d\u00e9j\u00e0 une favicon que vous \u00eates pr\u00eat \u00e0 utiliser (la plupart des entreprises utilisent leur logo ou une variante de celui-ci), n’h\u00e9sitez pas \u00e0 passer \u00e0 la section suivante. Sinon, nous allons voir comment cr\u00e9er votre image de favicon.<\/p>\n Dans le pass\u00e9, vous deviez utiliser un fichier ICO sp\u00e9cifique 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 \u00e9galement largement pris en charge (lire : JPG vs JPEG<\/a>), mais pas dans toutes les versions d’Internet Explorer, ce qui le rend moins id\u00e9al pour l’utilisation de favicon.<\/p>\n Si vous connaissez bien Photoshop, vous pouvez l’utiliser pour cr\u00e9er manuellement une favicon. Cependant, il est souvent plus facile d’utiliser un outil de base dans le cloud pour cr\u00e9er votre jeu d’ic\u00f4nes \u00e0 partir d’une image existante.<\/p>\n RealFaviconGenerator<\/a> (la version cloud du plugin dont nous parlerons plus tard) est une excellente option car :<\/p>\n Il existe d’autres g\u00e9n\u00e9rateurs de favicons utiles :<\/p>\n Pour utiliser RealFaviconGenerator, commencez par t\u00e9l\u00e9charger l’image que vous souhaitez utiliser en cliquant sur S\u00e9lectionner votre image Favicon<\/strong> :<\/p>\n Sur l’\u00e9cran suivant, vous pouvez configurer des d\u00e9tails sp\u00e9cifiques sur votre ensemble de favicons (si vous le souhaitez). Lorsque vous avez termin\u00e9, faites d\u00e9filer l’\u00e9cran jusqu’en bas et cliquez sur G\u00e9n\u00e9rer vos favicons et votre code HTML<\/strong> :<\/p>\n Sur la page suivante, cliquez sur \u00ab\u00a0Favicon package<\/strong>\u00a0\u00bb pour t\u00e9l\u00e9charger vos images favorites :<\/p>\n Veillez \u00e0 laisser cette page ouverte si vous pr\u00e9voyez d’ajouter manuellement la favicon \u00e0 votre site.<\/p>\n Il existe quelques conseils de conception et de formatage qui m\u00e9ritent d’\u00eatre mentionn\u00e9s et revus avant de cr\u00e9er votre favicon. Le plus important est que la taille recommand\u00e9e pour les favicons est de 512\u00d7512 pixels.<\/p>\n Bien que votre favicon WordPress soit un carr\u00e9 parfait, vous pouvez \u00e9galement utiliser une image rectangulaire et la recadrer avant ou apr\u00e8s l’avoir t\u00e9l\u00e9charg\u00e9e dans WordPress<\/a>. WordPress est dot\u00e9 d’une fonction int\u00e9gr\u00e9e de recadrage des<\/a> ic\u00f4nes de site si vous les ajoutez via le Customizer (que nous vous pr\u00e9senterons sous peu).<\/p>\n De plus, il est important de noter que votre favicon s’affichera sous la forme d’un carr\u00e9 de 16\u00d716px. Par cons\u00e9quent, vous devez choisir une image qui sera belle une fois r\u00e9duite \u00e0 ces dimensions. Bien qu’elle s’affiche \u00e0 cette taille, elle doit avoir une hauteur et une largeur d’au moins 512 pixels.<\/p>\n Enfin, il est judicieux de revoir certaines des directives de Google concernant la<\/a> cr\u00e9ation et l’utilisation des favicons. Cela permettra de s’assurer que votre ic\u00f4ne s’affiche de mani\u00e8re optimale dans les moteurs de recherche<\/a> et les onglets du navigateur.<\/p>\n Une fois que vous avez votre favicon, vous \u00eates pr\u00eat \u00e0 l’ajouter \u00e0 votre site WordPress. Examinons trois m\u00e9thodes que vous pouvez utiliser pour cela.<\/p>\n Depuis la version 4.3 de WordPress, tous les sites WordPress comprennent une fonction d’ic\u00f4ne de site qui permet de t\u00e9l\u00e9charger et de recadrer facilement une image pour l’utiliser comme favicon. Pour la plupart des utilisateurs, il s’agit de la m\u00e9thode la plus simple et la plus rapide pour ajouter une ic\u00f4ne de favicon \u00e0 WordPress.<\/p>\n Tout ce dont vous avez besoin est une image d’au moins 512\u00d7512 pixels. WordPress se chargera du reste du processus. Pour commencer, rendez-vous sur le site Apparence \u2192 Personnaliser<\/strong> dans votre tableau de bord WordPress :<\/p>\n De l\u00e0, naviguez jusqu’\u00e0 l’onglet \u00ab\u00a0Identit\u00e9 du site<\/strong>\u00a0\u00bb :<\/p>\n Ensuite, regardez en bas pour la section Ic\u00f4ne du site<\/strong>, et cliquez sur le bouton S\u00e9lectionner l’ic\u00f4ne du site<\/strong> :<\/p>\n L’interface normale de la m\u00e9diath\u00e8que WordPress s’<\/a>ouvrira. Vous pouvez soit choisir une image existante dans votre m\u00e9diath\u00e8que, soit en t\u00e9l\u00e9charger une nouvelle. Si vous avez utilis\u00e9 RealFaviconGenerator pour cr\u00e9er votre favicon, assurez-vous que le paquet que vous avez t\u00e9l\u00e9charg\u00e9 est d\u00e9compress\u00e9.<\/p>\n Une fois que vous avez une image qui vous pla\u00eet, cliquez dessus et choisissez S\u00e9lectionner dans le<\/strong> coin inf\u00e9rieur droit :<\/p>\n Si votre image n’est pas d\u00e9j\u00e0 un carr\u00e9 parfait (par exemple 512\u00d7512 px), WordPress vous donnera une chance de la recadrer sur l’\u00e9cran suivant.<\/p>\n Utilisez la case pour mettre en \u00e9vidence la partie de l’image que vous souhaitez utiliser pour votre ic\u00f4ne. Vous pouvez voir un aper\u00e7u de l’aspect de votre image recadr\u00e9e sur le c\u00f4t\u00e9 droit de l’interface.<\/p>\n Une fois que vous \u00eates satisfait de l’aspect des choses, cliquez sur Recadrer l’image<\/strong> pour finaliser votre choix :<\/p>\n C’est tout ! Il vous suffit de s\u00e9lectionner \u00ab\u00a0Sauvegarder et Publier<\/strong>\u00a0\u00bb pour faire vivre votre favicon. Si vous souhaitez modifier votre favicon \u00e0 l’avenir, vous pouvez revenir \u00e0 cette interface.<\/p>\n Si vous pr\u00e9f\u00e9rez une solution de plugin \u00e0 la fonctionnalit\u00e9 d’ic\u00f4ne native du site WordPress, vous pouvez utiliser un plugin gratuit populaire appel\u00e9 Favicon par RealFaviconGenerator<\/a> (l’outil bas\u00e9 dans le cloud dont nous avons parl\u00e9 pr\u00e9c\u00e9demment).<\/p>\n Ce plugin est tout aussi simple \u00e0 utiliser que le Customizer WordPress natif. Toutefois, il offre des options de compatibilit\u00e9 suppl\u00e9mentaires pour divers appareils et ic\u00f4nes d’applications. Pour l’utiliser, installez et activez le plugin gratuit<\/a> via votre tableau de bord WordPress<\/a> :<\/p>\n Une fois le plugin activ\u00e9, rendez-vous sur Apparence \u2192 Favicon<\/strong> pour cr\u00e9er votre jeu de favicons. Il vous suffit de s\u00e9lectionner ou de t\u00e9l\u00e9charger une image d’au moins 70\u00d770 px (id\u00e9alement 260\u00d7260 px) :<\/p>\n Apr\u00e8s avoir s\u00e9lectionn\u00e9 votre image, cliquez sur Generate favicon<\/strong>. Lorsque vous s\u00e9lectionnez ce bouton, le plugin vous emm\u00e8nera hors de votre site WordPress vers le site RealFaviconGenerator.<\/p>\n En bas du site, faites d\u00e9filer la page pour s\u00e9lectionner G\u00e9n\u00e9rer vos Favicons et votre code HTML<\/strong> (voir la section pr\u00e9c\u00e9dente). Pendant que l’outil fonctionne, Real Favicon Generator vous renverra \u00e0 votre tableau de bord WordPress :<\/p>\n Apr\u00e8s cela, votre favicon sera mis en place et pr\u00eat \u00e0 fonctionner. Vous pouvez voir un aper\u00e7u de son apparence sur diff\u00e9rents appareils dans l’interface du plugin.<\/p>\n Si vous pr\u00e9f\u00e9rez faire les choses manuellement, il est possible d’ajouter un favicon \u00e0 votre site WordPress via le protocole de transfert de fichiers (FTP)<\/a> ou le gestionnaire de fichiers si votre h\u00e9bergeur utilise cPanel<\/a>.<\/p>\n Si vous optez pour cette m\u00e9thode, vous devrez \u00e9galement cr\u00e9er votre propre image de favicon. Vous pouvez le faire en suivant les \u00e9tapes que nous avons d\u00e9crites plus haut dans cet article.<\/p>\n Pour cette d\u00e9monstration, nous utiliserons le paquet que nous avons cr\u00e9\u00e9 et t\u00e9l\u00e9charg\u00e9 de RealFaviconGenerator, les instructions s’appliquent m\u00eame si vous avez utilis\u00e9 un outil diff\u00e9rent pour cr\u00e9er votre favicon.<\/p>\n Pour ajouter manuellement un favicon WordPress \u00e0 votre site web, vous devrez :<\/p>\n Les fichiers doivent se trouver dans le m\u00eame dossier que vos dossiers wp-admin <\/i>et wp-content. <\/i>Ensuite, prenez le code RealFaviconGenerator qui vous a \u00e9t\u00e9 fourni plus t\u00f4t, et soit\u00a0:<\/p>\n Using the Insert Headers and Footers plugin is optimal because it ensures that you won’t lose your favicon if you change WordPress themes<\/a> down the road.<\/p>\n 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\u00e8me WordPress par la suite<\/a>.<\/p>\n Pour ce faire, installez et activez ce plugin. Ensuite, rendez-vous sur le site \u2192 Insert Headers and Footers<\/strong>, et collez votre code dans la section Scripts in Header<\/strong> :<\/p>\n Veillez \u00e0 enregistrer vos modifications. Ensuite, vous avez termin\u00e9 !<\/p>\n Si vous souhaitez que chaque site de votre r\u00e9seau multisite<\/a> ait une favicon unique, le moyen le plus simple d’y parvenir est d’utiliser un plugin favicon comme celui pr\u00e9sent\u00e9 ci-dessus. Bien qu’il soit possible de modifier les fichiers de votre th\u00e8me pour activer des favicons uniques pour chaque site du r\u00e9seau, le processus est beaucoup plus compliqu\u00e9 que l’utilisation d’un plugin.<\/p>\n Vous pouvez \u00e9galement envisager d’utiliser un r\u00e9seau de diffusion de contenu (CDN)<\/a> pour diffuser vos images de Favicons. Les trois m\u00e9thodes dont nous avons parl\u00e9 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.<\/p>\n Lorsque vous installez Cloudflare<\/a> ou un service comme KeyCDN<\/a>, les navigateurs des visiteurs chargeront votre favicon \u00e0 partir de votre CDN au lieu du serveur de votre site. Si vous utilisez un plugin comme CDN Enabler<\/a>, il devrait automatiquement r\u00e9\u00e9crire l’URL de votre favicon WordPress pour fonctionner avec les m\u00e9thodes ci-dessus.<\/p>\n\n Une favicon WordPress peut contribuer \u00e0 renforcer la reconnaissance de votre marque et \u00e0 am\u00e9liorer 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.<\/p>\n Les trois principales m\u00e9thodes que vous pouvez utiliser pour ajouter une favicon WordPress \u00e0 votre site sont les suivantes\u00a0:<\/p>\n Les favicons sont plus commun\u00e9ment appel\u00e9es les petites ic\u00f4nes qui s’affichent \u00e0 c\u00f4t\u00e9 des noms de sites web dans les onglets des navigateurs. Cependant, bien qu’elles …<\/p>\n","protected":false},"author":103,"featured_media":39079,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[207,205],"topic":[1039,1028],"class_list":["post-39063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpresshelp","tag-wptips","topic-conseils-wordpress","topic-developpement-wordpress"],"yoast_head":"\n![\"La](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/favicon-kinsta-navigateur-chrome.png\")
<\/a>Comment cr\u00e9er une favicon WordPress<\/h2>\n
\n
\n
![\"T\u00e9l\u00e9chargement](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/telechargement-image-source-realfavicongen.jpg\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/ecran-options-generateur-favicon-realfav.jpg\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/ecran-telecharger-paquet-favicons.jpg\")
Conseils pour la cr\u00e9ation d’un favicon WordPress<\/h3>\n
Comment ajouter une favicon WordPress \u00e0 votre site web (3 options faciles)<\/h2>\n
1. Utiliser le personnalisateur WordPress pour t\u00e9l\u00e9charger votre Favicon<\/h3>\n
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/menu-apparence-wordpress.jpg\")
![\"L'option](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/options-identite-site-personnalisateur-wordpress.jpg\")
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/bouton-selectionner-icone-site-customizer-wordpress.jpg\")
![\"S\u00e9lection](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/selection-votre-image-favorite-wordpress.jpg\")
![\"Recadrage](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/recadrage-votreimage-favicons-wordpress.png\")
2. Installation d’un plugin pour ajouter votre favicon WordPress<\/h3>\n
![\"Le](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/plugin-wordpress-favicon-realfavicongen.jpg\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/ecran-ajouter-favicons-wordpress-utilisant-plugin.jpg\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/ecran-previsualiser-comment-favicon-wp-apparaitra.png\")
3. Ajout manuel de votre Favicon via FTP<\/h3>\n
\n
\n
![\"Ajout](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/05\/ajout-code-favicon-aide-plugin-insert-headers-footers.jpg\")
Conseils suppl\u00e9mentaires pour l’utilisation des favicons WordPress<\/h2>\n
R\u00e9sum\u00e9<\/h2>\n
\n