Quelles dimensions de favicon, formats de fichiers et balises meta / link devraient être utilisés à partir de 2020? Cela inclut l'icône Apple, Windows, Android et d'autres appareils que les gens utilisent aujourd'hui.

J'utilise Opera et je peux voir qu'il prend en charge le format svg. Est-ce la meilleure solution pour utiliser svg de nos jours? Existe-t-il une option "un fichier pour tous"?

J'ai parcouru de nombreux sites Web et vérifié différents "générateurs de favicon". Tous ont des années et fonctionnent principalement avec des fichiers png.

Par exemple: quel code utiliser pour ico et svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

ou les dimensions doivent-elles être spécifiées 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 fournir les dimensions, les formats de fichier et les balises meta / link des favicons à utiliser.

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.icofichier, 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.icoentiè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.icoicô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 .

Il convient également de mentionner qu'avec le favicon, d'autres balises doivent être ajoutées comme les balises OG, les cartes Twitter ou l'application MS. Tout cela sert 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 balises suivantes

<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 aux formats 1300px par 650px et jpg / png.

Après avoir ajouté toutes les balises, elles doivent être validées ICI

Facebook OG a plus d'options mais les généralités sont les suivantes:

<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 ratio spécifique de 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 avait des dimensions 150x150 pixels et un format png. Cette image peut être utilisée par les navigateurs pour s'afficher dans les résultats de recherche.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator couvre également les favicons de Microsoft. Il existe de nombreuses autres balises meta pour MS-application pour optimiser 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 cela sera utile pour quelqu'un et élargira le sujet de la marque de votre site Web.