Aujourd’hui, je vous explique comment ajouter un Favicon facilement à votre site WordPress.
Dessinez votre Favicon
Pour commencer, il vous faut cette fameuse Favicon, certains sites web vous permettent d’en créer rapidement, mais de mon côté, je suis passé directement par Photoshop.
Pour cela, j’ai créé un nouveau document, de 260 pixels par 260 pixels, avec 144 pixels par pouces (cette dernière valeur n’a que très peu d’importance). Le point important est de mettre le fond en « Transparent » afin de ne pas avoir de « blanc » aux endroits où vous ne mettez rien. Dans mon cas, il n’y a pas de blanc autour du rond grâce au fond transparent.
Dessinez ensuite le Favicon comme vous le souhaitez, ici, je suis resté très sobre, un disque de couleur foncée (correspondant aux couleurs de mon thème WordPress) et les lettres « clo » en gris avec la police d’écriture du site. Histoire de garder la même identité visuelle !
Une fois votre Favicon pour votre site WordPress dessiné, il vous faut l’enregistrer au format PNG. J’insiste vraiment sur le format PNG, car il vous permet de garder les effets de transparence.
Comment ajouter le Favicon à WordPress ?
Si vous êtes développeur, ou que vous n’avez pas peur de mettre les doigts dans le code de votre thème, vous pouvez suivre les étapes suivantes :
- Renommez le fichier « favicon.png » en « favicon.ico » .
- Téléchargez le fichier sur votre site en FTP ou à partir de la page d’administration.
- Copiez l’adresse Web de votre fichier précédemment téléchargé
- Ajoutez dans le header.php de votre thème (Dans Apparence -> Editeur) le code suivant entre les balises
<head></head>:
<link rel= "icon" href= "https://cloriou.fr/wp-content/uploads/2015/10/Favicon.ico" type= "images/x-icon" />
Si, comme moi, vous n’aimez pas trop bidouiller le code de votre site, alors téléchargez et installez le plug-in Favicon by RealFaviconGenerator.
Rendez-vous ensuite, à partir de votre espace d’administration, dans Apparence puis dans Favicon .
Cliquez sur « Sélectionner dans la Bibliothèque de médias » si votre Favicon est déjà téléchargée sur votre site. Cliquez ensuite sur « Générer le Favicon » .
Vous êtes redirigés sur le site http://realfavicongenerator.net/ qui vous permet de personnaliser le favicon. En effet, il vous permet de créer un favicon pour les personnes qui souhaitent ajouter votre site en raccourci sur leur smartphone iOS, Android ou Windows Phone !
Personnalisez comme vous le souhaitez les différentes favicons, que ça soit pour iOS, Android, Mac OS X, ou Windows.
Si votre site est déjà en ligne, et si vous souhaitez que les utilisateurs qui reviennent puissent récupérer votre nouveau Favicon WordPress, sélectionnez la case « The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one. »
Cliquez enfin sur « Generate your Favicons and HTML Code »
Vous êtes redirigé vers la page d’administration de votre site WordPress et vous avez dorénavant un superbe Favicon !
J’espère que cette astuce vous a aidé. N’hésitez pas à la partager autour de vous, et à m’indiquer dans les commentaires comment vous avez fait pour ajouter votre Favicon sur WordPress !
A bientôt sur cloriou.fr
