Favicon Standard - 2019 - svg, ico, png et les dimensions?

Ce favicon dimensions, les formats de fichiers et meta/lien balises doivent être utilisés comme de 2019? Cela comprend l'icône apple, windows, android et autres appareils de gens utilisent aujourd'hui.

J'utilise Opera et je peux voir qu'il supporte le format svg. Est-il la meilleure solution pour utiliser svg de nos jours? Est-il une option "un fichier fits all"?

J'ai été la navigation sur de nombreux sites web et vérifié les différents "favicon" générateurs. Tous d'entre eux sont des ans et de travailler surtout avec des fichiers png.

Exemple:
Ce code doit être utilisé ico et svg?

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

ou devrait dimensions de l'être spécifié si ico contient plus de tailles? Je n'ai pas trouver une seule bonne réponse.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Veuillez fournir les dimensions, les formats de fichiers et meta/lien balises de ce que l'icone doit être utilisé.

realfavicongenerator.net est mis à jour régulièrement (realfavicongenerator.net/change_log)
Comme l'auteur de la RFG, je dois vous remercier ici 🙂
favicon.pro

OriginalL'auteur Jakub Muda | 2018-02-23

  1. 100

    Disclaimer: je suis l'auteur de RealFaviconGenerator, 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'y a 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, plateforme par plateforme

    iOS Safari

    iOS Safari s'attend à un appuyez sur l'icône. À 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="/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 repose sur la 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="/icons/site.webmanifest">

    macOS Safari

    Bien que macOS Safari n'a pas de favicon, il prend en charge la icône de masque pour les onglets épinglés. C'est un monochrome icône au format SVG et une couleur unique qui le remplit lorsque l'onglet est actif.

    Déclarer avec:

    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

    Bord 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 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, IE... C'est là que les choses sont un peu plus floues. Historiquement, il n'y a qu'un seul favicon.ico 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.

    Donc le combo je recommande toujours aujourd'hui, avec favicon.ico l'incorporation de 16x16, 32x32 et 48x48 icônes:

    <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">

    Autres navigateurs

    Les autres navigateurs peuvent avoir dédié icônes. Par exemple 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.

    J'ai utilisé votre générateur à plusieurs reprises. Je vous AIME!!!!
    Aucun changement récent. C'est à cause d'une torsion: si vous placez vos icônes dans le répertoire racine (par exemple. /favicon.ico), C'est à dire le trouverez par la convention. Ainsi, aucune déclaration dans ce cas particulier. Générer un favicon nouveau avec /path/to/icons que le chemin et cette fois, la déclaration sera présent.
    Ah, la droite, qui a du sens! Merci pour la clarification.
    C'est le droit. C'est encore en dev donc pour l'instant browserconfig est encore le chemin à parcourir.
    Tu veux dire la radiation d'un favicon.ico? J'ai besoin d'une journée pour obtenir et installer Win XP et Vista donc je peux tester différentes formules... Cet été?

    OriginalL'auteur philippe_b

  2. 6

    Il est également intéressant de mentionner que, ensemble, avec favicon quelques autres balises doivent être ajoutées comme la OG de balises, Twitter cartes ou MS-application. Tout cela sert le même but - une identification visuelle de votre marque et de devraient également être inclus.

    Twitter carte peut être trouvé ICI

    - Je ajouter de 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 de faire des images 1300px par 650px et jpg/png.

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

    Facebook OG a plus d'option mais en général sont comme suit:

    <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 vous recommandons de rapport spécifique de l'image et de la taille du fichier est limitée à 8 mo. Pour garder des images similaires avec twitter carte je recommande dimensions 1240px par 650px et jpg/png. Facebook et twitter n'acceptons pas de svg...

    J'ai trouvé que certaines marques mondiales utiliser cette balise sur leurs sites web. On avait dimensions 150x150 pixels et le format png. Cette image peut être utilisé par les navigateurs pour afficher dans les résultats de recherche.

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

    Real Favicon Generator couvre également Microsoft favicons. Il existe de nombreuses autres balises meta pour MS-application pour l'optimisation de proue de la page et d'autres infos comme l'image sont affichées. Cette rubrique est aussi la peine de lire.

    J'espère que cela est utile pour quelqu'un et développe le thème de l'image de marque de votre site web.

    OriginalL'auteur Jakub Muda