Glossaire des favicons

Un favicon est la petite icône qu'un navigateur affiche pour votre site dans les onglets, les favoris et l'historique. Ce que c'est, les tailles et formats nécessaires, et comment en ajouter un.

Une icône d'application représente une application installée sur un écran d'accueil ou un lanceur, pas un site dans un onglet de navigateur. Où chaque plateforme la lit, et quoi livrer.

Un favicon est la minuscule icône d'onglet ; une image Open Graph est le grand aperçu quand votre lien est partagé. Des fichiers différents pour des rôles différents : voici lequel est lequel.

Un logo est votre marque complète ; un favicon est un dérivé minuscule qui doit se lire à 16 pixels. Pourquoi on ne peut pas simplement réduire le logo, et comment en dériver un qui fonctionne.

Faire un favicon à la main, c'est exporter chaque taille et écrire les balises soi-même ; un générateur fait les deux en quelques secondes. Quand le faire à la main convient et quand non.

Guide complet des tailles de favicon. Toutes les dimensions pour les navigateurs, iOS, Android et PWA, lesquelles sont essentielles, et où va chaque fichier.

La balise <link rel="icon"> indique au navigateur où se trouve votre favicon. Ce que font rel, href, type et sizes, où placer la balise, et l'ensemble moderne à livrer.

"shortcut icon" est une valeur rel héritée pour les favicons. Pourquoi le mot-clé "shortcut" est redondant, si vous en avez encore besoin, et quoi écrire à la place.

Les navigateurs mettent les favicons en cache plus fortement et plus longtemps que la plupart des ressources, et séparément de la page. Pourquoi ils sont si tenaces, et comment forcer un favicon à se rafraîchir.

Un favicon peut réagir au réglage clair ou sombre du système : un SVG avec une media query à l'intérieur, ou deux PNG permutés via prefers-color-scheme sur la balise link.

Google affiche un favicon à côté de votre résultat, surtout sur mobile. La taille et le format nécessaires, comment il trouve l'icône, et pourquoi la vôtre pourrait ne pas apparaître.

Les navigateurs et robots d'exploration demandent /favicon.ico à la racine de votre domaine, que vous le liiez ou non. Pourquoi le fichier a sa place à la racine, et comment les frameworks changent où vous le placez.

BIMI affiche votre logo de marque à côté des e-mails dans les boîtes de réception compatibles : le favicon de l'e-mail. Ce qu'il faut : un logo SVG Tiny PS, l'application de DMARC, et souvent un certificat.

Les favicons s'affichent dans des emplacements carrés, donc une image non carrée est encadrée de vide ou étirée. Pourquoi le carré est de fait requis, et comment gérer un logo large.

Les favicons sont minuscules : un favicon.ico fait généralement quelques kilo-octets et les tailles PNG bien moins de 100 Ko. Ce qui détermine le poids, et pourquoi un favicon surdimensionné est un signal d'alarme.

ICO vs PNG pour un favicon, comparés : profondeur de couleur, transparence, taille de fichier et prise en charge des navigateurs, plus les balises d'en-tête pour livrer les deux sans conflit.

Un favicon SVG est un seul fichier vectoriel qui reste net à chaque taille et peut réagir au mode sombre. Prise en charge des navigateurs, la balise link, et les replis à conserver.

favicon.ico est l'icône que les navigateurs demandent à la racine de votre site lorsqu'aucune icône n'est déclarée. Ce qu'il y a dans le fichier, où le placer, et pourquoi le conserver.

Vous pouvez intégrer un favicon en tant qu'URI de données base64 au lieu d'un fichier séparé. Quand cela économise une requête, et les surfaces où cela casse discrètement.

Certains navigateurs animent un favicon GIF dans l'onglet. Lesquels le prennent en charge, pourquoi les sites utilisent plutôt JavaScript pour un état en direct, et quand le garder statique.

Les favicons WebP fonctionnent dans la plupart des navigateurs modernes mais pas partout, et jamais pour /favicon.ico. Quand une icône WebP convient et pourquoi PNG et ICO restent le choix sûr.

Les favicons transparents ont belle allure dans un onglet mais cassent sur les écrans d'accueil iOS, qui composent sur du noir. Quand la transparence aide et quand utiliser un fond plein.

Vous pouvez utiliser un emoji comme favicon avec un SVG en ligne d'une seule ligne : pratique pour un placeholder rapide. Pourquoi il s'affiche différemment selon l'OS, et quand exporter un vrai fichier.

Les icônes de manifeste sont les entrées du tableau icons de manifest.json. Ce que fait chaque champ, les tailles à déclarer, et comment les navigateurs en choisissent une.

Une icône maskable remplit tout le carré pour que les plateformes puissent la rogner à n'importe quelle forme. La zone de sécurité à 80 %, le champ purpose du manifeste, et comment la tester.

Le manifeste d'application web est un fichier JSON qui indique aux navigateurs comment votre site se comporte une fois installé : son nom, ses icônes, ses couleurs et son mode d'affichage. Ce qu'il contient et pourquoi.

Une PWA a besoin d'icônes précises avant qu'un navigateur ne propose de l'installer : 192x192 et 512x512 dans le manifeste, idéalement une maskable, plus l'apple-touch-icon pour iOS.

La propriété display du manifeste décide de l'allure d'une PWA installée : browser, minimal-ui, standalone ou fullscreen. Ce qu'affiche chaque mode et lequel choisir.

Un manifeste a deux couleurs aux rôles distincts : theme_color teinte l'interface de l'OS autour de votre application, background_color peint l'écran de démarrage. Plus le meta theme-color.

L'apple-touch-icon est le PNG qu'iOS utilise lorsqu'un site est ajouté à l'écran d'accueil. La taille 180x180, la balise link, et pourquoi la transparence devient noire.

La balise meta theme-color indique aux navigateurs la couleur à appliquer à l'interface autour de votre page. Où elle apparaît, les variantes en mode sombre, et l'équivalent dans le manifeste.

Les onglets épinglés de Safari utilisent un SVG monochrome déclaré avec rel="mask-icon". À quoi le fichier doit ressembler, l'attribut color, et s'il compte encore.

La variante precomposed disait aux anciens iOS de ne pas ajouter leur reflet brillant à une icône d'écran d'accueil. Si elle fait encore quelque chose, et quoi utiliser aujourd'hui.

browserconfig.xml et les balises meta msapplication-* définissaient les tuiles de sites épinglés pour Windows et l'ancien Edge. Ce qu'elles faisaient et si vous en avez encore besoin.

La balise meta apple-mobile-web-app-capable exécute une application web d'écran d'accueil en plein écran sur iOS. Ce qu'elle fait, la balise de barre d'état, et l'alternative moderne du manifeste.

apple-touch-startup-image définit l'écran de lancement d'une application web ajoutée à l'écran d'accueil iOS. Pourquoi il faut une image par taille d'appareil et les media queries impliquées.