Avertissement: je suis l'auteur de RealFaviconGenerator, et je m'attends à être à jour (pour la plupart, voir ci-dessous). Ne soyez donc pas surpris si cette réponse correspond à ce que la RFG génère.
Le one-size-fits-all mythe
Il n'existe pas de "one size fits all" icône. Vous ne pouvez pas créer une seule icône au format SVG et espérer qu'il fonctionne partout.
À partir d'un point de vue technique, une seule icône au format SVG serait une bonne chose. Mais à partir d'une UI et UX point de vue, ce n'est pas un résultat souhaitable. Comparer iOS et Android. Sur iOS, tous les icônes de l'écran sont des carrés avec des coins arrondis (iOS remplit les régions transparentes de Toucher les icônes avec le noir). Sur Android, l'écran d'accueil icônes utilisent souvent des non-formes carrées et à la transparence (y compris Google app icônes). Soumettre une seule icône de la touche et Android de google Chrome l'utiliser. Mais vous ne serez pas en mesure de faire correspondre Android icône de lignes directrices, tandis qu'une icône spécifique pourrait.
Donc je conseille d'éviter délibérément à l'aide d'une seule icône. Plutôt cible de chaque plate-forme individuellement, lorsque cela est possible (ce n'est pas toujours le cas).
Icônes de la plateforme par plateforme
iOS Safari
iOS Safari s'attend à une icône de la touche. À compter d'aujourd'hui, c'est un 180x180 image PNG. Cette image ne doit pas utiliser la transparence et l'un de ses coins sera automatiquement arrondi lorsqu'il est ajouté à l'écran d'accueil. Déclarée avec:
<link rel="apple-touch-icon" sizes="180x180" href="http://stackoverflow.com/icons/apple-touch-icon.png">
Au fil des ans, cette icône est devenu le "défaut de haute résolution icône" pour de nombreux navigateurs. Sorte que vous ne trouverez nulle part ailleurs, lors de l'ajout aux favoris, etc.
Android Chrome
Android Chrome s'appuie sur le Web du Manifeste de l'Application. Bien que ce manifeste n'est pas dédié à Android, Chrome, il est actuellement son principal partisan. Donc pour le moment, il est encore tout à fait sûr de considérer les icônes de l'Application Web Manifester être pour Android Chrome.
Comme son nom l'indique, l'Application Web est Manifeste pour les applications web. Mais n'importe quel site web peut l'utiliser comme un moyen de faire référence à certaines icônes.
Android s'attend à un 192x192 PNG icône, la transparence autorisée et encouragée.
Le manifeste est déclarée avec:
<link rel="manifest" href="http://stackoverflow.com/icons/site.webmanifest">
Edge et IE 12
Microsoft a introduit la browserconfig, un document XML qui répertorie les différents icônes qui correspondent à l'INTERFACE Metro.
Le fichier et la couleur d'arrière-plan sont déclarées avec:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
Classique les navigateurs de bureau
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... C'est là que les choses sont un peu plus floues. Historiquement, il n'y a qu'un seul favicon.ico le fichier, toujours pris en charge. Cependant, la plupart des navigateurs récents plutôt choisir des icônes au format PNG, qui sont plus légères. En Plus de 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), conduisant à une faible résolution de l'icône d'être utilisées à mauvais escient.
On pourrait être tenté d'abandonner la vieille favicon.ico entièrement. Bien que je voudrais faire ce saut dans la RFG, je n'ai pas exécuter les tests nécessaires pour évaluer l'impact sur les anciens navigateurs.
Ainsi, le combo je recommande toujours aujourd'hui, avec favicon.ico d'incorporation de 16x16, 32x32 et 48x48 icônes:
<link rel="icon" type="image/png" sizes="32x32" href="http://stackoverflow.com/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://stackoverflow.com/icons/favicon-16x16.png">
<link rel="shortcut icon" href="http://stackoverflow.com/icons/favicon.ico">
Les autres navigateurs
D'autres navigateurs peuvent avoir dédié icônes. Pour l'exemple de la Côte par l'Opéra est à la recherche d'un 228x228 icône. La nécessité de se concentrer sur ces navigateurs n'est pas évident. Ils utilisent en général l'icône de contact ou d'autres icônes quand ils ne peuvent pas trouver "leur" icône.
Conclusion
Comme annoncé au début, c'est exactement ce que RealFaviconGenerator crée.
