{"id":3259,"date":"2025-10-06T16:09:25","date_gmt":"2025-10-06T14:09:25","guid":{"rendered":"https:\/\/tecnologia.euroinnova.com\/favicon-en-html-descubre-como-ponerlo\/"},"modified":"2026-08-05T11:05:51","modified_gmt":"2026-08-05T09:05:51","slug":"favicon-en-html","status":"publish","type":"post","link":"https:\/\/tecnologia.euroinnova.com\/fr\/favicon-en-html","title":{"rendered":"Favicon en HTML : d\u00e9couvrez comment le mettre en place"},"content":{"rendered":"

Quand tu commences \u00e0 naviguer sur Internet, tu arrives forc\u00e9ment \u00e0 un moment o\u00f9 tu as plein d'onglets ouverts. Comment fais-tu pour passer de l'un \u00e0 l'autre et savoir exactement \u00e0 quoi correspond chacune des pages ouvertes ? Gr\u00e2ce au favicon !<\/strong> Dans ce cas, on ne voit que le logo de chaque site web, ce qu'on appelle un \u00ab favicon \u00bb.<\/p>\n

Chez Euroinnova, nous souhaitons vous expliquer comment ins\u00e9rer un favicon en HTML, mais nous vous pr\u00e9senterons \u00e9galement d'autres m\u00e9thodes. Par exemple, vous pouvez laisser les navigateurs d\u00e9tecter automatiquement le favicon<\/strong>, m\u00eame si ce n'est pas la meilleure option. Tu es pr\u00eat ? C'est parti !<\/p>\n

Qu'est-ce qu'un favicon et pourquoi devriez-vous le conna\u00eetre ?<\/strong><\/h2>\n

Comme nous l'avons d\u00e9j\u00e0 mentionn\u00e9, Le favicon est le logo<\/strong>, celui que tu choisiras, qui appara\u00eet \u00e0 c\u00f4t\u00e9 du titre principal<\/strong> dans l'onglet de votre navigateur. En d'autres termes, cela consiste \u00e0 demander au navigateur d'afficher l'image que vous lui indiquez dans le code HTML au lieu d'afficher un espace vide. C'est int\u00e9ressant car les internautes se souviendront de votre favicon, ce qui renforce l'autorit\u00e9 de votre marque.<\/p>\n

Cr\u00e9er un favicon<\/strong> C'est tr\u00e8s simple, car il existe une multitude de sites web qui te permettent de cr\u00e9er le tien en quelques secondes. Cependant, tu dois ici tenir compte d'autres aspects, tels que l'identit\u00e9 visuelle de ta marque. N'oublie pas qu'il s'agit d'un \u00e9l\u00e9ment que l'utilisateur associera directement \u00e0 ta marque.<\/p>\n

Pour approfondir le sujet notion de favicon<\/strong>, avant de t'expliquer comment l'int\u00e9grer dans le code HTML,<\/strong> Nous allons parler de ses fonctionnalit\u00e9s.<\/p>\n

\u00c0 quoi sert un favicon ?<\/strong><\/h3>\n

Nous allons maintenant vous pr\u00e9senter une petite liste des raisons pour lesquelles vous devez soigner votre favicon :<\/p>\n

    \n
  • Identit\u00e9 visuelle :<\/strong> Cela permet d'identifier votre marque d'un simple coup d'\u0153il, surtout lorsque les utilisateurs ont de nombreux onglets ouverts.<\/li>\n
  • Professionnalisme :<\/strong> L'ajout d'une favicon dans le code HTML montre que vous accordez une attention extr\u00eame \u00e0 tous les d\u00e9tails de votre site web, ce qui t\u00e9moigne d'un niveau de professionnalisme admirable.<\/li>\n
  • Facilit\u00e9 d'acc\u00e8s :<\/strong> Une favicon s'affiche \u00e9galement dans la barre de signets ou dans les favoris de votre navigateur. C'est pourquoi vous devez en tenir compte pour que les internautes puissent vous trouver rapidement.<\/li>\n
  • Personnalisation :<\/strong> Votre favicon peut non seulement refl\u00e9ter votre marque, mais aussi le contenu de votre site web.<\/li>\n
  • Formats pris en charge :<\/strong> \u00c0 cet \u00e9gard, une certaine souplesse est de mise, car les formats d'image tels que PNG et GIF sont accept\u00e9s.<\/li>\n
  • Fmise en \u0153uvre facile :<\/strong> Comment ins\u00e9rer une favicon dans le code HTML ? Nous allons justement r\u00e9pondre \u00e0 cette question.<\/li>\n<\/ul>\n

    Comment ins\u00e9rer une favicon en HTML ?<\/strong><\/h2>\n

    Chez Euroinnova, nous vous expliquons, \u00e9tape par \u00e9tape, comment proc\u00e9der pour Mettre en place une favicon en HTML.<\/strong> Allez !<\/p>\n

    Cr\u00e9ez votre favicon<\/strong><\/h3>\n

    Comme nous l'avons d\u00e9j\u00e0 mentionn\u00e9, il existe une multitude d'options pour cr\u00e9er votre propre favicon. En fin de compte, il s'agit d'une image carr\u00e9e qui doit respecter les dimensions suivantes : 16 \u00d7 16 pixels, 32 \u00d7 32 pixels ou 48 \u00d7 48 pixels.<\/strong> Il est important que tu pr\u00e9cises la taille dans le code HTML, mais c'est le navigateur qui, en fin de compte, choisira la taille la plus appropri\u00e9e en fonction du contexte.<\/p>\n

    Le format de l'image<\/strong><\/h3>\n

    Le format recommand\u00e9 pour une compatibilit\u00e9 optimale est le .ico<\/strong>, mais tu peux aussi utiliser d'autres formats tels que .png<\/strong> o .gif.<\/strong> L'important ici est de v\u00e9rifier que le format et la taille sont bien corrects.<\/p>\n

    T\u00e9l\u00e9charge le favicon sur ton serveur<\/strong><\/h3>\n

    Cette \u00e9tape est vraiment simple. Il te suffit de t\u00e9l\u00e9charger votre favicon depuis le Gestionnaire de fichiers<\/strong> de votre h\u00e9bergement. Pr\u00e9parez l'image au format .ico ou .png, par exemple, puis proc\u00e9dez \u00e0 son t\u00e9l\u00e9chargement.<\/p>\n

    Ins\u00e9rer le favicon dans le code HTML<\/strong><\/h3>\n

    Une fois que votre favicon est bien t\u00e9l\u00e9charg\u00e9 sur votre h\u00e9bergement, vous devez acc\u00e9der au code de votre site web. Dans la partie \u00ab head \u00bb, vous devrez ajouter une nouvelle ligne :<\/p>\n

    <link rel=\u00bbicon\u00bb sizes=\u00bb16×16 32×32 48×48″ type=\u00bbimage\/png\u00bb href=\u00bbimages\/myicon.png\u00bb \/><\/strong><\/em><\/p>\n

    Pour que tout soit clair, nous allons t'expliquer la signification de chaque attribut :<\/p>\n

      \n
    • rel=\u201dicon\u201d :<\/strong> Avec cette balise, nous indiquons qu'il s'agit du favicon du site web.<\/li>\n
    • sizes=\u201d16\u00d716 32\u00d732 48\u00d748\" :<\/strong> Ici, comme nous le savons d\u00e9j\u00e0, nous devons indiquer directement au site web la taille de notre favicon.<\/li>\n
    • type=\u201dimage\/png\u201d :<\/strong> Nous indiquons \u00e0 notre site web qu'il s'agit d'une image au format .png.<\/li>\n
    • href=\u201dimages\/myicon.png\u201d :<\/strong> \u00c0 ce stade, nous vous indiquons l'emplacement du fichier image du favicon.<\/li>\n<\/ul>\n

      Enregistrer les modifications<\/strong><\/h3>\n

      Une fois qu'on voit que enregistrez les modifications dans votre fichier HTML,<\/strong> Tu pourras ouvrir ton navigateur web pour voir ton favicon. S'il n'appara\u00eet pas, tu devras peut-\u00eatre vider le cache. Fais tr\u00e8s attention \u00e0 cela.<\/p>\n

      Existe-t-il des types particuliers de favicons ?<\/strong><\/h2>\n

      Oui, il est important de savoir qu\u2019il existe deux types particuliers d\u2019ic\u00f4nes non standard dans le navigateur Safari. Il s\u2019agit de apple-touch-icon<\/strong> pour les appareils iOS et mask-icon<\/strong> pour les cas o\u00f9 la navigation s'effectue via macOS.<\/p>\n

      Voici ce que nous vous pr\u00e9sentons ci-dessous comment cela s'\u00e9crirait en HTML<\/strong> dans les deux cas.<\/p>\n

      apple-touch-icon<\/strong><\/h3>\n

      <link rel=\u00bbapple-touch-icon\u00bb sizes=\u00bb180×180″ href=\u00bbimages\/myicon.png\u00bb \/><\/em><\/p>\n

      mask-icon<\/strong><\/h3>\n

      Il faut ici garder \u00e0 l'esprit que l'ic\u00f4ne doit \u00eatre un fichier SVG monochrome et qu'elle doit comporter l'attribut \u00ab color \u00bb.<\/p>\n

      <link rel=\u00bbmask-icon\u00bb href=\u00bbimages\/myicon.svg\u00bb color=\u00bb#226DAA\u00bb \/><\/em><\/p>","protected":false},"excerpt":{"rendered":"

      Cuando empiezas a navegar por internet, seguro que llegas a ese momento en el que tienes un mont\u00f3n de pesta\u00f1as […]<\/p>\n","protected":false},"author":2,"featured_media":871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/comments?post=3259"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3259\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media\/871"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media?parent=3259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/categories?post=3259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/tags?post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}