Les favicons sont le plus souvent connus comme la petite icône qui s’affiche à côté du nom d’un site Web dans un onglet du navigateur. Et même si c’est de là qu’ils proviennent, les favoris sont aussi utilisés dans d’autres endroits comme les signets du navigateur, les boutons de l’écran d’accueil iOS, et plus encore. Ci-dessous, vous pouvez voir un exemple d’un site avec un favicon vs. un site sans favicon :

Un exemple de favicon WordPress

Un exemple de favicon WordPress

Dans cet article, nous allons vous donner trois façons différentes d’ajouter une favicon WordPress à votre site. Si vous savez déjà quelle méthode vous préférez, vous pouvez utiliser les liens ci-dessous pour accéder directement à une section spécifique :

Comment ajouter un Favicon WordPress au site via le WordPress Customizer

Depuis WordPress 4.3, tous les sites WordPress incluent une fonction d’icône de site qui facilite le téléchargement et le recadrage d’une image à utiliser comme favicon.

Pour la plupart des utilisateurs, c’est la méthode la plus simple pour ajouter une icône favicon à WordPress. Tout ce dont vous aurez besoin, c’est d’une image d’au moins 512×512 pixels. WordPress se chargera du reste du processus.

Pour commencer, allez sur Apparence → Personnaliser dans votre tableau de bord WordPress :

Comment accéder au WordPress Customizer

Comment accéder au WordPress Customizer

De là, naviguez jusqu’à l’onglet Identité du site :

Comment trouver l'onglet Identité du site

Comment trouver l’onglet Identité du site

Ensuite, regardez au bas de la page pour la section Icône du site et cliquez sur le bouton Sélectionner une image :

Choisir une image pour votre favicon

Choisir une image pour votre favicon

L’interface normale de la médiathèque WordPress s’ouvre. Vous pouvez soit choisir une image existante dans votre médiathèque WordPress, soit en télécharger une nouvelle. Rappelez-vous – WordPress recommande d’utiliser une image d’au moins 512x512px.

Une fois que vous avez une image que vous aimez, cliquez sur l’image et choisissez Sélectionner dans le coin inférieur droit :

Sélectionner votre image préférée

Sélectionner votre image préférée

Si votre image n’est pas déjà un carré parfait (par exemple 512×512 px), WordPress vous donnera la possibilité de recadrer votre image sur l’écran suivant. Utilisez la case pour mettre en surbrillance la partie de l’image que vous voulez utiliser pour votre icône.

Vous pouvez voir un aperçu de l’aspect de votre image rogné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 :

Recadrer votre image préférée

Recadrer votre image préférée

Et c’est tout ! Tout ce que vous avez à faire est de cliquer sur Enregistrer et publier pour mettre en ligne votre favicon.

Si vous souhaitez modifier votre favicon à l’avenir, vous pouvez revenir à cette interface et cliquer sur Modifier l’image :

Comment changer l'image favicon à une date ultérieure

Comment changer l’image favicon à une date ultérieure

Comment ajouter un Favicon WordPress au site avec un plugin

Si vous préférez une solution de plugin à l’icône native du site WordPress, vous pouvez utiliser un plugin gratuit populaire appelé Favicon by RealFaviconGenerator. Le plugin est aussi simple à utiliser que le Customizer natif de WordPress, mais il offre des options de compatibilité utiles supplémentaires pour divers périphériques et applications.

Pour l’utiliser, installez et activez le plugin gratuit via votre tableau de bord WordPress :

Comment installer le plugin RealFaviconGenerator

Comment installer le plugin RealFaviconGenerator

Une fois le plugin activé, allez sur Apparence → Favicon pour créer votre jeu de favicon.

Tout ce que vous avez à faire est de sélectionner ou de télécharger une image d’au moins 70×70px (idéalement 260×260px) :

Comment ajouter un favicon à WordPress

Comment ajouter un favicon à WordPress

Une fois que vous avez sélectionné votre image, cliquez sur Generate favicon. Après avoir cliqué sur ce bouton, le plugin vous conduira hors de votre site WordPress vers le site Web RealFaviconGenerator.

Sur le site Web de RealFaviconGenerator, faites défiler vers le bas et cliquez sur Générer vos Favicons et votre code HTML :

Générez vos favicons

Générez vos favicons

Après une courte période, pendant que l’outil fonctionne, Real Favicon Generator vous renvoie à votre tableau de bord WordPress. Votre favicon est maintenant configuré et prêt à partir. Vous pouvez voir un aperçu de son aspect sur différents périphériques dans l’interface du plugin :

Voir un aperçu en direct de vos favicons

Voir un aperçu en direct de vos favicons

Comment ajouter un Favicon WordPress au site manuellement

Si vous préférez faire les choses manuellement, il est également possible d’ajouter manuellement une favicon à votre site WordPress via FTP et quelques petits extraits de code. Si vous utilisez cette méthode, vous devrez également créer votre propre image favorite parce que vous n’aurez plus l’aide de WordPress.

Comment créer une image Favicon

Dans le passé, vous deviez utiliser un fichier ICO spécifique pour votre favicon. Mais de nos jours, tous les navigateurs modernes supportent l’utilisation des fichiers ICO, PNG, et GIF pour votre favicon. JPEG est largement supporté (lire : JPG vs JPEG), mais pas dans toutes les versions d’Internet Explorer, ce qui le rend moins idéal pour une utilisation comme favicon.

Si vous êtes familier avec Photoshop, vous pouvez utiliser Photoshop pour créer manuellement un favicon. Cela dit, il est souvent plus facile d’utiliser un outil de base basé dans le cloud pour créer votre jeu d’icônes favicon à partir d’une image existante.

Real Favicon Generator (la version en nuage du plugin utilisé dans la section précédente) est une excellente option car :

  • Il crée des icônes d’applications ainsi que des favicons
  • Il vous donne les icônes favicon sur les deux formats PNG et ICO
  • Vous pouvez personnaliser votre favicon après avoir téléchargé votre image
  • Tout ce que vous avez à faire est de coller le code que le plugin vous donne

D’autres bons générateurs de favicon sont :

  • cc – vous permet de créer un favicon à partir de zéro ainsi que de télécharger une image existante.
  • Favicon-Generator – fonctionne de la même manière que Real Favicon Generator

Pour utiliser Real Favicon Generator, commencez par télécharger l’image que vous voulez utiliser pour votre favicon :

Comment télécharger l'image source du favicon

Comment télécharger l’image source du favicon

Sur l’écran suivant, vous pouvez configurer des détails spécifiques sur votre jeu de favicon (si vous le souhaitez).

Lorsque vous avez terminé, ou si vous ne voulez pas faire de changements, faites simplement défiler vers le bas et cliquez sur Générer vos Favicons et votre code HTML :

Générez vos favicons

Générez vos favicons

Comment installer WordPress Favicon

Sur la page suivante, cliquez sur le bouton Favicon Package pour télécharger vos images favicon. Aussi, assurez-vous de laisser cette page ouverte parce que vous aurez besoin du code pour ajouter vos favicons :

Télécharger le pack de favicons

Télécharger le pack de favicons

Connectez-vous à votre site WordPress via FTP et téléchargez le contenu de votre package de Favicons (favicons.zip) dans le dossier racine de votre site WordPress :

Télécharger le favicon via FTP

Télécharger le favicon via FTP

Les fichiers doivent être dans le même dossier que vos dossiers wp-admin et wp-content.

Ensuite, prenez le code que Real Favicon Generator vous a fourni et soit vous :

  • Utilisez un plugin comme Insert Headers and Footers pour l’ajouter à l’en-tête de votre thème.
  • Le collez directement dans la section <head> de votre thème en éditant le fichier header.php de votre thème.

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 les en-têtes et pieds de page d’insertion. Ensuite, allez sur Paramètres → Insert Headers and Footers et collez le code dans la section Scripts de la partie Header :

Ajouter le code favicon à l'en-tête de WordPress

Ajouter le code favicon à l’en-tête de WordPress

Assurez-vous d’enregistrer vos modifications et vous avez terminé.

Astuce 1 : Favicons uniques sur un WordPress MultiSite

Si vous voulez que chaque site de votre réseau Multisite ait un favicon unique, le plus simple est d’utiliser un plugin favicon comme le plugin décrit ci-dessus. Vous pouvez aussi utiliser le plugin Heroic Favicon Generator, à condition de faire un petit ajustement manuel de son code.

Bien qu’il soit possible d’éditer les fichiers de votre thème pour permettre des favicons uniques pour chaque site réseau, le processus est beaucoup plus compliqué qu’avec un plugin.

Astuce 2 : Utilisez un réseau de diffusion de contenu (CDN) pour diffuser les images Favicon

Comme les trois méthodes décrites ci-dessus stockent vos images favorites sur votre serveur, vous pouvez optimiser davantage votre site en utilisant un réseau de diffusion de contenu (CDN) pour diffuser vos images.

En installant Cloudflare ou un service comme KeyCDN, vous pourrez demander à vos visiteurs de charger votre favicon depuis votre CDN au lieu de votre serveur. Si vous utilisez un plugin comme CDN Enabler, il devrait automatiquement réécrire votre URL de favicon WordPress pour fonctionner avec les méthodes ci-dessus.

10
Partages