WordPress : Comment ajouter une favicon
Une favicon c’est quoi et à quoi ça sert ?
La favicon, oui favicon est bien un mot féminin, « je l’ai appris récemment et je vais m’efforcer dans ce tutoriel de le féminiser » est une petite icône qui s’affiche en haut du titre de votre site ainsi que tout les titres de chaque pages et articles dans la barre de navigation :
Au premier abord on pourrait penser que ce n’est pas très utile, c’est tout petit et c’est quelque chose qui s’affiche en dehors de mon site WordPress…
Si vous pensez qu’une favicon n’est pas indispensable je vais évoquer 2 raisons qui vous ferons changer d’avis.
– Premièrement c’est un repère pour l’utilisateur qui vient régulièrement sur votre site, effectivement la favicon est tout petit mais elle est en faite bien mémorisable pour vos visiteurs fidèles. Tout comme le logo ou le titre de votre site la favicon est un repère rapide, c’est en faite comme une identité, elle représente votre site.
– Deuxièmement la favicon peu servir de repère lorsque l’on ouvre beaucoup de site, il arrive souvent que l’on navigue sur 5 ou 6 sites voir plus en même temps. Du coup nous avons plein d’onglets ouverts dans notre navigateur et le seul moyen d’identifier facilement et rapidement un site ou une page d’un site est tout simplement de rechercher la favicon.
Comment mettre une favicon sur votre site WordPress
Suivant la version de WordPress que vous avez il y a 2 solutions simple pour mettre en place notre favicon.
- WordPress version 4.3 ou supérieur
- WordPress version inférieur à 4.3
- Pour débutant | WordPress version inférieur à 4.3 | Sans passer par le FTP
WordPress version 4.3 ou supérieur
Depuis la version 4.3 de WordPress il est enfin possible d’ajouter une favicon directement depuis le panneau d’administration.
Avant cela, avez vous une favicon pour votre site ?
Pour créer votre favicon vous pouvez utiliser Gimp ou photoshop, il est important que votre icône soit d’une forme parfaitement carré est d’une taille minimum de 512px par 512px.
Une fois connecté direction la page Personnaliser Menu > Apparence/Personnaliser :
Vous allez arriver sur la page d’outil de personnalisation rapide des principaux éléments de votre site.
Un nouveau menu est présent sur la gauche, cliquez sur l’onglet Identité du site.
C’est ici que nous pouvons importer notre favicon, cliquez sur le bouton choisir un fichier.
WordPress version inférieur à la version 4.3
Si vous n’avez donc pas encore mis à jour WordPress en version 4.3 ou supérieur nous allons devoir ajouter notre favicon avec un bout de code.
Vous devez redimensionner votre icône en 16x16px et envoyer via ftp à la racine.
Nous allons ajouter notre code dans le fichier header de notre site WordPress entre les balises <head> </head>.
<link rel="icon" href="https://creer-un-site.com/favicon.png" type="image/x-icon"/> <link rel="shortcut icon" href="https://creer-un-site.com/favicon.png" type="image/x-icon"/>
Changez l’url de l’icône par la votre.
Pour les débutants voici la façon de procéder sans passer par un FTP
Envoyer votre image depuis la page Médias > Menu Médias/Ajouter :
Importer votre icône au format 16px et récupérez ensuite l’adresse url de votre icône en la copiant CTRL+C :
Ensuite nous allons donc ouvrir notre fichier header qui se trouve sur la page Editeur > Menu Apparence/Editeur.
Nous allons coller ce code entre les balises <head> </head> :
<link rel="icon" href="https://creer-un-site.com/favicon.png" type="image/x-icon"/> <link rel="shortcut icon" href="https://creer-un-site.com/favicon.png" type="image/x-icon"/>
Remplacer l’url du favicon par celle de votre icône que je vous ai demandé de copier.
N’oubliez pas de cliquer sur le bouton Mettre à jour le fichier.
Pensez à mettre régulièrement à jour WordPress pour obtenir les dernières nouveautés et surtout en terme de sécurité.
Pas de commentaires