Comment ajouter un favicon à votre site WordPress

Favicon, ou icône favorite, est une petite image à côté d'un titre de page sur un onglet de navigateur. Cette icône de site joue un rôle essentiel dans l'établissement de l'identité de votre site Web.

Si vous possédez un site Web professionnel, envisagez d'utiliser des favicons si vous ne l'avez pas déjà fait. Ici, nous allons discuter de l'importance de celui-ci et des éléments à considérer lors de la préparation d'un. Nous vous montrerons également trois méthodes pour ajouter un favicon à votre site Web WordPress.

Pourquoi devriez-vous utiliser un favicon ?

Pour démontrer l'importance des favicons, jetez un œil à la capture d'écran ci-dessous.

Comme vous pouvez le voir, chaque onglet a des icônes différentes qui différencient les pages Web que vous visitez. Lorsque vous avez plusieurs onglets sur votre navigateur, les favicons vous aident à identifier ces pages. En conséquence, cela crée une meilleure expérience utilisateur.

Un favicon n'est pas seulement utile dans les onglets du navigateur. Lorsque les utilisateurs ajoutent un raccourci de page à leur écran d'accueil mobile ou à leur bureau, le favicon s'affiche à l'écran. En plus de cela, les favicons peuvent fonctionner de la même manière qu'un logo. Lorsque les gens le verront, ils reconnaîtront instantanément votre site Web et votre marque.

Préparer votre favicon

Le moyen le plus rapide et le plus simple de créer un favicon est d'utiliser des générateurs de favicon. Pas besoin d'avoir des connaissances techniques car la plupart d'entre eux fournissent des images prêtes à l'emploi que vous n'avez qu'à peaufiner un peu.

Pensez également à utiliser le logo de votre marque, mais assurez-vous qu'il peut être recadré en une icône carrée. Il doit également être suffisamment simple pour que vous puissiez le voir clairement malgré sa petite taille. Utilisez des programmes d'édition d'images comme Photoshop, DesignWizard ou GIMP pour modifier et redimensionner votre logo.

Pour le format de l'image, il est recommandé d'utiliser un fichier ICO car la plupart des navigateurs le prennent en charge. Cependant, tous les logiciels de retouche photo ne vous permettent pas de créer des fichiers ICO. Par conséquent, il est préférable d'utiliser des générateurs de favicons en ligne qui offrent cette option. Ou, enregistrez votre image au format PNG et utilisez un convertisseur ICO en ligne. Habituellement, la taille doit être de 16 x 16 pixels.

Si vous utilisez la fonctionnalité d'icône de site de WordPress 4.3, vous n'avez pas à vous soucier de convertir votre image au préalable. Vous pouvez maintenant télécharger n'importe quel fichier image en tant que favicon . Quoi qu'il en soit, assurez-vous toujours qu'il peut être consulté dans n'importe quel navigateur après l'avoir téléchargé.

3 façons d'ajouter un favicon à votre site WordPress

Il existe trois méthodes pour ajouter un favicon à votre site Web, choisissez l'option que vous préférez.

Option 1 : Personnalisateur WordPress

Pour les utilisateurs de WordPress 4.3, l'utilisation de la fonction Icône du site est le moyen le plus pratique et le plus recommandé d'ajouter votre favicon.

Préparez une image carrée d'au moins 512 pixels en hauteur et en largeur. Le fichier ne doit pas dépasser 128 Mo. Si vous avez une image rectangulaire, ils vous permettront de la recadrer au fur et à mesure que vous téléchargez votre favicon .

Une fois votre image prête, suivez ces étapes :

1. Ouvrez votre tableau de bord WordPress, accédez à Apparence et sélectionnez Personnaliser.

2. Recherchez un onglet contenant l'icône du site. La plupart des thèmes l'auraient dans l'identité du site, mais certains renomment l'onglet en titre du site, nom de la marque, logo et en-tête du site, etc.

3. Sélectionnez l'icône du site et choisissez une image dans votre médiathèque ou téléchargez un nouveau fichier.

4. Vous serez dirigé vers l'éditeur d'image de recadrage. Ajustez la position et les proportions comme vous le souhaitez.

5. Félicitations ! Vous devriez avoir un nouveau favicon. S'il n'est pas encore apparu, WordPress vous recommande de vider votre cache et de redémarrer votre navigateur.

Option 2 : utiliser des plugins

Si vous n'avez pas mis à jour votre WordPress, vous pouvez utiliser des plugins pour ajouter un favicon .

Certains plugins vous offrent plus de contrôle sur l'apparence de votre favicon sur les appareils autres que les ordinateurs de bureau. Par exemple, Favicon de RealFaviconGenerator vous donne la possibilité de personnaliser l'apparence de votre icône dans différents systèmes d'exploitation.

Pour utiliser le plugin, procédez comme suit :

1. Allez dans Plugins et cliquez sur Ajouter un nouveau sur votre tableau de bord WordPress.
2. Recherchez Favicon par RealFaviconGenerator, puis installez et activez le plugin.
3. Sélectionnez Apparence et cliquez sur Favicon dans le tableau de bord. Téléchargez une image carrée de plus de 70 x 70 pixels. Idéalement, l'image doit être de 260 x 260 pixels ou plus.
4. Vous serez redirigé vers une page où vous pourrez définir l'apparence de votre favicon dans iOS, Android Chrome, Windows et Safari. Cliquez ensuite sur Générer vos favicons et votre code HTML.

En dehors de ce plugin, vous pouvez utiliser All in One Favicon. Le plugin vous permet de définir différentes favicons pour le back-end et le front-end. De cette façon, vous ne serez pas confus lorsque votre site Web et votre tableau de bord seront tous deux ouverts.

Option 3 : Installation manuelle via le client FTP

Une autre méthode consiste à télécharger manuellement votre favicon sur votre site Web WordPress. Pour cela, vous devez connecter votre site Web à un client FTP comme FileZilla. Votre icône peut être au format ICO ou PNG et doit être nommée favicon.

Il est également fortement recommandé de créer un thème enfant pour utiliser cette méthode. De cette façon, vos modifications de code ne seront pas supprimées lors d'une nouvelle mise à jour de thème.

Lorsque votre site est connecté, suivez ces étapes :

1. Téléchargez votre fichier favicon dans votre dossier de thème actuel via votre client FTP. Si vous utilisez un thème enfant, téléchargez-le dans ce dossier.
2. Ajoutez le même fichier à votre répertoire racine. Il doit se trouver dans le même dossier que votre wp-content et wp-admin. Cela permet de garantir que vos favicons peuvent être consultés dans les lecteurs de flux.
3. Sur votre tableau de bord WordPress, accédez à Apparence et cliquez sur Éditeur de thème.
4. Maintenant, sélectionnez le fichier d'en-tête de thème et ajoutez ce code ci-dessous à l'intérieur de la balise si vous avez un fichier ICO :

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Remplacez la partie après href= jusqu'à /favicon.ico par le chemin d'accès à votre répertoire racine. Cela ressemblerait à ceci :

<link rel="shortcut icon" href="<http://www.yourdomainname.com/favicon.ico" />

Si vous avez un fichier PNG, remplacez simplement le format de fichier. Ensuite, mettre à jour le fichier.

5. Actualisez votre site Web. Si cela fonctionne, vous devriez déjà avoir un nouveau favicon.

Pour toutes les méthodes, n'oubliez pas de vérifier l'apparence de votre favicon sur les appareils mobiles. Ouvrez votre site Web à partir de votre navigateur mobile et ajoutez le site à votre écran d'accueil.

Bien qu'ils soient petits, les favicons peuvent augmenter la reconnaissance de la marque et créer une meilleure expérience utilisateur. Vous pouvez utiliser des générateurs de favicon en ligne ou tout logiciel de retouche d'image de votre choix pour créer votre propre favicon. Si vous en avez déjà un, ajoutez-le simplement à votre site Web WordPress en utilisant l'une des trois méthodes ci-dessus. Bonne chance!

En savoir plus Plugins et thèmes populaires pour les sites Web WordPress LMS