Personnaliser l’ic\u00f4ne du site (favicon)<\/title>\n <link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<\/head>\n<body>\n\n\n\n<p><strong>Personnaliser l’ic\u00f4ne du Site en HTML : favicon<\/strong> est une t\u00e2che simple mais importante pour renforcer l’identit\u00e9 visuelle de votre site web. Un favicon, ou \u00ab\u00a0icone de favori\u00a0\u00bb, est une petite image montr\u00e9e dans l’onglet du navigateur \u00e0 c\u00f4t\u00e9 du titre du site. Apprenons comment ajouter et personnaliser un favicon pour votre site web \u00e0 l’aide d’HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Personnalisation du Favicon en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586680459?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"avail-icon-guide\">Guide R\u00e9cent : Personnaliser Votre Favicon<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Acc\u00e9dez notre guide complet pour seulement <strong id=\"price\">10\u20ac<\/strong> au lieu de <del>20\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/favicon-customization\/101\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Acc\u00e9der au Guide<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Guide sp\u00e9cial \u00e0 <strong id=\"priceMobile\">10\u20ac<\/strong> au lieu de <del>20\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/favicon-customization\/101\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Acc\u00e9der au Guide<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n});\n<\/script>\n\n\n\n<p>Un favicon sert \u00e0 distinguer visuellement votre site lorsqu’il est ouvert dans un navigateur. Le fichier favicon est typiquement dans un format .ico, mais il peut aussi \u00eatre en .png ou .svg. Voyons comment ajouter un favicon \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Pr\u00e9parer Votre Favicon<\/h3>\n\n\n\n<p>Pour commencer, vous devez cr\u00e9er une ic\u00f4ne. Vous pouvez utiliser des outils en ligne comme <a href=\"https:\/\/favicon.io\/\" target=\"_blank\" rel=\"noopener\">Favicon.io<\/a> pour g\u00e9n\u00e9rer un favicon \u00e0 partir d’une image. T\u00e9l\u00e9chargez votre favicon et sauvegardez-le dans votre r\u00e9pertoire de projet. Nous allons nommer le fichier <code>favicon.ico<\/code> pour cet exemple.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter le Favicon \u00e0 Votre Code HTML<\/h3>\n\n\n\n<p>Une fois votre favicon pr\u00eat et plac\u00e9 dans le r\u00e9pertoire de votre projet, vous devez ajouter un lien dans votre fichier HTML. Placez le code suivant \u00e0 l’int\u00e9rieur de la balise <code><head><\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Votre Site Web<\/title>\n <link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<\/head>\n<body>\n \n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser d’Autres Formats et R\u00e9solutions pour le Favicon<\/h3>\n\n\n\n<p>Il est courant de fournir plusieurs versions de votre favicon pour diff\u00e9rentes r\u00e9solutions et contextes. Par exemple, voici comment inclure des versions de favicon en .png et .svg :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"favicon-32x32.png\">\n<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"favicon-16x16.png\">\n<link rel=\"icon\" type=\"image\/svg+xml\" href=\"favicon.svg\">\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester Votre Favicon<\/h3>\n\n\n\n<p>Apr\u00e8s avoir ajout\u00e9 les liens de favicon dans votre fichier HTML, sauvegardez vos modifications et rechargez votre site web dans le navigateur. Vous devriez voir votre favicon appara\u00eetre dans l’onglet du navigateur. Si vous ne le voyez pas, videz le cache du navigateur ou essayez d’ouvrir votre site dans un autre navigateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Articles et Outils Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour plus d’informations sur les favicons et sur l’optimisation de votre site web, consultez les articles suivants :<\/p>\n<ul>\n <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/link#attr-rel\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur l’\u00e9l\u00e9ment <code><link><\/code><\/a><\/li>\n <li><a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">RealFaviconGenerator<\/a> – Outil de cr\u00e9ation de favicons multi-r\u00e9solution<\/li>\n <li><a href=\"https:\/\/web.dev\/learn\/html\/favicons\/\" target=\"_blank\" rel=\"noopener\">Guide complet sur les favicons par Web Dev<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Personnaliser l’ic\u00f4ne du site (favicon) est une t\u00e2che simple qui peut faire une grande diff\u00e9rence dans la reconnaissance de votre site web. En suivant les \u00e9tapes de ce tutoriel, vous pouvez facilement ajouter et configurer un favicon pour donner une identit\u00e9 visuelle distinctive \u00e0 votre site. Continuez \u00e0 explorer notre blog pour plus de <a href=\"https:\/\/wikiform.fr\/codespace\/element-textuels-html-guide-complet\">tutoriels sur le d\u00e9veloppement web<\/a>. Pour apprendre davantage sur la cr\u00e9ation et l’optimisation des \u00e9l\u00e9ments de votre site web, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">formation HTML5 et CSS3 de d\u00e9butant \u00e0 expert<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS - Offre Sp\u00e9ciale 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">Fonctionnement d’un navigateur web<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">Bases du langage HTML<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er votre premi\u00e8re page HTML<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">Tout savoir sur l’\u00e9l\u00e9ment HTML <head><\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" target=\"_blank\" rel=\"noopener\">Explication des \u00e9l\u00e9ments de titre HTML<\/a>\n\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Personnaliser l’ic\u00f4ne du site (favicon) Personnaliser l’ic\u00f4ne du Site en HTML : favicon est une t\u00e2che simple mais importante pour renforcer l’identit\u00e9 visuelle de votre…<\/p>\n","protected":false},"author":2,"featured_media":2754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5485"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485\/revisions"}],"predecessor-version":[{"id":5486,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485\/revisions\/5486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2754"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5485,"date":"2024-08-27T21:00:42","date_gmt":"2024-08-27T21:00:42","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/personnaliser-icone-site-html-favicon\/"},"modified":"2024-08-27T21:00:45","modified_gmt":"2024-08-27T21:00:45","slug":"personnaliser-icone-site-html-favicon","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/personnaliser-icone-site-html-favicon\/","title":{"rendered":"11.16 Personnaliser l’ic\u00f4ne du Site en HTML : favicon"},"content":{"rendered":"\n\n\n \n \n Personnaliser l’ic\u00f4ne du site (favicon)<\/title>\n <link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<\/head>\n<body>\n\n\n\n<p><strong>Personnaliser l’ic\u00f4ne du Site en HTML : favicon<\/strong> est une t\u00e2che simple mais importante pour renforcer l’identit\u00e9 visuelle de votre site web. Un favicon, ou \u00ab\u00a0icone de favori\u00a0\u00bb, est une petite image montr\u00e9e dans l’onglet du navigateur \u00e0 c\u00f4t\u00e9 du titre du site. Apprenons comment ajouter et personnaliser un favicon pour votre site web \u00e0 l’aide d’HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Personnalisation du Favicon en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n <iframe src=\"https:\/\/player.vimeo.com\/video\/586680459?dnt=1&fullscreen=0&pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n \n <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"avail-icon-guide\">Guide R\u00e9cent : Personnaliser Votre Favicon<\/h2>\n <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Acc\u00e9dez notre guide complet pour seulement <strong id=\"price\">10\u20ac<\/strong> au lieu de <del>20\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/favicon-customization\/101\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Acc\u00e9der au Guide<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n <\/div>\n\n \n <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Guide sp\u00e9cial \u00e0 <strong id=\"priceMobile\">10\u20ac<\/strong> au lieu de <del>20\u20ac<\/del> !<\/p>\n <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/favicon-customization\/101\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Acc\u00e9der au Guide<\/a>\n <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n var iframe = document.getElementById('vimeoPlayer');\n var player = new Vimeo.Player(iframe);\n var isPopupDisplayed = false;\n\n player.on('play', function() {\n if (!isPopupDisplayed) {\n player.on('timeupdate', function(data) {\n if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n \/\/ Pause the video and display the popup\n player.pause().then(function() {\n if (window.innerWidth > 768) {\n document.querySelector('.desktop-popup').style.display = 'block';\n } else {\n document.querySelector('.mobile-popup').style.display = 'block';\n }\n fetchPriceAndUpdatePopup();\n isPopupDisplayed = true;\n });\n }\n });\n }\n });\n\n function fetchPriceAndUpdatePopup() {\n fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n .then(response => response.text())\n .then(html => {\n var parser = new DOMParser();\n var fetchedDoc = parser.parseFromString(html, 'text\/html');\n var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n document.getElementById('price').textContent = price;\n document.getElementById('priceMobile').textContent = price;\n document.querySelector('.desktop-popup del').textContent = originalPrice;\n document.querySelector('.mobile-popup del').textContent = originalPrice;\n })\n .catch(error => console.error('Error fetching the price:', error));\n }\n\n function closePopup() {\n document.querySelector('.desktop-popup').style.display = 'none';\n document.querySelector('.mobile-popup').style.display = 'none';\n player.play(); \/\/ Allows resuming the video only after closing the popup\n }\n});\n<\/script>\n\n\n\n<p>Un favicon sert \u00e0 distinguer visuellement votre site lorsqu’il est ouvert dans un navigateur. Le fichier favicon est typiquement dans un format .ico, mais il peut aussi \u00eatre en .png ou .svg. Voyons comment ajouter un favicon \u00e9tape par \u00e9tape.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Pr\u00e9parer Votre Favicon<\/h3>\n\n\n\n<p>Pour commencer, vous devez cr\u00e9er une ic\u00f4ne. Vous pouvez utiliser des outils en ligne comme <a href=\"https:\/\/favicon.io\/\" target=\"_blank\" rel=\"noopener\">Favicon.io<\/a> pour g\u00e9n\u00e9rer un favicon \u00e0 partir d’une image. T\u00e9l\u00e9chargez votre favicon et sauvegardez-le dans votre r\u00e9pertoire de projet. Nous allons nommer le fichier <code>favicon.ico<\/code> pour cet exemple.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter le Favicon \u00e0 Votre Code HTML<\/h3>\n\n\n\n<p>Une fois votre favicon pr\u00eat et plac\u00e9 dans le r\u00e9pertoire de votre projet, vous devez ajouter un lien dans votre fichier HTML. Placez le code suivant \u00e0 l’int\u00e9rieur de la balise <code><head><\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Votre Site Web<\/title>\n <link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<\/head>\n<body>\n \n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser d’Autres Formats et R\u00e9solutions pour le Favicon<\/h3>\n\n\n\n<p>Il est courant de fournir plusieurs versions de votre favicon pour diff\u00e9rentes r\u00e9solutions et contextes. Par exemple, voici comment inclure des versions de favicon en .png et .svg :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\">\n<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"favicon-32x32.png\">\n<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"favicon-16x16.png\">\n<link rel=\"icon\" type=\"image\/svg+xml\" href=\"favicon.svg\">\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester Votre Favicon<\/h3>\n\n\n\n<p>Apr\u00e8s avoir ajout\u00e9 les liens de favicon dans votre fichier HTML, sauvegardez vos modifications et rechargez votre site web dans le navigateur. Vous devriez voir votre favicon appara\u00eetre dans l’onglet du navigateur. Si vous ne le voyez pas, videz le cache du navigateur ou essayez d’ouvrir votre site dans un autre navigateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Articles et Outils Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour plus d’informations sur les favicons et sur l’optimisation de votre site web, consultez les articles suivants :<\/p>\n<ul>\n <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/link#attr-rel\" target=\"_blank\" rel=\"noopener\">Documentation MDN sur l’\u00e9l\u00e9ment <code><link><\/code><\/a><\/li>\n <li><a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">RealFaviconGenerator<\/a> – Outil de cr\u00e9ation de favicons multi-r\u00e9solution<\/li>\n <li><a href=\"https:\/\/web.dev\/learn\/html\/favicons\/\" target=\"_blank\" rel=\"noopener\">Guide complet sur les favicons par Web Dev<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Personnaliser l’ic\u00f4ne du site (favicon) est une t\u00e2che simple qui peut faire une grande diff\u00e9rence dans la reconnaissance de votre site web. En suivant les \u00e9tapes de ce tutoriel, vous pouvez facilement ajouter et configurer un favicon pour donner une identit\u00e9 visuelle distinctive \u00e0 votre site. Continuez \u00e0 explorer notre blog pour plus de <a href=\"https:\/\/wikiform.fr\/codespace\/element-textuels-html-guide-complet\">tutoriels sur le d\u00e9veloppement web<\/a>. Pour apprendre davantage sur la cr\u00e9ation et l’optimisation des \u00e9l\u00e9ments de votre site web, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">formation HTML5 et CSS3 de d\u00e9butant \u00e0 expert<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS - Offre Sp\u00e9ciale 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">Fonctionnement d’un navigateur web<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">Bases du langage HTML<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er votre premi\u00e8re page HTML<\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">Tout savoir sur l’\u00e9l\u00e9ment HTML <head><\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" target=\"_blank\" rel=\"noopener\">Explication des \u00e9l\u00e9ments de titre HTML<\/a>\n\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Personnaliser l’ic\u00f4ne du site (favicon) Personnaliser l’ic\u00f4ne du Site en HTML : favicon est une t\u00e2che simple mais importante pour renforcer l’identit\u00e9 visuelle de votre…<\/p>\n","protected":false},"author":2,"featured_media":2754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5485"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485\/revisions"}],"predecessor-version":[{"id":5486,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5485\/revisions\/5486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2754"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}