{"id":21537,"date":"2023-03-10T15:38:49","date_gmt":"2023-03-10T15:38:49","guid":{"rendered":"\/tutoriels\/?p=21537"},"modified":"2024-11-13T13:22:06","modified_gmt":"2024-11-13T13:22:06","slug":"favicon-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/favicon-wordpress\/","title":{"rendered":"Comment ajouter un favicon WordPress (manuellement, \u00e9diteur de blocs et bien plus)"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Un favicon WordPress repr&eacute;sente votre site web sur diverses plateformes. Il appara&icirc;t &agrave; c&ocirc;t&eacute; du titre du site dans l&rsquo;onglet du navigateur, l&rsquo;historique et les signets. Malgr&eacute; sa petite taille, il joue un r&ocirc;le important en aidant les utilisateurs &agrave; identifier votre site.<\/p><p class=\"wp-block-paragraph\">Cet article expliquera comment ajouter un favicon WordPress en utilisant quatre m&eacute;thodes diff&eacute;rentes &mdash; manuellement, en utilisant le bloc Gutenberg, le Personnalisateur de WordPress, et un plugin. Nous discuterons &eacute;galement de la raison pour laquelle le favicon WordPress est important et offrirons des conseils utiles pour cr&eacute;er un favicon WordPress personnalis&eacute;.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Qu'est-ce qu'un Favicon WordPress ?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Le favicon de WordPress est une ic&ocirc;ne unique associ&eacute;e &agrave; un site web. Il s&rsquo;agit g&eacute;n&eacute;ralement d&rsquo;une petite image carr&eacute;e avec un design repr&eacute;sentant l&rsquo;identit&eacute; du site. Le favicon de WordPress appara&icirc;t g&eacute;n&eacute;ralement sur le tableau de bord de WordPress et dans les onglets du navigateur.<\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-pourquoi-l-ajout-d-un-favicon-a-votre-site-est-important\">Pourquoi l&rsquo;ajout d&rsquo;un favicon &agrave; votre site est important<\/h3><p class=\"wp-block-paragraph\">Un favicon WordPress repr&eacute;sente l&rsquo;identit&eacute; du site, aidant les gens &agrave; reconna&icirc;tre votre site. Bien que l&rsquo;image de l&rsquo;ic&ocirc;ne soit petite, elle peut avoir un impact consid&eacute;rable sur l&rsquo;exp&eacute;rience utilisateur et la r&eacute;putation de votre marque. Voici quelques raisons pour lesquelles un favicon dans un site WordPress est important :<\/p><ul class=\"wp-block-list\">\n<li><strong>Am&eacute;liorer l&rsquo;exp&eacute;rience de l&rsquo;utilisateur<\/strong>. De nombreux utilisateurs ont plusieurs onglets ouverts dans leur navigateur web. Un favicon &agrave; c&ocirc;t&eacute; du titre du site aide les utilisateurs &agrave; diff&eacute;rencier facilement chaque onglet et &agrave; identifier votre site.<\/li>\n\n\n\n<li><strong>Am&eacute;liorer la visibilit&eacute;<\/strong>. Si il est correctement configur&eacute;, votre favicon appara&icirc;tra dans les r&eacute;sultats de recherche &agrave; c&ocirc;t&eacute; de l&rsquo;URL de votre site WordPress. Cela aide les gens &agrave; remarquer votre site et augmente le trafic organique.<\/li>\n\n\n\n<li><strong>Am&eacute;liorer l&rsquo;exp&eacute;rience mobile. <\/strong>De nombreux appareils mobiles permettent aux utilisateurs d&rsquo;ajouter n&rsquo;importe quelle page web &agrave; leur &eacute;cran d&rsquo;accueil. Lorsqu&rsquo;ils ajoutent un site web &agrave; l&rsquo;&eacute;cran d&rsquo;accueil de leur appareil mobile, celui-ci affiche le favicon, ce qui permet &agrave; l&rsquo;utilisateur de localiser votre site parmi les nombreuses ic&ocirc;nes d&rsquo;applications.<\/li>\n\n\n\n<li><strong>Instaurer la confiance<\/strong>. Les favicons WordPress donnent aux sites web un aspect plus professionnel. Si un site internet n&rsquo;a pas de favicon, le navigateur web utilisera une ic&ocirc;ne par d&eacute;faut qui donne l&rsquo;impression que le site internet n&rsquo;est pas fini.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-creation-d-un-favicon-dans-wordpress\">Cr&eacute;ation d&rsquo;un favicon dans WordPress<\/h2><p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-wordpress\/\">WordPress<\/a> dispose d&rsquo;une fonction favicon native et vous permet d&rsquo;en ajouter un en utilisant diff&eacute;rentes m&eacute;thodes. Cependant, avant de t&eacute;l&eacute;charger un fichier favicon personnalis&eacute; sur WordPress, il y a plusieurs pr&eacute;paratifs &agrave; faire :<\/p><ul class=\"wp-block-list\">\n<li><strong>Assurez-vous que l&rsquo;ic&ocirc;ne est une image carr&eacute;e d&rsquo;une taille d&rsquo;au moins 512px x 512px. <\/strong>Pour modifier la taille de l&rsquo;image, utilisez un logiciel de retouche d&rsquo;image comme Adobe Photoshop ou des g&eacute;n&eacute;rateurs de favicons en ligne comme <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">RealFaviconGenerator<\/a>, <a href=\"https:\/\/favicon.io\/\" target=\"_blank\" rel=\"noopener\">Favicon.io<\/a> et <a href=\"https:\/\/www.favicon-generator.org\/\" target=\"_blank\" rel=\"noopener\">Favicon-generator.org<\/a>.<\/li>\n\n\n\n<li><strong>Choisissez une couleur d&rsquo;arri&egrave;re-plan pour le favicon.<\/strong> Un arri&egrave;re-plan transparent est pr&eacute;f&eacute;rable, surtout si vous avez des espaces blancs dans le design.<\/li>\n\n\n\n<li><strong>Choisissez le bon format d&rsquo;image. <\/strong>Les favicons WordPress utilisent g&eacute;n&eacute;ralement le format de fichier <strong>ICO<\/strong>, mais vous pouvez d&eacute;sormais utiliser les formats <strong>JPEG <\/strong>et <strong>GIF<\/strong>. Toutefois, vous devez utiliser le format <strong>PNG <\/strong>si l&rsquo;arri&egrave;re-plan de votre ic&ocirc;ne est transparent.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Une fois l&rsquo;image est pr&ecirc;te, ajoutez le nouveau favicon &agrave; votre site WordPress en utilisant l&rsquo;une des m&eacute;thodes suivantes.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-utiliser-un-bloc-gutenberg\">Utiliser un bloc Gutenberg<\/h3><p class=\"wp-block-paragraph\">La fa&ccedil;on la plus simple d&rsquo;ajouter un favicon &agrave; WordPress est d&rsquo;utiliser l&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/gutenberg-wordpress\/\">&eacute;diteur de bloc Gutenberg<\/a>. Notez que cette m&eacute;thode n&rsquo;est possible que si vous utilisez un th&egrave;me de bloc WordPress et WordPress 5.9 ou sup&eacute;rieur. Voici les &eacute;tapes &agrave; suivre pour ce faire :<\/p><ol class=\"wp-block-list\">\n<li>Ouvrez l&rsquo;&eacute;diteur de site en naviguant vers <strong>Apparence &rarr; &Eacute;diteur <\/strong>&agrave;<strong> <\/strong>partir de votre tableau de bord WordPress.<\/li>\n\n\n\n<li>Passez la souris sur la zone o&ugrave; vous souhaitez placer le logo et cliquez sur le bouton d<strong>&lsquo;insertion de blocs (+)<\/strong>. Bien que vous puissiez l&rsquo;ajouter n&rsquo;importe o&ugrave; sur votre site, nous vous recommandons de l&rsquo;ajouter dans la zone de l&rsquo;en-t&ecirc;te.<\/li>\n\n\n\n<li>Recherchez le bloc <strong>Logo du site <\/strong>dans la barre de recherche et s&eacute;lectionnez-le pour l&rsquo;ajouter &agrave; votre site.<\/li>\n<\/ol><figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"224\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bloc-logo-du-site1.png\/w=1024,h=1024,fit=scale-down\" alt=\"Ajouter un bloc de logo du site sur l'&eacute;diteur Gutenberg\" class=\"wp-image-21563\" style=\"width:840px;height:auto\" title=\"bloc-logo-du-site\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bloc-logo-du-site1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bloc-logo-du-site1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bloc-logo-du-site1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bloc-logo-du-site1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol start=\"4\" class=\"wp-block-list\">\n<li>Cliquez sur le bouton <strong>Ajouter un logo de site <\/strong>dans le bloc pour ouvrir la fen&ecirc;tre contextuelle de la m&eacute;diath&egrave;que.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a7cd1a3bed0b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a7cd1a3bed0b\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"875\" height=\"217\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-4.png\/public\" alt=\"bouton ajouter un logo de site dans le bloc logo du site\" class=\"wp-image-36015\" title=\"bouton-ajouter-un-logo-de-site\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-4.png\/w=875,fit=scale-down 875w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-4.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-4.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-4.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"5\" class=\"wp-block-list\">\n<li>T&eacute;l&eacute;chargez votre fichier image ou s&eacute;lectionnez-le dans la biblioth&egrave;que multim&eacute;dia. Cliquez sur <strong>S&eacute;lectionner<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/ajouter-image-depuis-multimedia-wordpress.png\/w=1024,h=1024,fit=scale-down\" alt=\"Fen&ecirc;tre pop-up de la biblioth&egrave;que multim&eacute;dia de WordPress, montrant un fichier favicon s&eacute;lectionn&eacute;\" class=\"wp-image-21564\" title=\"t&eacute;l&eacute;verser-fichier-favicon-wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/ajouter-image-depuis-multimedia-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/ajouter-image-depuis-multimedia-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/ajouter-image-depuis-multimedia-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/ajouter-image-depuis-multimedia-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol start=\"6\" class=\"wp-block-list\">\n<li>Vous verrez l&rsquo;image du favicon sur le bloc du logo du site. Cliquez sur le bloc et ouvrez ses <strong>r&eacute;glages<\/strong> dans le<strong> <\/strong>coin sup&eacute;rieur droit de l&rsquo;&eacute;diteur.<\/li>\n\n\n\n<li>Ouvrez la section <strong>R&eacute;glages <\/strong>et activez la case &agrave; cocher <strong>Utiliser comme ic&ocirc;ne de site<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a7cd1a3c20f2\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a7cd1a3c20f2\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"344\" height=\"427\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-5.png\/public\" alt=\"R&eacute;glages du bloc logo du site, avec l'option &quot;utiliser comme ic&ocirc;ne du site&quot; s&eacute;lectionn&eacute;e.\" class=\"wp-image-36016\" title=\"R&eacute;glages-du-bloc-logo-du-site\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-5.png\/w=344,fit=scale-down 344w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-5.png\/w=242,fit=scale-down 242w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-5.png\/w=121,fit=scale-down 121w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Cliquez sur <strong>Enregistrer <\/strong>dans le coin sup&eacute;rieur droit de l&rsquo;&eacute;diteur.<\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-utilisation-de-l-option-personnaliser-de-wordpress-nbsp\">Utilisation de l&rsquo;option Personnaliser de WordPress&nbsp;<\/h3><p class=\"wp-block-paragraph\">Vous pouvez ajouter un favicon en personnalisant l&rsquo;identit&eacute; du site dans le personnalisateur de WordPress. Cette m&eacute;thode est plus adapt&eacute;e aux utilisateurs de th&egrave;mes classiques avec WordPress version 4.3 ou sup&eacute;rieure, car ils disposeront de la fonctionnalit&eacute; d&rsquo;ic&ocirc;ne de site.<\/p><p class=\"wp-block-paragraph\">Suivez ces &eacute;tapes pour ajouter un favicon en utilisant l&rsquo;option Personnaliser de WordPress :<\/p><ol class=\"wp-block-list\">\n<li>Acc&eacute;dez &agrave; <strong>Apparence &rarr; Personnaliser <\/strong>&agrave;<strong> <\/strong>partir de votre tableau de bord. Si cette option n&rsquo;est pas disponible ou si vous utilisez un th&egrave;me &agrave; blocs, utilisez le slug <strong>\/wp-admin\/customize.php <\/strong>pour l&rsquo;ouvrir.<\/li>\n\n\n\n<li>Choisissez l&rsquo;onglet <strong>Identit&eacute; du site <\/strong>dans la barre lat&eacute;rale gauche et cliquez sur le bouton <strong>S&eacute;lectionner l&rsquo;ic&ocirc;ne du site<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"375\" height=\"795\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametre-identite-du-site.png\/public\" alt=\"La section de l'identit&eacute; du site dans WordPress\" class=\"wp-image-21569\" title=\"identit&eacute;-du-site\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametre-identite-du-site.png\/w=375,fit=scale-down 375w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametre-identite-du-site.png\/w=142,fit=scale-down 142w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametre-identite-du-site.png\/w=71,fit=scale-down 71w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>La fen&ecirc;tre contextuelle de la biblioth&egrave;que multim&eacute;dia de WordPress appara&icirc;t. T&eacute;l&eacute;chargez votre favicon ou choisissez une image existante dans la m&eacute;diath&egrave;que. Cliquez sur <strong>S&eacute;lectionner<\/strong>.<\/li>\n\n\n\n<li>Vous verrez imm&eacute;diatement dans l&rsquo;onglet de votre navigateur que le nouveau favicon est d&eacute;fini. Cliquez sur le bouton <strong>Publier <\/strong>pour enregistrer la modification.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/publier-le-nouvel-favicon.png\/w=1024,h=1024,fit=scale-down\" alt=\"Publier le nouveau favicon \" class=\"wp-image-21570\" title=\"Publier-le-nouveau-favicon\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/publier-le-nouvel-favicon.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/publier-le-nouvel-favicon.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/publier-le-nouvel-favicon.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/publier-le-nouvel-favicon.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-utilisation-d-un-plugin-wordpress-favicon\">Utilisation d&rsquo;un plugin WordPress Favicon<\/h3><p class=\"wp-block-paragraph\">Une autre m&eacute;thode pour ajouter un favicon &agrave; WordPress est d&rsquo;utiliser un plugin. Il existe plusieurs plugins WordPress favicon, mais <a href=\"https:\/\/fr.wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" target=\"_blank\" rel=\"noopener\">Favicon by RealFaviconGenerator<\/a> est le mieux not&eacute;. <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-plugin-wordpress\/\">Installez et activez le plugin<\/a> depuis le tableau de bord de WordPress, puis suivez les &eacute;tapes suivantes :<\/p><ol class=\"wp-block-list\">\n<li>Acc&eacute;dez &agrave; la rubrique <strong>Apparence &rarr; Favicon <\/strong>depuis votre tableau de bord WordPress.<\/li>\n\n\n\n<li>Cliquez sur <strong>S&eacute;lectionnez dans la biblioth&egrave;que de m&eacute;dias <\/strong>pour t&eacute;l&eacute;charger ou choisir une image favicon. Vous n&rsquo;avez pas besoin de modifier votre image &agrave; l&rsquo;aide d&rsquo;un logiciel d&rsquo;&eacute;dition d&rsquo;images, car le plugin le fera pour vous. Id&eacute;alement, votre image doit avoir une taille d&rsquo;au moins <strong>260 x 260 px<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1354\" height=\"429\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=1024,h=1024,fit=scale-down\" alt=\"Le panneau du plugin RealFaviconGenerator, avec le bouton S&eacute;lectionner dans la biblioth&egrave;que de m&eacute;dias en surbrillance\" class=\"wp-image-21571\" title=\"s&eacute;lectionner-favicon-dans-la-biblioth&egrave;que-de-m&eacute;dias\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=1354,fit=scale-down 1354w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/selectionner-favicon-bibliotheque-de-medias.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1354px) 100vw, 1354px\" \/><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Cliquez sur <strong>G&eacute;n&eacute;rer le favicon<\/strong>. Le plugin vous conduira au site web <strong>RealFaviconGenerator<\/strong>, o&ugrave; vous pourrez personnaliser votre image.<\/li>\n\n\n\n<li>S&eacute;lectionnez <strong>Utiliser l&rsquo;image originale telle quelle (Use the original image as is<\/strong>)<strong> <\/strong>si vous ne voulez pas la modifier. Sinon, choisissez <strong>Ajouter des marges et un fond uni (Add margins and a plain background<\/strong>)<strong> <\/strong>si vous voulez ajouter une couleur de fond et modifier la taille de l&rsquo;image.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1467\" height=\"713\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=1024,h=1024,fit=scale-down\" alt=\"Site web de RealFaviconGenerator, montrant l'option de personnalisation de l'image du favicon\" class=\"wp-image-21572\" title=\"personnalisation-image-du-favicon\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=1467,fit=scale-down 1467w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/personnalisation-image-du-favicon.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1467px) 100vw, 1467px\" \/><\/figure><ol start=\"5\" class=\"wp-block-list\">\n<li>Descendez jusqu&rsquo;en bas et cliquez sur <strong>G&eacute;n&eacute;rer vos Favicons et code HTML<\/strong> <strong>(Generate your Favicons and HTML code)<\/strong>. Cela vous ram&egrave;nera au tableau de bord d&rsquo;administration de WordPress.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"319\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-6.png\/public\" alt=\"La section des options du g&eacute;n&eacute;rateur de favicons de RealFaviconGenerator avec le bouton g&eacute;n&eacute;rer vos favicons et code HTML\" class=\"wp-image-36017\" title=\"section-des-options-du-g&eacute;n&eacute;rateur-de-favicons\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-6.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-6.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-6.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-6.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Maintenant, le favicon de votre site WordPress devrait &ecirc;tre en place. Vous pouvez &eacute;galement v&eacute;rifier votre favicon dans le panneau d&rsquo;administration du plugin en cliquant sur le bouton <strong>V&eacute;rifiez votre&nbsp;favicon<\/strong>. Vous serez alors dirig&eacute; vers le site web RealFaviconGenerator, qui affiche les aper&ccedil;us de votre favicon sur diverses plateformes.<\/p><p class=\"wp-block-paragraph\">Notez que vous ne devez pas d&eacute;sactiver ce plugin, car il d&eacute;sactivera automatiquement votre favicon.<\/p><h3 class=\"wp-block-heading\"><strong>Ajouter manuellement un favicon &agrave; un site WordPress<\/strong><\/h3><p class=\"wp-block-paragraph\">Une autre m&eacute;thode consiste &agrave; ajouter manuellement un favicon dans WordPress. Cette m&eacute;thode n&eacute;cessite une certaine modification du fichier WordPress. Par cons&eacute;quent, nous vous recommandons de la tester dans un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wordpress-staging\/\">environnement de WordPress staging<\/a> avant de l&rsquo;appliquer au site r&eacute;el.<\/p><p class=\"wp-block-paragraph\">Vous devez utiliser un g&eacute;n&eacute;rateur tel que <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">RealFaviconGenerator<\/a> pour cr&eacute;er le package favicon et le code snippet. Voici les &eacute;tapes &agrave; suivre pour ce faire :<\/p><ol class=\"wp-block-list\">\n<li>Ouvrez le site web RealFaviconGenerator et cliquez sur le bouton <strong>s&eacute;lectionnez votre image de favicon (<strong>Select your Favicon image<\/strong>) <\/strong>pour t&eacute;l&eacute;charger votre image.<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a7cd1a3ca83e\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a7cd1a3ca83e\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"313\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-7.png\/public\" alt=\"Page d'accueil de RealFaviconGenerator, avec le bouton &quot;s&eacute;lectionnez votre image favicon&quot; en surbrillance \" class=\"wp-image-36018\" title=\"Page-d'accueil-de-RealFaviconGenerator\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-7.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-7.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-7.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-7.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"2\" class=\"wp-block-list\">\n<li>Faites d&eacute;filer l&rsquo;&eacute;cran jusqu&rsquo;aux <strong>Options du g&eacute;n&eacute;rateur de favicons<\/strong>. Dans l&rsquo;onglet <strong>Chemin<\/strong> <strong>(Path)<\/strong>, l&rsquo;option par d&eacute;faut consiste &agrave; placer les fichiers favicon dans le r&eacute;pertoire racine de votre site. Choisissez la deuxi&egrave;me option et d&eacute;finissez le chemin d&rsquo;acc&egrave;s si vous souhaitez le placer dans un autre r&eacute;pertoire. Cliquez sur <strong>G&eacute;n&eacute;rer vos favicons et le code HTML<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"286\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Generation-de-favicons-et-code-HTML-sur-RealFaviconGenerator.png\/w=1024,h=1024,fit=scale-down\" alt=\"G&eacute;n&eacute;ration de favicons et de code HTML sur le site RealFaviconGenerator\" class=\"wp-image-21573\" title=\"G&eacute;n&eacute;ration-de-favicons-et-code-HTML-sur-RealFaviconGenerator\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Generation-de-favicons-et-code-HTML-sur-RealFaviconGenerator.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Generation-de-favicons-et-code-HTML-sur-RealFaviconGenerator.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Generation-de-favicons-et-code-HTML-sur-RealFaviconGenerator.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Generation-de-favicons-et-code-HTML-sur-RealFaviconGenerator.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>T&eacute;l&eacute;chargez les fichiers d&rsquo;ic&ocirc;nes en cliquant sur le bouton <strong>Favicon package<\/strong>. Il contient les fichiers <strong>PNG <\/strong>et <strong>ICO <\/strong>de l&rsquo;image que vous avez s&eacute;lectionn&eacute;e. Gardez cette page ouverte, car vous devrez copier le code du favicon plus tard.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"953\" height=\"367\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-8.png\/public\" alt=\"Page RealFaviconGenerator avec le bouton du paquet de favicons mis en &eacute;vidence\" class=\"wp-image-36019\" title=\"paquet-de-favicons\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-8.png\/w=953,fit=scale-down 953w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-8.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-8.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-8.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 953px) 100vw, 953px\" \/><\/figure><ol start=\"4\" class=\"wp-block-list\">\n<li>Utilisez un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/utiliser-filezilla\/\">client FTP<\/a> ou le <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/gestionnaire-fichiers-hostinger\/\">gestionnaire de fichiers<\/a> de votre compte d&rsquo;h&eacute;bergement pour acc&eacute;der au r&eacute;pertoire racine de votre site et t&eacute;l&eacute;charger le package favicon. Vous devez le t&eacute;l&eacute;charger et l&rsquo;extraire dans le m&ecirc;me dossier que les dossiers <strong>wp-admin <\/strong>et <strong>wp-content<\/strong>.<\/li>\n\n\n\n<li>Ouvrez le dossier de votre th&egrave;me actif. Par exemple, si vous utilisez le th&egrave;me Twenty Twenty, ouvrez le dossier <strong>\/wp-content\/themes\/twentytwenty.<\/strong><\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"6a7cd1a3cefaa\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a7cd1a3cefaa\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"922\" height=\"489\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-9.png\/public\" alt=\"L'interface du gestionnaire de fichiers de Hostinger, montrant le r&eacute;pertoire du th&egrave;me Twenty Twenty.\" class=\"wp-image-36020\" title=\"r&eacute;pertoire-du-th&egrave;me-Twenty-Twenty\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-9.png\/w=922,fit=scale-down 922w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-9.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-9.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/image-9.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 922px) 100vw, 922px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><ol start=\"6\" class=\"wp-block-list\">\n<li>Ouvrez le fichier de mod&egrave;le <strong>header.php <\/strong>et collez le code du favicon de la page RealFaviconGenerator. Veillez &agrave; ajouter votre propre URL dans l&rsquo;attribut <strong>href<\/strong>. Cela devrait ressembler &agrave; ceci :<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https:\/\/website.com\/apple-touch-icon.png\"&gt;\n&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"https:\/\/website.com\/favicon-32x32.png\"&gt;\n&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"https:\/\/website.com\/favicon-16x16.png\"&gt;\n&lt;link rel=\"manifest\" href=\"https:\/\/website.com\/site.webmanifest\"&gt;\n&lt;link rel=\"mask-icon\" href=\"https:\/\/website.com\/safari-pinned-tab.svg\" color=\"#5bbad5\"&gt;\n&lt;meta name=\"msapplication-TileColor\" content=\"#da532c\"&gt;\n&lt;meta name=\"theme-color\" content=\"#ffffff\"&gt;<\/pre><ol start=\"7\" class=\"wp-block-list\">\n<li>Enregistrez les modifications.<\/li>\n<\/ol><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important !<\/strong> Une mise &agrave; jour du th&egrave;me peut annuler toutes les modifications apport&eacute;es au fichier header.php. Utilisez un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/theme-enfant-wordpress\/\">th&egrave;me enfant<\/a> si vous souhaitez modifier votre th&egrave;me tout en le gardant &agrave; jour.\n            <\/p><\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conseils-pour-la-creation-d-un-favicon-wordpress\">Conseils pour la cr&eacute;ation d&rsquo;un favicon WordPress<\/h2><p class=\"wp-block-paragraph\">Les ic&ocirc;nes de site de qualit&eacute; permettent aux utilisateurs d&rsquo;identifier rapidement la page web et de cr&eacute;er une association durable avec la marque. Voici quelques conseils pour cr&eacute;er un favicon unique :<\/p><ul class=\"wp-block-list\">\n<li><strong>&Eacute;vitez d&rsquo;utiliser des textes longs<\/strong>. La taille du favicon est si petite que m&ecirc;me un texte court est difficile &agrave; lire. Envisagez de cr&eacute;er un design diff&eacute;rent pour le favicon du site si votre logo comporte un nom de site en toutes lettres.<\/li>\n\n\n\n<li><strong>Ne le mettez pas &agrave; jour trop fr&eacute;quemment<\/strong>. Un favicon aide les clients &agrave; associer l&rsquo;image &agrave; votre marque. Si vous changez le favicon trop souvent, il sera difficile pour eux de construire cette association avec la marque.<\/li>\n\n\n\n<li><strong>Choisissez le bon sch&eacute;ma de couleurs<\/strong>. Avec l&rsquo;aspect personnalisable des navigateurs et la popularit&eacute; du mode nuit, votre favicon doit &ecirc;tre agr&eacute;able &agrave; regarder quelle que soit l&rsquo;apparence du navigateur. Nous vous recommandons de tester votre favicon avec diff&eacute;rentes couleurs d&rsquo;arri&egrave;re-plan comme le blanc, le gris et le noir.<\/li>\n\n\n\n<li><strong>Lisez les directives de Google<\/strong>. Suivez les <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/favicon-in-search?hl=fr\" target=\"_blank\" rel=\"noopener\">consignes de Google relatives aux favicons<\/a> pour que votre favicon apparaisse dans les r&eacute;sultats de recherche de Google.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p class=\"wp-block-paragraph\">Le favicon dans WordPress est une petite ic&ocirc;ne repr&eacute;sentant votre site sur les onglets du navigateur. Sa pr&eacute;sence est importante pour am&eacute;liorer l&rsquo;exp&eacute;rience utilisateur et la reconnaissance de la marque.<\/p><p class=\"wp-block-paragraph\">Le CMS WordPress poss&egrave;de une fonction int&eacute;gr&eacute;e d&rsquo;ic&ocirc;ne de site, et vous pouvez ajouter une ic&ocirc;ne de favicon en utilisant l&rsquo;une de ces m&eacute;thodes :<\/p><ul class=\"wp-block-list\">\n<li>Utilisation du bloc WordPress de l&rsquo;ic&ocirc;ne du site dans l&rsquo;&eacute;diteur Gutenberg. Cette m&eacute;thode est id&eacute;ale pour les utilisateurs de th&egrave;mes de bloc.<\/li>\n\n\n\n<li>Utiliser le Personnalisateur de WordPress en modifiant les param&egrave;tres d&rsquo;identit&eacute; du site.<\/li>\n\n\n\n<li>Utilisation du plugin RealFaviconGenerator. Cette m&eacute;thode vous permet de t&eacute;l&eacute;charger et de d&eacute;finir facilement le favicon. Cela dit, vous devez garder le plugin activ&eacute;.<\/li>\n\n\n\n<li>Modification manuelle des fichiers du th&egrave;me. Nous vous recommandons d&rsquo;utiliser un th&egrave;me enfant si vous souhaitez modifier les fichiers du th&egrave;me.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Avant de t&eacute;l&eacute;charger l&rsquo;image, assurez-vous qu&rsquo;elle a la bonne taille et le bon rapport d&rsquo;aspect du favicon WordPress.<\/p><p class=\"wp-block-paragraph\">Nous esp&eacute;rons que ce guide &eacute;tape par &eacute;tape vous aidera &agrave; configurer un favicon pour votre site WordPress.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    D&eacute;couvrez ce que vous pouvez faire d&#039;autre avec WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/securiser-wordpress\/\">Le guide ultime pour s&eacute;curiser WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un favicon WordPress repr&eacute;sente votre site web sur diverses plateformes. Il appara&icirc;t &agrave; c&ocirc;t&eacute; du titre du site dans l&rsquo;onglet du navigateur, l&rsquo;historique et les signets. Malgr&eacute; sa petite taille, il joue un r&ocirc;le important en aidant les utilisateurs &agrave; identifier votre site. Cet article expliquera comment ajouter un favicon WordPress en utilisant quatre m&eacute;thodes [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/favicon-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":21561,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment Ajouter un Favicon WordPress \u00e0 votre Site ?","rank_math_description":"D\u00e9couvrez 4 fa\u00e7ons simples et efficaces d'ajouter un favicon \u00e0 votre site WordPress pour am\u00e9liorer son apparence.","rank_math_focus_keyword":"favicon wordpress","footnotes":""},"categories":[5866,5848],"tags":[],"class_list":["post-21537","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personnalisation-et-design","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-favicon\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-favicon-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-favicon\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/favicon-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-favicon\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/21537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=21537"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/21537\/revisions"}],"predecessor-version":[{"id":36021,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/21537\/revisions\/36021"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/21561"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=21537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=21537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=21537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}