Pour intégrer un favicon en HTML à votre site Web, nous vous proposons deux options : soit vous référencez directement le fichier image via le code HTML, soit vous utilisez des solutions automatisées proposées par des CMS ou des fichiers de type manifeste. La méthode la plus fiable consiste toutefois à référencer explicitement le favicon dans la section <head> de la page, idéalement en complément d’une intégration 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 navigateur. Ce pictogramme offre une forte valeur de reconnaissance dans les onglets ouverts, mais il peut aussi apparaître dans la barre d’outils, les favoris, les listes d’applications 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'intelligence artificielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Générateur d'images et de textes avec optimisation 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 fonctionne aussi bien en basse qu’en haute résolution et qu’elle soit immédiatement reconnaissable 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 compatibilité optimale avec les différents navigateurs et plateformes, il est recommandé de générer plusieurs versions du favicon :

Utilisation Format Taille recommandée Remarque
Navigateurs classiques .ico 16×16 px ou 32×32 px Principalement requis par les anciens navigateurs
Navigateurs modernes .png 32×32 px ou 64×64 px Transparence 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écessaire pour les PWA et raccourcis 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érencer via HTML. Pour cela, téléchargez l’image dans le répertoire 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 recommandé d’utiliser à la place image/x-icon ou image/png, mieux pris en charge par les navigateurs 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écessaire d’écrire du code : il suffit de créer le fichier d’icône et de le nommer correctement. Une fois le pictogramme généré dans le format approprié, enregistrez-le sous le nom favicon.ico et placez-le dans le répertoire racine de votre domaine. Cette méthode fonctionne uniquement si le nom du fichier est strictement respecté. Veillez également à utiliser exclusivement des minuscules.

L’intégration d’un favicon en HTML de cette manière présente toutefois deux inconvénients. Premièrement, même si la plupart des navigateurs reconnaissent ce procédé, cette méthode offre peu de contrôle (tailles, plateformes, PWA). Deuxièmement, cette approche implique généralement 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édemment, avec une déclaration 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éverser l’icône du site. WordPress génère automatiquement plusieurs tailles et insère le code correspondant dans le <head>.
  • TYPO3 / Joomla / Drupal : l’intégration se fait via les paramètres du modèle ou du thème.
  • Headless CMS (par ex. Strapi, Contentful) : l’intégration s’effectue manuellement dans le modèle du frontend ou dans le fichier manifest.json.

La plupart des CMS enregistrent le favicon dans un emplacement centralisé et se chargent eux-mêmes de l’intégration. Vous n’avez donc généralement à vous occuper que des fichiers image.

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

Une PWA (Progressive Web App) est une application Web développée à l’aide de technologies Web modernes telles que JavaScript, HTML5 et CSS3, et offrant une expérience utilisateur proche de celle d’une application native. Des exemples connus incluent Pinterest, Google Maps ou Spotify.

Pour les PWA et les appareils Android, une simple déclaration dans l’en-tête HTML ne suffit pas. Il est nécessaire d’utiliser un fichier supplémentaire nommé manifest.json. Celui-ci est référencé dans le <head> de la page Web, structuré au format JSON et contient des métadonnées essentielles pour l’application. Cela inclut notamment le nom, la version et les icônes de l’application.

De plus, le manifeste définit des propriétés centrales telles que le mode d’affichage au démarrage, le comportement hors ligne ou certaines autorisations. Il fournit ainsi au navigateur toutes les informations nécessaires pour présenter l’application Web comme une application 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 navigateurs compatibles d’afficher correctement l’icône lors de l’installation ou de l’ajout à l’écran d’accueil.

Aller au menu principal