{"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><p class=\"important\"><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.<\/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><p class=\"important\"><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.<\/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><p class=\"important\">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.<\/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":[4804,5801],"tags":[4915,4916,4917,4918],"class_list":["post-4505","post","type-post","status-publish","format-standard","hentry","category-developpement-site-web","category-maintenance","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":0},{"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-UK","link":"https:\/\/www.hostinger.com\/uk\/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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-favicon-to-website","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site","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":"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":"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}],"_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}]}}