Sommaire
Un “favicon” est la petite image qui accompagne un site web dans votre navigateur. Lorsque vous ajoutez quelque chose à vos favoris ou à vos marque-pages, cette petite icône est le graphique utilisé. D’où son nom : “favori” plus “icône” égale “favicon”.
Si un site web n’en possède pas, une page blanche ou une autre image par défaut est utilisée.
À bien des égards, la favicon est comme un logo. Il s’agit d’une image que de nombreuses personnes associent à une marque ou à un site Web. Par exemple, rien qu’en regardant la petite image, je peux dire quelle icône mène à quel site Web dans ma barre de tâches dans Chrome… aucun mot n’est nécessaire.
Dans ce tutoriel, je vais vous montrer comment ajouter le favicon à votre site WordPress.
Création de la favicon
Un favicon est plus qu’une simple image. Vous ne pouvez pas télécharger n’importe quel fichier JPG ou PNG et espérer que les navigateurs fassent la différence. Les favicons sont en fait des fichiers .ICO. Pour cette raison, vous avez besoin d’une application qui crée ces types de fichiers spécifiques.
Utilisation de Favicon.cc
Favicon.cc est un outil gratuit basé sur le Web qui vous permet de créer des favicons dans des dimensions de 16×16 pixels. Il s’agit d’un système gratuit qui vous permet de contrôler la couleur de chaque pixel ainsi que de télécharger et de convertir des graphiques existants. Il ne nécessite pas de connexion ou d’inscription et est assez simple à utiliser pour une icône rapide.
Utilisation de Favicon App Generator
L’un des aspects qui distingue Favicon & App Generator des autres est que vous pouvez télécharger plus que le simple fichier ICO. En fait, cette application Web vous donne tous les fichiers d’image nécessaires pour divers systèmes. Par exemple, vous pouvez télécharger les versions Android, iOS et Microsoft app du graphique dans un seul fichier zip en une seule fois.
Utilisation de Photoshop
Il est possible de créer des fichiers ICO dans Photoshop à l’aide d’un plugin. Cet outil vous donne simplement la possibilité d’enregistrer des fichiers ICO pour les utiliser dans le développement Web. Si vous disposez du logiciel, cela peut valoir la peine d’installer le complément et de créer le vôtre.
Ajout du Favicon à WordPress
L’ajout d’un favicon à WordPress est un processus rapide et facile dans la plupart des cas. En fait, vous n’aurez peut-être pas besoin de faire autre chose que de télécharger une image. Dans certains cas, tout ce dont vous avez besoin est un fichier JPG ou PNG et WordPress fera le reste.
Utilisation d’un thème
De nombreux thèmes disponibles sur WordPress vous donnent la possibilité de créer des favicons à partir des images de votre logo téléchargées. En utilisant le logo comme une extension de l’image de marque, cela élimine beaucoup de travail de préparation. Par exemple, le thème “ColorMag” prendra votre logo et le transformera automatiquement en favicons.
Vous devrez installer des thèmes WordPress qui offrent cette possibilité.
Pour trouver des thèmes qui accentuent l’utilisation du favicon, cliquez sur la fonction Apparence de WordPress. Votre liste de thèmes sera l’écran par défaut.
Cliquez sur le bouton “Ajouter un nouveau” en haut.
Entrez “favicon” dans la barre de recherche et recherchez un thème qui vous plaît. Vous obtiendrez une liste de tous les thèmes dont la description contient le mot “favicon”. Malheureusement, cette liste n’inclut pas tous les thèmes dotés de la fonction “favicon”. Certains développeurs n’incluent pas les descriptions les plus détaillées de leurs thèmes.
Une fois que vous en avez trouvé un qui vous plaît, installez et activez le thème en le survolant avec votre souris.
La plupart des thèmes qui vous donnent accès aux logos et aux favicons le font par le biais du Customizer de WordPress. Pour accéder à cet outil, cliquez sur le bouton “Personnaliser” de votre thème activé.
Dans le Customizer, vous voulez trouver toute fonction qui est liée au logo ou au favicon. Comme chaque développeur est différent, vous devrez peut-être creuser un peu pour la trouver. Dans le thème ColorMag, par exemple, le contrôle du logo et de l’icône se trouve dans “Site Identity”.
Utilisation d’un plugin
L’une des raisons pour lesquelles WordPress est si populaire est sa polyvalence. En utilisant des plugins, vous pouvez créer presque tous les types de sites Web que vous souhaitez. Dans cet exemple, je regarde le plugin “Favicon by RealFaviconGenerator”.
Cet outil offre un large éventail d’options pour créer des images iconiques. Il prend également en compte les différents types de matériel mobile sur plusieurs types de navigateurs et d’applications. Il s’agit d’un outil flexible qui optimise ce que la favicon peut faire pour votre site Web.
Allez dans la zone des plugins de WordPress et cliquez sur “Ajouter un nouveau”.
Recherchez “Favicon by RealFaviconGenerator”. Cliquez pour installer et ensuite activer le plugin.
Allez dans la zone Apparence et cliquez sur “Favicon”.
Dans cet écran, vous pouvez utiliser toute image d’au moins 70×70 pixels pour créer des favicons pour tous les matériels et navigateurs les plus populaires. Vous pouvez utiliser la recommandation 260×260 car elle a plus de chances de conserver les détails lorsqu’elle est réduite à différentes tailles.
C’est ici que vous pouvez télécharger votre logo, si vous en avez un, ou toute autre image représentant votre site ou votre entreprise.
Ce plugin n’est qu’un parmi d’autres. Il peut être beaucoup plus facile d’utiliser cette technique au lieu de chercher un thème parfait qui a l’option logo/icône. Les plugins tels que celui-ci fonctionnent avec tous les thèmes disponibles.
Ajout manuel de l’icône
L’ajout manuel de la favicon est un peu plus complexe que l’utilisation de thèmes ou de plugins. Il faut télécharger l’image directement sur votre site Web et modifier un petit bout de code.
Pour ce faire, connectez-vous au répertoire racine de votre site Web à partir du gestionnaire de fichiers de cPanel.
Cliquez sur le bouton “Upload” et ajoutez votre fichier favicon.ico dans le répertoire.
Maintenant, vous devez insérer cette ligne de code dans l’en-tête de votre site Web :
Vous pouvez le faire à partir de l’éditeur de WordPress ou en modifiant les fichiers de votre thème dans le gestionnaire de fichiers. Pour ce tutoriel, je vais rester simple et utiliser WordPress pour ajouter le code.
Dans cet exemple, j’utilise le plugin “Insert Headers and Footers”. Celui-ci vous donne accès à l’ajout d’éléments dans les zones d’en-tête et de pied de page de votre site Web sans avoir à fouiller dans les répertoires ou les fichiers de thème. C’est un plugin facile à utiliser que vous pouvez installer gratuitement.
Pourquoi le favicon est-il important ?
Comme pour toute marque, une image d’identification peut grandement contribuer à la reconnaissance du client. Même le plus simple des logos suscite chez les gens certaines attentes en matière de produits et de services. La favicon est une extension de cette connexion, surtout dans un monde où Internet est roi.
Beaucoup de gens, comme moi, utilisent des icônes au lieu de texte pour organiser la barre de signets dans Google Chrome. En fait, je le fais aussi dans Firefox. Essentiellement, je supprime le texte qui accompagne la favicon et je me contente de l’image lorsque j’ai besoin de quelque chose. Cela me permet de stocker plus de choses dans la barre de favoris qui sont immédiatement visibles.
Sans la favicon, il est plus difficile pour les utilisateurs de reconnaître ou de faire confiance à une marque. Ce serait comme avoir une entreprise sans logo. Comme les études montrent que les gens sont plus sensibles aux stimuli visuels, il est logique d’ajouter une favicon pour attirer les masses.
Créer une apparence de site Web unique
La favicon est un autre moyen de créer un site WordPress unique. Ce petit graphique est plus vital pour le marketing et l’image de marque que certains propriétaires de sites ne le pensent. Rendez votre domaine vraiment identifiable et offrez une apparence qui sépare votre contenu de la concurrence. Même la plus petite image peut faire toute la différence en matière de reconnaissance et d’image de marque.
Qu’avez-vous ajouté à WordPress pour faire ressortir votre site Web ? Avez-vous un thème préféré qui facilite l’ajout de favicons et de logos ?
