Standards favicon 2026
Ce qu’il faut livrer comme icônes a évolué. Voici comment couvrir ordinateurs, mobiles et PWAs sans oublier le classique favicon.ico.
Ce que couvre votre pack
Tout ce qu’attendent les environnements 2026 : SVG prioritaire, repli ICO, PNG Apple et manifeste JSON pour Android.
Favicon SVG
Socle moderne : rendu net à toutes les densités d’écran, avec une requête média prefers-color-scheme lorsque votre CSS adapte les couleurs au thème clair ou sombre.
ICO de secours
Fichier rassemblant plusieurs tailles carrées (16, 32, 48 px…) pour compatibilité avec les derniers usages de `/favicon.ico`.
Apple Touch Icon
PNG 180×180 pour Safari et ajouts rapides à l’écran d’accueil iOS/iPadOS.
Manifeste Web
Manifeste officiel pour l’installation PWA ; inclure des variantes icônes maskables lorsque vos visuels le permettent.
Icônes qui suivent le thème
Dans votre SVG vous pouvez conditionner palettes et contours pour suivre automatiquement le thème utilisateur sans rechargement.
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }PWA et icônes maskables
Une PWA sérieuse expose des variantes maskables : Android applique cercles, arrondis ou bulles tout en gardant votre logo dans une zone de sécurité.
Perfect Metadata ajoute automatiquement la bonne marge intérieure quand nous packons vos icônes afin que le logo ne soit jamais rogné trop serré sur Android ou ChromeOS.
Exemple pour le <head>
Collez ce fragment dans le <head> pour relier vos icônes, le fichier manifest et la couleur de thème du navigateur.
<!-- Balises à placer dans <head> -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Prêt à publier vos icônes ?
Générez le pack complet gratuitement en quelques secondes puis déployez sur votre CDN comme d’habitude.