Pour intégrer un favicon en HTML à votre site Web, nous vous proposons deux options : soit vous ré­fé­ren­cez di­rec­te­ment le fichier image via le code HTML, soit vous utilisez des solutions au­to­ma­ti­sées proposées par des CMS ou des fichiers de type manifeste. La méthode la plus fiable consiste toutefois à ré­fé­ren­cer ex­pli­ci­te­ment le favicon dans la section <head> de la page, idéa­le­ment en com­plé­ment d’une in­té­gra­tion via un fichier manifest.json.

Qu’est-ce qu’un favicon ?

Un favicon (mot-valise issu de favorite et icon) est une petite image associée à un site Web, visible notamment dans l’onglet d’un na­vi­ga­teur. Ce pic­to­gramme offre une forte valeur de re­con­nais­sance dans les onglets ouverts, mais il peut aussi ap­pa­raître dans la barre d’outils, les favoris, les listes d’ap­pli­ca­tions ou encore dans les résultats de recherche d’un moteur de recherche.

Créer un site Internet
Votre site en un éclair grâce à l'in­tel­li­gence ar­ti­fi­cielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Gé­né­ra­teur d'images et de textes avec op­ti­mi­sa­tion SEO
  • Domaine, SSL et boîte email inclus

Comment créer un favicon ?

Avant de pouvoir intégrer un favicon en HTML, vous devez d’abord le créer. Il est important que l’icône fonc­tionne aussi bien en basse qu’en haute ré­so­lu­tion et qu’elle soit im­mé­dia­te­ment re­con­nais­sable comme un élément de votre marque. C’est pourquoi de nombreux favicons s’inspirent des principes appliqués à la création de logos. Pour garantir une com­pa­ti­bi­lité optimale avec les dif­fé­rents na­vi­ga­teurs et pla­te­formes, il est re­com­mandé de générer plusieurs versions du favicon :

Uti­li­sa­tion Format Taille re­com­man­dée Remarque
Na­vi­ga­teurs clas­siques .ico 16×16 px ou 32×32 px Prin­ci­pa­le­ment requis par les anciens na­vi­ga­teurs
Na­vi­ga­teurs modernes .png 32×32 px ou 64×64 px Trans­pa­rence possible, rendu sans perte
Apple Touch Icon .png 180×180 px Utilisée lors de l’ajout à l’écran d’accueil sur iOS
Icône de manifeste Android .png 192×192 px ou 512×512 px Intégrée dans manifest.json, né­ces­saire pour les PWA et rac­cour­cis Android

Comment intégrer un favicon en HTML ?

La manière la plus sûre de mettre un favicon en HTML est de le ré­fé­ren­cer via HTML. Pour cela, té­lé­char­gez l’image dans le ré­per­toire principal de votre domaine ou dans un sous-dossier (par exemple, /assets/icons/). Ensuite, liez-le dans la section <head> de votre page.

<!-- Favicon standard -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<!-- Solution de repli pour anciens navigateurs -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
html

Le type MIME plus ancien image/vnd.icon est aujourd’hui considéré comme obsolète. Il est re­com­mandé d’utiliser à la place image/x-icon ou image/png, mieux pris en charge par les na­vi­ga­teurs modernes.

Comment intégrer un favicon sans code ?

Si vous souhaitez intégrer un favicon en HTML, il existe une méthode encore plus simple. Il n’est pas né­ces­saire d’écrire du code : il suffit de créer le fichier d’icône et de le nommer cor­rec­te­ment. Une fois le pic­to­gramme généré dans le format approprié, en­re­gis­trez-le sous le nom favicon.ico et placez-le dans le ré­per­toire racine de votre domaine. Cette méthode fonc­tionne uni­que­ment si le nom du fichier est stric­te­ment respecté. Veillez également à utiliser ex­clu­si­ve­ment des mi­nus­cules.

L’in­té­gra­tion d’un favicon en HTML de cette manière présente toutefois deux in­con­vé­nients. Pre­miè­re­ment, même si la plupart des na­vi­ga­teurs re­con­nais­sent ce procédé, cette méthode offre peu de contrôle (tailles, pla­te­formes, PWA). Deuxiè­me­ment, cette approche implique gé­né­ra­le­ment que tous les sous-domaines rattachés au domaine principal utilisent la même icône. La méthode la plus fiable reste donc celle décrite pré­cé­dem­ment, avec une dé­cla­ra­tion explicite du favicon dans le code HTML.

Comment intégrer des favicons dans les CMS comme WordPress ou TYPO3 ?

Dans les systèmes de gestion de contenu modernes, le favicon est intégré via le backend.

Exemples :

  • WordPress : ajoutez un favicon dans WordPress en suivant « Apparence > Identité du site ». Vous pouvez ensuite té­lé­ver­ser l’icône du site. WordPress génère au­to­ma­ti­que­ment plusieurs tailles et insère le code cor­res­pon­dant dans le <head>.
  • TYPO3 / Joomla / Drupal : l’in­té­gra­tion se fait via les pa­ra­mètres du modèle ou du thème.
  • Headless CMS (par ex. Strapi, Con­tent­ful) : l’in­té­gra­tion s’effectue ma­nuel­le­ment dans le modèle du frontend ou dans le fichier manifest.json.

La plupart des CMS en­re­gistrent le favicon dans un em­pla­ce­ment cen­tra­lisé et se chargent eux-mêmes de l’in­té­gra­tion. Vous n’avez donc gé­né­ra­le­ment à vous occuper que des fichiers image.

Comment intégrer un favicon via manifest.json (pour les PWA et Android) ?

Une PWA (Pro­gres­sive Web App) est une ap­pli­ca­tion Web dé­ve­lop­pée à l’aide de tech­no­lo­gies Web modernes telles que Ja­vaS­cript, HTML5 et CSS3, et offrant une ex­pé­rience uti­li­sa­teur proche de celle d’une ap­pli­ca­tion native. Des exemples connus incluent Pinterest, Google Maps ou Spotify.

Pour les PWA et les appareils Android, une simple dé­cla­ra­tion dans l’en-tête HTML ne suffit pas. Il est né­ces­saire d’utiliser un fichier sup­plé­men­taire nommé manifest.json. Celui-ci est référencé dans le <head> de la page Web, structuré au format JSON et contient des mé­ta­don­nées es­sen­tielles pour l’ap­pli­ca­tion. Cela inclut notamment le nom, la version et les icônes de l’ap­pli­ca­tion.

De plus, le manifeste définit des pro­prié­tés centrales telles que le mode d’affichage au démarrage, le com­por­te­ment hors ligne ou certaines au­to­ri­sa­tions. Il fournit ainsi au na­vi­ga­teur toutes les in­for­ma­tions né­ces­saires pour présenter l’ap­pli­ca­tion Web comme une ap­pli­ca­tion native.

<link rel="manifest" href="/manifest.json">
html

Exemple de contenu du manifest.json :

{
    "name": "My Website",
    "short_name": "Website",
    "icons": [
        {
            "src": "/assets/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
json

Ce fichier permet aux na­vi­ga­teurs com­pa­tibles d’afficher cor­rec­te­ment l’icône lors de l’ins­tal­la­tion ou de l’ajout à l’écran d’accueil.

Aller au menu principal