{"id":4505,"date":"2017-04-24T15:39:14","date_gmt":"2017-04-24T15:39:14","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriels\/?p=4505"},"modified":"2024-09-26T01:15:11","modified_gmt":"2024-09-26T01:15:11","slug":"favicon","status":"publish","type":"post","link":"\/fr\/tutoriels\/favicon\/","title":{"rendered":"Comment ajouter un favicon \u00e0 votre site web ?"},"content":{"rendered":"<p>La plupart des sites Web en ligne ont leurs propres logos et dans la plupart des cas, ils sont utilis&eacute;s comme <strong>favicons<\/strong>&nbsp;Si vous ne savez pas ce qu&rsquo;est un favicon, voici un exemple :<\/p><p><img decoding=\"async\" class=\"aligncenter wp-image-12665 size-full\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/favicon-Hostinger.jpg\" alt=\"favicon de Hostinger\" width=\"805\" height=\"72\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/04\/favicon-Hostinger.jpg\/w=805,fit=scale-down 805w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/04\/favicon-Hostinger.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/04\/favicon-Hostinger.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/04\/favicon-Hostinger.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 805px) 100vw, 805px\" \/><\/p><p>Mais avant, c&rsquo;est quoi un favicon ?<\/p><p>C&rsquo;est la combinaison de deux mots &ldquo;<strong>favorite&rdquo;<\/strong> et<strong> &ldquo;icon&rdquo;<\/strong> On peut ainsi le traduire en fran&ccedil;ais par l&rsquo; &laquo; ic&ocirc;ne des favoris &raquo;. c&rsquo;est tout simplement l&rsquo;ic&ocirc;ne qui s&rsquo;affiche dans la barre des favoris d&rsquo;un navigateur internet et g&eacute;n&eacute;ralement c&rsquo;est logo du site ou bien un logo ou symbole simplifi&eacute; aui apparait en miniature. Si votre site web n&rsquo;a pas de logo, vous pouvez en cr&eacute;er un en quelques clics avec notre <a href=\"https:\/\/www.hostinger.com\/fr\/createur-de-logo\">cr&eacute;ateur de logo IA<\/a>.<\/p><p>Avoir un <strong>favicon<\/strong>&nbsp;sur votre site Web est bien s&ucirc;r beaucoup mieux que de ne rien avoir. Votre site Web para&icirc;tra plus professionnel.<\/p><p>Dans ce tutoriel, nous allons apprendre quelques fa&ccedil;ons simples sur la fa&ccedil;on d&rsquo;ajouter un <strong>favicon<\/strong>&nbsp;&agrave; votre site Web.<\/p><h2 id=\"h-ce-dont-vous-aurez-besoin\"><strong>Ce dont vous aurez besoin<\/strong><\/h2><p>Avant d&rsquo;ajouter une favicon, assurez vous d&rsquo;avoir les &eacute;l&eacute;ments suivants:<\/p><ul>\n<li>Une image carr&eacute;e que vous souhaitez&nbsp;ajouter en tant que <strong>favicon<\/strong>&nbsp;de votre site Web<\/li>\n<li>Acc&egrave;s aux fichiers de votre site Web<\/li>\n<\/ul><h2 id=\"h-option-1-laisser-le-navigateur-obtenir-automatiquement-votre-favicon-pas-besoin-de-changer-le-code-du-site\"><strong>Option 1 &ndash; Laisser le navigateur obtenir automatiquement votre favicon (pas besoin de changer le code du site)<\/strong><\/h2><p>La plupart des navigateurs d&eacute;tectent <strong>automatiquement le<\/strong>&nbsp;fichier <strong>favicon.ico<\/strong>&nbsp;situ&eacute; dans votre dossier de site Web et le d&eacute;finissent comme le favicon de votre site. C&rsquo;est la fa&ccedil;on la plus simple d&rsquo;ajouter un <strong>favicon<\/strong>&nbsp;&agrave; votre site.<\/p><p>1. Tout d&rsquo;abord, vous devez avoir une image aux dimensions <strong>carr&eacute;es <\/strong>(64&times;64 par exemple)<strong>&nbsp;<\/strong>dans <strong>n&rsquo;importe<\/strong>&nbsp;quel format d&rsquo;image (jpg, bmp, gif, png) afin qu&rsquo;elle <strong>apparaisse <\/strong>sur&nbsp;le <strong>navigateur<\/strong>. Bien s&ucirc;r, les images non carr&eacute;es fonctionnent &eacute;galement, cependant, ces ic&ocirc;nes peuvent ne pas para&icirc;tre professionnelles.<\/p><p>2. Cette option n&eacute;cessite la conversion de votre image au format <strong>.ico<\/strong>&nbsp;. Il ya beaucoup d&rsquo;outils en ligne pour faire cela, cependant, dans ce tutoriel, nous utiliserons <a href=\"http:\/\/convertico.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">&nbsp;convertico.com<\/a>&nbsp;.<\/p><p>3. Sur convertico.com vous verrez un bouton pour s&eacute;lectionner et envoyer votre image.<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/add-favicon2.png\" alt=\"convertir une image sur Convertico\" width=\"631\" height=\"349\"><\/p><p>4. Cliquez sur le bouton et s&eacute;lectionnez l&rsquo;image que vous voulez. Apr&egrave;s cela votre image sera automatiquement convertie et appara&icirc;tra sur le c&ocirc;t&eacute; droit du site. Vous pourrez la t&eacute;l&eacute;charger:<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/add-favicon3.png\" alt=\"t&eacute;l&eacute;charger une image format .ico sur convertico\" width=\"372\" height=\"121\"><\/p><p>5. T&eacute;l&eacute;chargez votre image en cliquant sur <strong>T&eacute;l&eacute;charger<\/strong>&nbsp;et <strong>enregistrez<\/strong>&nbsp;votre fichier <strong>.ico <\/strong>n&rsquo;importe o&ugrave; sur votre ordinateur.<\/p><p>6. Renommez <strong>maintenant<\/strong>&nbsp;le fichier en <strong>favicon.ico<\/strong>&nbsp;, car le navigateur ne prendra en compte que ce nom de fichier.<\/p><p>7. La derni&egrave;re &eacute;tape consiste &agrave; t&eacute;l&eacute;charger ce fichier dans le dossier o&ugrave; se trouvent vos fichiers de site Web. Pour l&rsquo;envoi, vous pouvez utiliser le Gestionnaire de fichiers&nbsp;ou un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/utiliser-filezilla\/\" target=\"_blank\" rel=\"noopener noreferrer\">client FTP<\/a>&nbsp;. Sur les serveurs bas&eacute;s sur Linux, le dossier est g&eacute;n&eacute;ralement <strong>public_html. <\/strong>Cependant, cela peut &ecirc;tre diff&eacute;rent selon votre <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-web\"><strong>h&eacute;bergeur web<\/strong><\/a>. Dans ce cas, mieux vaut consulter le fournisseur d&rsquo;h&eacute;bergement.<\/p><p>Lorsque votre fichier <strong>favicon.ico<\/strong>&nbsp;aura &eacute;t&eacute; envoy&eacute; sur votre site Web, le navigateur le r&eacute;cup&eacute;rera automatiquement et affichera l&rsquo;image dans le navigateur.<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/add-favicon4-1.png\" alt=\"apparition du favicon du site\" width=\"202\" height=\"45\"><\/p><p>\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> Si vous ne voyez pas le nouveau favicon, <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/vider-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">effacez le cache<\/a> de votre&nbsp;navigateur et red&eacute;marrez-le.\n            <\/p><\/div>\n<\/p><h2 id=\"h-option-2-utiliser-une-image-de-votre-site-et-la-specifier-dans-le-code-de-votre-site\"><strong>Option 2 &ndash; Utiliser une image de votre site et la sp&eacute;cifier dans le code de votre site<\/strong><\/h2><p>Si vous pensez que convertir votre image &agrave; un autre format est une perte de temps, vous pouvez utiliser une image de votre site comme <strong>favicon<\/strong>&nbsp;de votre site Web.<\/p><ol>\n<li>Tout d&rsquo;abord, vous devez avoir une image aux dimensions <strong>carr&eacute;es <\/strong>(64&times;64 par exemple)<strong>&nbsp;<\/strong>dans <strong>n&rsquo;importe<\/strong>&nbsp;quel format d&rsquo;image (jpg, bmp, gif, png) afin qu&rsquo;elle <strong>apparaisse <\/strong>sur le <strong>navigateur<\/strong>. Bien s&ucirc;r, les images non carr&eacute;es fonctionnent &eacute;galement, cependant, ces ic&ocirc;nes peuvent ne pas para&icirc;tre professionnelles.<\/li>\n<li><strong>Envoyez<\/strong>&nbsp;ce fichier sur votre site Web. Sur les serveurs bas&eacute;s sur Linux, le dossier est g&eacute;n&eacute;ralement <strong>public_html. <\/strong>Cependant, cela peut &ecirc;tre diff&eacute;rent selon votre h&eacute;bergeur. Dans ce cas, mieux vaut consulter le fournisseur d&rsquo;h&eacute;bergement.<\/li>\n<li>Maintenant, vous devez sp&eacute;cifier l&rsquo;image que vous souhaitez utiliser comme favicon dans le code de votre site Web. Ajoutez cette ligne entre les balises &lt;head&gt;&lt;\/head&gt;&nbsp;dans le code de votre site Web:<\/li>\n<\/ol><pre class=\"\">&lt;link rel=\"shortcut icon\" type=\"image\/png\" href=\"\/fr\/favicon.png\"\/&gt;<\/pre><p>\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> Dans type=&rdquo;image\/png&rdquo;&nbsp;remplacez png&nbsp;par le format de votre image et remplacez favicon.png&nbsp;par votre nom de fichier.\n            <\/p><\/div>\n<\/p><p>Le code HTML ressemblera &agrave; ceci :<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/add-favicon5.png\" alt=\"ajouter un code pour ajouter un favicon sur le site\" width=\"619\" height=\"174\"><\/p><p>Votre image devrait maintenant &ecirc;tre affich&eacute;e comme le <strong>favicon<\/strong>&nbsp;de votre site :<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/add-favicon4.png\" alt=\"le favicon du site est apparue\" width=\"202\" height=\"45\"><br>\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                IMPORTANT: Si vous ne voyez pas le nouveau favicon, <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/vider-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">effacez le cache de votre<\/a>&nbsp;navigateur et red&eacute;marrez-le.\n            <\/p><\/div><\/p><h2 id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Vous avez appris deux fa&ccedil;ons d&rsquo;ajouter un favicon &agrave; votre site Web. C&rsquo;est un petit travail dans le processus de d&eacute;veloppement d&rsquo;un site Web, mais qui est essentiel pour rendre votre site professionnel.<\/p><p>J&rsquo;esp&egrave;re vous avoir &eacute;t&eacute; utile et nous nous retrouvons bient&ocirc;t pour un prochain tutoriel ! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La plupart des sites Web en ligne ont leurs propres logos et dans la plupart des cas, ils sont utilis&eacute;s comme favicons&nbsp;Si vous ne savez pas ce qu&rsquo;est un favicon, voici un exemple :Mais avant, c&rsquo;est quoi un favicon ?C&rsquo;est la combinaison de deux mots &ldquo;favorite&rdquo; et &ldquo;icon&rdquo; On peut ainsi le traduire en fran&ccedil;ais [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/favicon\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":212,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment Ajouter un Favicon \u00e0 Votre Site Web ?","rank_math_description":"Vous voulez ajouter une favicon, ou plus simplement une ic\u00f4ne \u00e0 votre site web ? Alors suivez ce court tutoriel pour savoir comment faire !","rank_math_focus_keyword":"favicon","footnotes":""},"categories":[5882,5847],"tags":[4915,4916,4917,4918],"class_list":["post-4505","post","type-post","status-publish","format-standard","hentry","category-sections-dun-site-web","category-site-web","tag-favicon","tag-favicon-html","tag-icone-site-web","tag-site-internet-icone"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-favicon-to-website\/","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\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/anadir-favicon\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/anadir-favicon\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/anadir-favicon\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/anadir-favicon\/","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\/4505","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\/212"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=4505"}],"version-history":[{"count":24,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4505\/revisions"}],"predecessor-version":[{"id":28530,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4505\/revisions\/28530"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=4505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=4505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=4505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}