Favicon

Ce qu'est une favicon

Une favicon, contraction de favorite icon, est la petite image carrée qu'un navigateur affiche pour représenter un site : dans l'onglet à côté du titre de la page, dans la barre des favoris, dans l'historique, et sur les écrans d'accueil mobiles quand un site est enregistré. Bien que large de quelques pixels seulement, c'est l'un des points de contact visuels d'une marque les plus répétés en ligne, qui aide les utilisateurs à reconnaître un site et à y revenir parmi des dizaines d'onglets ouverts.

Formats et tailles

Historiquement, les favicons étaient un unique fichier .ico en 16x16 ou 32x32 pixels. La pratique moderne utilise plusieurs tailles et formats pour que l'icône reste nette partout. Les plus courantes sont 16x16 et 32x32 pour les onglets, 180x180 pour les icônes Apple touch sur les écrans d'accueil iOS, et 192x192 ou 512x512 pour Android et les progressive web apps. Le PNG est largement pris en charge, et les favicons SVG sont de plus en plus utilisées car elles s'adaptent à n'importe quelle taille et peuvent s'ajuster au mode clair ou sombre. Un petit ensemble de fichiers plus un manifeste web couvre pratiquement chaque appareil.

Comment on la déclare

Une favicon est référencée dans l'en-tête HTML avec des balises link, par exemple un lien avec rel icon pointant vers l'image, plus un lien avec rel apple-touch-icon pour iOS et un manifeste d'application web pour Android et les PWA. Les navigateurs cherchent aussi par défaut un fichier nommé favicon.ico à la racine du site, ce qui explique que ce nom de fichier existe encore comme recours. Bien réaliser ces déclarations garantit que la bonne icône apparaît sur chaque plateforme, plutôt qu'un espace vide ou un substitut générique.

Pourquoi c'est important

Une favicon est petite mais elle fait un vrai travail. Elle renforce l'identité de marque chaque fois que votre site est ouvert, rend les onglets lisibles d'un coup d'œil et les favoris reconnaissables. Elle signale du soin et de la confiance : une favicon absente ou par défaut donne l'impression d'un site inachevé. Elle apparaît aussi dans certains résultats de recherche à côté du titre de la page, et contribue donc à l'aspect professionnel d'un résultat. Pour les sites enregistrés sur un écran d'accueil de téléphone, une bonne icône touch fait la différence entre une tuile de marque proche d'une app et une capture d'écran floue.

Les erreurs fréquentes

Les problèmes typiques incluent ne fournir qu'une icône 16x16 qui paraît floue sur les écrans haute résolution et mobiles, oublier l'icône Apple touch si bien qu'iOS affiche une capture rognée, utiliser un logo trop détaillé qui devient illisible en toute petite taille, et ne pas déclarer de manifeste, ce qui fait retomber les installations Android et PWA sur des valeurs par défaut. Un design qui ignore le mode sombre peut aussi disparaître sur certains fonds d'onglet.

Les favicons chez BeBranded

Quand nous construisons un site dans Webflow, Framer ou une stack sur mesure, un jeu complet de favicons fait partie d'un site correctement fini, pas d'un détail ajouté après coup. Nous générons les bonnes tailles et formats, ajoutons l'icône Apple touch et le manifeste web, et simplifions le symbole pour qu'il reste lisible à 16 pixels tout en respectant votre marque. C'est un petit détail, mais le genre de détail qui rend un site professionnel dans chaque onglet et sur chaque appareil.