Favicon HTML

La session Head a construit une boîte de métadonnées de départ avec charset, viewport, title et un lien de feuille de style. Un favicon est un autre lien pratique dans head : la petite icône qui apparaît dans l’onglet du navigateur à côté du titre de la page. Il aide les gens à reconnaître votre site parmi des onglets encombrés, des favoris et certaines listes d’historique. Vous ne le dessinez pas avec du texte CSS — vous indiquez au navigateur un petit fichier image.

Qu’est-ce qu’un favicon

Un favicon est une ressource d’icône de site. Les navigateurs la récupèrent parce que votre HTML (ou une hypothèse par défaut comme /favicon.ico) leur dit où chercher. Les pages modernes le déclarent en général explicitement avec un élément link pour que le chemin et le type de fichier soient clairs. L’icône doit rester simple et assez carrée pour rester lisible à très petite taille.

Réponse directe

Dans le head du document, ajoutez un link avec rel="icon" et un href qui pointe vers votre fichier d’icône. Les choix courants sont favicon.ico, un PNG comme images/favicon.png, ou une icône SVG. Le chemin doit se résoudre comme les autres URL relatives (voir Chemins de fichiers). Après avoir changé le fichier, attendez-vous au cache du navigateur — un rechargement forcé ou une fenêtre privée révèle souvent la nouvelle icône plus vite qu’un rechargement normal.

Lien .ico classique

Beaucoup de tutoriels commencent encore avec favicon.ico dans le même dossier que le fichier HTML. L’attribut optionnel type peut aider les navigateurs à comprendre la ressource.

Lecture de l’exemple classique

• Le link vit dans head, à côté de title et des autres métadonnées
• rel="icon" marque la ressource comme favicon
• href="favicon.ico" suppose que le fichier d’icône se trouve à côté de cette page HTML
• type="image/x-icon" est une indication MIME courante pour les fichiers .ico
• Sans chemin correct, l’onglet peut garder une icône par défaut ou vide

Variantes PNG et SVG

Les favicons PNG sont faciles à exporter depuis les outils de design. Les favicons SVG restent nets à différentes échelles quand le navigateur les prend en charge. Vous pouvez garder l’icône dans un dossier images et y pointer avec href.

Choisir un format de départ

• .ico — traditionnel, largement reconnu par les outils plus anciens
• .png — simple pour les débutants qui exportent déjà des assets PNG
• .svg — option vectorielle nette quand les navigateurs de votre public la prennent en charge
  Vous n’avez pas besoin de chaque format dès le premier jour. Livrez une icône claire avec un lien correct, puis élargissez plus tard pour apple-touch ou des paquets multi-tailles si un projet l’exige.

Les chemins comptent autant que le balisage

Si href pointe vers un fichier manquant, la requête favicon renvoie 404 et l’icône de l’onglet échoue sans bruit. Vérifiez les noms de dossiers, l’orthographe, et si le fichier HTML a bougé sans l’icône. Les chemins relatifs sont relatifs à l’URL du document HTML, pas à l’endroit où vous « pensez » que le fichier devrait être.

Le cache peut cacher les mises à jour

Les navigateurs mettent souvent les favicons en cache de façon agressive. Vous changez favicon.png, rechargez, et voyez encore la marque d’hier. Cela ne signifie pas toujours que le HTML est faux. Essayez un rechargement forcé, une fenêtre privée/incognito, ou renommez temporairement le fichier et mettez à jour href pour que le navigateur récupère une URL neuve. Enseignez cette habitude tôt pour que les apprenants ne suppriment pas un balisage qui fonctionne par panique.

Gardez des icônes petites et claires

Une très grande photo compressée dans un onglet devient un flou illisible. Préférez une marque simple, un fort contraste et un canevas carré. Le favicon est une aide à la reconnaissance, pas une seconde image héro. Réservez le branding détaillé au corps de la page.

Où appartient le lien

Placez les éléments link de favicon dans head. Les mettre dans body est le mauvais endroit pour des icônes au niveau du document. Vous savez déjà que head sert aux métadonnées et aux liens de ressources ; les favicons suivent cette règle.

Pratiquez dans votre éditeur

1. Placez une petite icône carrée à côté de votre fichier HTML ou dans un dossier images.
2. Ajoutez <link rel="icon" href="..."> dans head avec un chemin correspondant.
3. Ouvrez la page et regardez l’onglet du navigateur à côté du texte du titre.
4. Cassez volontairement le chemin, rechargez, et remarquez que l’icône disparaît ou revient — puis corrigez.
5. Remplacez le fichier d’icône et, si l’ancienne reste, ouvrez une fenêtre privée ou faites un rechargement forcé pour confirmer le nouvel art.

Erreurs faciles

• Mettre le link favicon dans body au lieu de head
• Mauvais href : l’icône est en 404 alors que le HTML de la page a encore l’air correct
• Attendre une mise à jour visuelle instantanée alors qu’un ancien favicon est en cache
• Utiliser une très grande photographie au lieu d’une petite marque carrée simple
• Oublier d’envoyer le fichier d’icône quand vous déployez seulement le HTML
• Confondre rel="stylesheet" et rel="icon" et se demander pourquoi le CSS ou l’icône de l’onglet se comporte mal

Résumé

• Les favicons se lient dans head avec rel="icon"
• Pointez href vers un vrai fichier .ico, .png ou .svg
• Des chemins corrects et des contrôles de cache calmes résolvent la plupart des signalements d’« icône manquante »
• Gardez des icônes petites et reconnaissables à la taille d’un onglet
• Un lien qui fonctionne vaut mieux qu’une pile de formats d’icônes inutilisés