Comment Ajouter un Favicon à Votre Site Web ?
La plupart des sites Web en ligne ont leurs propres logos et dans la plupart des cas, ils sont utilisés comme favicons Si vous ne savez pas ce qu’est un favicon, voici un exemple :
Mais avant, c’est quoi un favicon ?
C’est la combinaison de deux mots “favorite” et “icon” On peut ainsi le traduire en français par l’ « icône des favoris ». c’est tout simplement l’icône qui s’affiche dans la barre des favoris d’un navigateur internet et généralement c’est logo du site ou bien un logo ou symbole simplifié aui apparait en miniature. Si votre site web n’a pas de logo, vous pouvez en créer un en quelques clics avec notre créateur de logo IA.
Avoir un favicon sur votre site Web est bien sûr beaucoup mieux que de ne rien avoir. Votre site Web paraîtra plus professionnel.
Dans ce tutoriel, nous allons apprendre quelques façons simples sur la façon d’ajouter un favicon à votre site Web.
Sommaire
Ce dont vous aurez besoin
Avant d’ajouter une favicon, assurez vous d’avoir les éléments suivants:
- Une image carrée que vous souhaitez ajouter en tant que favicon de votre site Web
- Accès aux fichiers de votre site Web
Option 1 – Laisser le navigateur obtenir automatiquement votre favicon (pas besoin de changer le code du site)
La plupart des navigateurs détectent automatiquement le fichier favicon.ico situé dans votre dossier de site Web et le définissent comme le favicon de votre site. C’est la façon la plus simple d’ajouter un favicon à votre site.
1. Tout d’abord, vous devez avoir une image aux dimensions carrées (64×64 par exemple) dans n’importe quel format d’image (jpg, bmp, gif, png) afin qu’elle apparaisse sur le navigateur. Bien sûr, les images non carrées fonctionnent également, cependant, ces icônes peuvent ne pas paraître professionnelles.
2. Cette option nécessite la conversion de votre image au format .ico . Il ya beaucoup d’outils en ligne pour faire cela, cependant, dans ce tutoriel, nous utiliserons convertico.com .
3. Sur convertico.com vous verrez un bouton pour sélectionner et envoyer votre image.
4. Cliquez sur le bouton et sélectionnez l’image que vous voulez. Après cela votre image sera automatiquement convertie et apparaîtra sur le côté droit du site. Vous pourrez la télécharger:
5. Téléchargez votre image en cliquant sur Télécharger et enregistrez votre fichier .ico n’importe où sur votre ordinateur.
6. Renommez maintenant le fichier en favicon.ico , car le navigateur ne prendra en compte que ce nom de fichier.
7. La dernière étape consiste à télécharger ce fichier dans le dossier où se trouvent vos fichiers de site Web. Pour l’envoi, vous pouvez utiliser le Gestionnaire de fichiers ou un client FTP . Sur les serveurs basés sur Linux, le dossier est généralement public_html. Cependant, cela peut être différent selon votre hébergeur web. Dans ce cas, mieux vaut consulter le fournisseur d’hébergement.
Lorsque votre fichier favicon.ico aura été envoyé sur votre site Web, le navigateur le récupérera automatiquement et affichera l’image dans le navigateur.
IMPORTANT: Si vous ne voyez pas le nouveau favicon, effacez le cache de votre navigateur et redémarrez-le.
Option 2 – Utiliser une image de votre site et la spécifier dans le code de votre site
Si vous pensez que convertir votre image à un autre format est une perte de temps, vous pouvez utiliser une image de votre site comme favicon de votre site Web.
- Tout d’abord, vous devez avoir une image aux dimensions carrées (64×64 par exemple) dans n’importe quel format d’image (jpg, bmp, gif, png) afin qu’elle apparaisse sur le navigateur. Bien sûr, les images non carrées fonctionnent également, cependant, ces icônes peuvent ne pas paraître professionnelles.
- Envoyez ce fichier sur votre site Web. Sur les serveurs basés sur Linux, le dossier est généralement public_html. Cependant, cela peut être différent selon votre hébergeur. Dans ce cas, mieux vaut consulter le fournisseur d’hébergement.
- Maintenant, vous devez spécifier l’image que vous souhaitez utiliser comme favicon dans le code de votre site Web. Ajoutez cette ligne entre les balises <head></head> dans le code de votre site Web:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
IMPORTANT: Dans type=”image/png” remplacez png par le format de votre image et remplacez favicon.png par votre nom de fichier.
Le code HTML ressemblera à ceci :
Votre image devrait maintenant être affichée comme le favicon de votre site :
IMPORTANT: Si vous ne voyez pas le nouveau favicon, effacez le cache de votre navigateur et redémarrez-le.
Conclusion
Vous avez appris deux façons d’ajouter un favicon à votre site Web. C’est un petit travail dans le processus de développement d’un site Web, mais qui est essentiel pour rendre votre site professionnel.
J’espère vous avoir été utile et nous nous retrouvons bientôt pour un prochain tutoriel ! 😉
Fatima Zahra est une passionnée du marketing digital et de l'IT, elle fait partie de l'équipe du contenu de notre site web pour apporter à nos chers internautes une meilleure expérience client. Ses passes- temps impliquent le blogging et l'apprentissage des langues pour se connecter véritablement au cœur avec les autres.
Commentaires
April 20 2020
Cela ne fonctionne pas pour Blogger