Comment ajouter un favicon sur son site web en HTML ou WordPress

par Tychic Obanda


Programmation web | 3 commentaires



Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici


Salut, Mbote la famille! Aujourd'hui à travers cet article, je vous montre comment ajouter un favicon sur son site web en HTML ou WordPress.

Pour ceux qui ne connaissent pas encore ce que c'est un favicon, pas de panique vous le découvrirez dans cet article.

C'est quoi un favicon

Un favicon est la petite image(souvent le logo) qui apparait dans la barre de titre d'un navigateur web. Cette image n'est rien d'autre que le logo de votre marque ou de votre site en format .ICO comme vous pouvez constater sur l'image suivante :

Les favicon sur Firefox

Sur cette image, vous avez des favicons de differents sites

Certains diront peut-être à quoi bon de convertir notre logo en .ICO tant qu'on a le même logo en .PNG? La réponse est simple : parce que votre favicon doit être de format .ICO et tous les navigateurs web ne prennent en charge que les favicons en .ICO.

Cependant, le format .ICO entre en jeu dans cet article et c'est ce que je vais vous montrer dans cet article.

Importance d'un favicon dans un site web

L'importance majeure d'un favicon dans un site web est l’identification de ce site. Votre logo est l'identité de votre site et personne ne peut me contredire. A chaque fois que les internautes verront le logo de votre site, ils s'en souviendront quelques temps après.

Comme je l'ai dis avant, le favicon apparait dans la barre de titre d'un navigateur web mais ce n'est pas tout. Il apparait aussi dans les favoris du navigateur, dans les pages enregistrées, les historiques, bref, ça joue un grand rôle pour identifier votre site auprès des internautes.

Avec toutes ces explications, j'espère être clair en ce qui concerne le favicon et son importance. Maintenant découvrons comment l'ajouter sur votre site web.

Ajouter un favicon sur son site web

Pour aider plus du monde à comprendre cet article, je vais partir du fait que votre site est codé par vous même et du fait que vous utilisez WordPress. Dans tous les deux cas, il est facile d'ajouter un favicon sur son site web.

Avant de continuer, je tiens à vous dire que vous devez convertir votre logo en .ICO. Si vous ne connaissez pas comment faire, je vous présente Convertir une image, un logiciel en ligne qui permet de convertir des images en .ICO.

Ajouter un favicon en HTML

Le langage HTML nous permet d'ajouter un favicon sur nos pages web et cela se fait grâce à la balise <link />. Cette balise étant une balise orpheline, elle ne sert à rien si on ajoute pas l'attribut rel et href. La balise se place dans le <head> d'une page web. Donc on aura ces lignes de codes.

<link rel="shortcut icon" href="https://www.243tech.com/logo-243tech.ico"/>

<link rel="apple-touch-icon" href="https://www.243tech.com/logo-243tech.ico"/>
<p>Vous pouvez télécharger mon dernier son en <a href="musique-de-merde.mp3" download="super-son.mp3">cliquant sur ce 
lien tavu !</a></p>

Explications

La première ligne contient rel="shortcut icon" qui va juste dire au navigateur que ceci est un favicon et il doit l'afficher dans la barre de titre, dans l'historique, favoris, et autres. Puis on a l'attribut href qui donne le chemin où se trouve l'image en .ICO.

La seconde ligne est un peu différente car son attribut rel contient apple-touch-icon. Cette ligne ne sera comprise par des navigateurs de la compagnie Apple : Safari par exemple.

Donc la première ligne est généraliste car tous les navigateurs peuvent l’exécuter tandis que la seconde, n'est exécutée par des produits Apple.

Ajouter un favicon sur WordPress

Pour ceux qui utilisent WordPress, il est aussi facile d'ajouter le favicon sur votre site mais sans toucher aux codes HTML.

Ajouter favicon sur WordPress

Pour le faire, rendez-vous dans Tableau de bord -> Apparence -> Personnaliser. Une fois arrivé sur Personnaliser, cliquez sur Paramètre général ou General Settings -> Site Logo/Title/Tagline.

Arrivé sur Site Logo/Title/Tagline, en bas vous verrez Icône du site et sélectionnez une image.

Ne confondez pas l’icône du site au logo car si vous vous arrêtez sur Logo, cela ne sera pas considéré comme votre favicon.

A la fin, enregistrez vos modifications et cliquez sur Publier. Et c'est fait!

C'est donc tout pour cet article. Si vous avez des préoccupations sur ce sujet, n’hésitez pas de laisser votre commentaire et je serai là pour vous répondre.


Tychic ObandaJe suis Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web et de vivre de cette passion.




Laisser un commentaire
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _
654

3 commentaires

TSER
TSER

NUL

Répondre

Football Jersey
Football Jersey

Please let me know if you're looking for a writer for your weblog. You have some really good articles and I think I would be a good asset. If you ever want to take some of the load off, I'd really like to write some articles for your blog in exchange for a link back to mine. Please blast me an email if interested. Cheers!
football jersey http://www.izkole.com/football%20jersey-ID1065.html

Répondre

Nb Classic 574
Nb Classic 574

Hello, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam responses? If so how do you stop it, any plugin or anything you can advise? I get so much lately it's driving me mad so any support is very much appreciated.
nb classic 574 http://nb.shoeswebs.com/K-nb-classic-574.html

Répondre

Recherche

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 170 articles publiés, 7647 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...