Favicon Standard - 2019 - svg, ico, png et dimensions?
Quelles dimensions, formats de fichier et balises meta/link devraient être utilisés à partir de 2019? Cela comprend l’icône Apple, les fenêtres, Android et les autres appareils utilisés de nos jours.
J'utilise Opera et je peux voir qu'il supporte le format svg. Est-ce la meilleure solution pour utiliser svg de nos jours? Existe-t-il une option "un fichier convient à tous"?
J'ai parcouru de nombreux sites Web et vérifié différents "générateurs de favicon". Tous sont âgés de plusieurs années et travaillent principalement avec des fichiers png.
Exemple: Quel code faut-il utiliser ico et svg?
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
ou faut-il spécifier les dimensions si ico contient plus de tailles? Je n'ai pas trouvé une bonne réponse.
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
Veuillez indiquer les dimensions, les formats de fichier et les balises meta/link indiquant les favicons à utiliser.
Avertissement: Je suis l'auteur de RealFaviconGenerator, que je m'attends à mettre à jour (principalement ci-dessous). Alors ne soyez pas surpris si cette réponse correspond à ce que RFG génère.
Le mythe du one-size-fits-all
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 du point de vue de l'interface utilisateur et de l'expérience utilisateur, 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 aux coins arrondis ( iOS remplit les zones transparentes des icônes tactiles en noir ). Sur Android, les icônes de l'écran d'accueil utilisent souvent des formes et des transparences non carrées (y compris les icônes d'application Google). Soumettez une seule icône tactile et Android Chrome l'utilisera. Mais vous ne pourrez pas faire correspondre directives d'icône Android , alors qu'une icône dédiée le pourrait.
Je conseille donc d'éviter délibérément d'utiliser une seule icône. Ciblez plutôt chaque plate-forme individuellement, lorsque cela est possible (ce n'est pas toujours le cas).
Icônes, plateforme par plateforme
iOS Safari
iOS Safari attend un icône tactile . Il s’agit aujourd’hui d’une image au format PNG 180x180. Cette image ne doit pas utiliser de transparence et ses coins seront automatiquement arrondis lorsqu’ils seront ajoutés à 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" de nombreux navigateurs. Ainsi, vous le trouverez ailleurs, lors de l'ajout d'un signet, etc.
Android Chrome
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. Par conséquent, pour le moment, il est encore relativement prudent de considérer les icônes du manifeste de l'application Web comme destinées à Android Chrome.
Comme son nom l'indique, le manifeste d'applications Web est destiné aux applications Web. Mais n'importe quel site Web peut l'utiliser comme moyen de faire référence à certaines icônes.
Android attend une icône PNG 192x192, la transparence autorisée et encouragée.
Le manifeste est déclaré avec:
<link rel="manifest" href="/icons/site.webmanifest">
macOS Safari
Bien que macOS Safari ne comporte pas d’icône de favicon, il prend en charge le icône du masque pour les onglets épinglés . Il s’agit d’une icône monochromatique SVG et d’une couleur unique qui la remplit lorsque l’onglet est actif.
Déclarez-le avec:
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
Edge et IE 12
Microsoft a introduit le browserconfig , un document XML qui répertorie diverses icônes correspondant à l'interface utilisateur de Metro.
Le fichier et 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, IE ... C’est là que les choses sont un peu plus floues. Historiquement, il y avait un seul fichier favicon.ico, toujours pris en charge. Cependant, les navigateurs les plus récents choisissent plutôt les icônes PNG, qui sont plus claires. 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 entraîne l’utilisation erronée d’une icône basse résolution.
On pourrait être tenté de laisser tomber complètement le vieux favicon.ico. Bien que je souhaite 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 favicon.ico incorporant des 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 peuvent pas trouver "leur" icône.
Conclusion
Comme annoncé au début, c'est exactement ce que RealFaviconGenerator crée.
Il est également intéressant de mentionner qu’avec la favicon, d’autres balises devraient être ajoutées, telles que les balises OG, les cartes Twitter ou les applications MS. Tout cela a le même objectif - l’identification visuelle de votre marque et devrait également être inclus.
La carte Twitter peut être trouvée ICI
J'ajoute les tags suivants
<meta name="Twitter:card" content="summary_large_image">
<meta name="Twitter:site" content="@YourAccount">
<meta name="Twitter:creator" content="@YourAccount">
<meta name="Twitter:title" content="Title of your page">
<meta name="Twitter:url" content="URL of your page">
<meta name="Twitter:description" content="Your description here">
<meta name="Twitter:image:src" content="URL of image">
J'ai constaté que de nombreux utilisateurs créent des images 1300px avec des formats 650px et jpg/png.
Après avoir ajouté toutes les balises, elles doivent être validées HERE
Facebook OG a plus d'option mais général sont les suivants:
<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">
<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->
Facebook recommande un rapport spécifique entre l'image et la taille du fichier est limitée à 8 Mo. Pour conserver des images similaires avec la carte Twitter, je recommande les dimensions 1240px par 650px et le format jpg/png. Facebook et Twitter n'acceptent pas les svg ...
J'ai constaté que certaines marques mondiales utilisent cette balise sur leurs sites Web. L'un d'eux avait des dimensions de 150x150 pixels et un format png. Les navigateurs peuvent utiliser cette image pour afficher les résultats de recherche.
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator couvre également les favicons Microsoft. Il existe de nombreuses autres balises méta pour que MS-application optimise l'inclinaison de la page et d'autres informations telles que l'image sont affichées. Ce sujet mérite également d'être lu.
J'espère que ceci est utile pour quelqu'un et élargit le sujet de la marque de votre site Web.