👉 RENDEZ-VOUS ICI POUR DECOUVRIR LE TUTORIEL COMPLET : ps://vm.tiktok.com/ZMLVFCfGW/
🔹Qu’est ce qu’un favicon ? « Le terme favicon désigne une icône informatique chargée de symboliser un site Internet. Le terme est issu de la contraction des mots favori et icône. (…) La favicon est ce petit dessin, ce symbole, qui apparaît à la gauche de l’URL dans la barre d’adresse pour certains sites Web.» Source : https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203281-favicon-definition/ C’est assez simple à paramétrer, on va voir ça ensemble.
🔹Comment paramétrer mon favicon dans mon code HTML5 ? Il suffit de placer cette ligne de code <link type= » »sizes= » » rel= » » href= » »> dans votre <head></head> de l’éditeur de code de votre site web. Vous pouvez le mettre au début ou à la fin du <head></head>, personnellement je préfère le placer à la fin pour y voir plus clair. Chaque élément de cette ligne de code correspond à une information, on décortique ça ici :
- Le link type est un attribut qui permet à votre code de reconnaitre à quel type de ressource il a affaire, comme on veut paramétrer une image. Il faut indiquer que c’est une image en png « image/png » . Attention, le format n’est pas toujours en PNG, il peut également être enregistré sous le format PNG., SVG., ou encore JPEG.
- La taille des favicon est toujours de 16 pixels, il faudra donc inscrire dans l’attribut sizes= »16×16″
- L’attibut rel indique au code à quel type d’élément il a faire, ici on lui indique qu’il s’agit d’un icone et non d’une bannière par exemple : rel= »icon ».
- Et enfin le href=, est sûrement l’information la plus importante puisqu’il permet à votre code de trouver votre image qui est enregistrée dans vos dossiers. C’est une sorte de google maps pour votre éditeur de code. Là l’écriture de cette information dépend de l’emplacement de votre icone, mais les éditeurs de code comme Visual Studio Code que j’utilise permettent de sélectionner facilement l’emplacement en reconnaissant le type de balise que vous utilisez.
Voilà ce que ca donne pour moi : <head> <link type= »image/png » sizes= »16×16″ rel= »icon » href= »images/icons8-entretien-16.png »> </head>
➡️Parce que c’est toujours plus clair en vidéo, retrouvez moï sur mon tiktok @roxxyfly pour plus de vidéo tuto et conseil en #tech #UXdesign #coding.
🔹Rendez-vous également sur mes réseaux sociaux :
◽️ Twitter : https://twitter.com/roxxyflyy
◽️ LinkedIn : https://www.linkedin.com/in/roxane-van-cauwenberghe/
◽️ Instagram : @roxane.vancauwenberghe