Avertissement: je suis l'auteur de RealFaviconGenerator, que je m'attends à être à jour (surtout, voir ci-dessous). Ne soyez donc pas surpris si cette réponse correspond à ce que RFG génère.
Le mythe de la taille unique
Il n'y a pas d'icône «taille unique». Vous ne pouvez pas créer une seule icône SVG et vous attendre à ce qu'elle fonctionne partout.
D'un point de vue technique, une seule icône SVG serait une bonne chose. Mais d'un point de vue UI et UX, ce n'est pas un résultat souhaitable. Comparez iOS et Android. Sur iOS, toutes les icônes de l'écran d'accueil sont des carrés avec des coins arrondis ( iOS remplit les régions transparentes des icônes Touch avec du noir ). Sur Android, les icônes de l'écran d'accueil utilisent souvent des formes non carrées et de la transparence (y compris les icônes de l'application Google). Soumettez une icône tactile unique et Android Chrome l'utilisera. Mais vous ne pourrez pas respecter les directives relatives aux icônes Android , contrairement à une icône dédiée.
Je conseille donc d'éviter délibérément d'utiliser une seule icône. Cibler plutôt chaque plate-forme individuellement, si possible (ce n'est pas toujours le cas).
Icônes, plateforme par plateforme
Safari sur iOS
iOS Safari attend une icône tactile . À ce jour, il s'agit d'une image PNG 180x180. Cette image ne doit pas utiliser de transparence et ses coins seront automatiquement arrondis lors de l'ajout à l'écran d'accueil. Déclaré avec:
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
Au fil des ans, cette icône est devenue «l'icône haute résolution par défaut» pour de nombreux navigateurs. Vous le trouverez donc ailleurs, lors de l'ajout au signet, etc.
Chrome Android
Android Chrome s'appuie sur le manifeste de l'application Web . Bien que ce manifeste ne soit pas dédié à Android Chrome, il en est actuellement le principal supporteur. Donc, pour le moment, il est toujours assez sûr de considérer les icônes du manifeste de l'application Web comme étant pour Android Chrome.
Comme son nom l'indique, le manifeste d'application Web est destiné aux applications Web. Mais n'importe quel site Web peut l'utiliser comme un moyen de référencer certaines icônes.
Android attend une icône PNG 192x192, transparence autorisée et encouragée.
Le manifeste est déclaré avec:
<link rel="manifest" href="/icons/site.webmanifest">
Edge et IE 12
Microsoft a présenté le navigateur browser , un document XML qui répertorie diverses icônes qui correspondent à l'interface utilisateur de Metro.
Le fichier et la couleur de fond sont déclarés avec:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
Navigateurs de bureau classiques
Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... C'est là que les choses sont un peu plus floues. Historiquement, il y avait un seul favicon.ico
fichier, toujours pris en charge. Cependant, la plupart des navigateurs récents choisissent plutôt les icônes PNG, qui sont plus légères. De plus, certains navigateurs ne sont pas en mesure de sélectionner l'icône appropriée dans le fichier ICO (ce format peut intégrer plusieurs versions d'une icône), ce qui fait qu'une icône basse résolution est mal utilisée.
On pourrait être tenté d'abandonner favicon.ico
entièrement l'ancien . Bien que j'aimerais faire ce saut dans RFG, je n'ai pas effectué les tests nécessaires pour évaluer l'impact sur les anciens navigateurs.
Ainsi le combo que je recommande encore aujourd'hui, avec des favicon.ico
icônes 16x16, 32x32 et 48x48:
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
D'autres navigateurs
D'autres navigateurs peuvent avoir des icônes dédiées. Par exemple Coast by Opera recherche une icône 228x228 . La nécessité de se concentrer sur ces navigateurs n'est pas évidente. Ils utilisent généralement l'icône tactile ou d'autres icônes lorsqu'ils ne trouvent pas «leur» icône.
Conclusion
Comme annoncé au début, c'est exactement ce que crée RealFaviconGenerator .