Favicon Standard - 2019 - svg, ico, png und Abmessungen?

Was favicon Abmessungen, Datei-Formate und meta/link-tags sollten verwendet werden, ab 2019? Dies schließt apple-Symbol, windows -, android-und anderen Geräten, die die Leute heute benutzen.

Benutze ich Opera und ich kann sehen, es unterstützt das svg-format. Ist es die beste Lösung die Verwendung von svg-heute? Gibt es eine option "eine Datei fits all"?

Ich habe das durchsuchen vieler Webseiten und überprüft verschiedene "favicon-Generatoren". Alle von Ihnen sind Jahre alt und arbeiten meist mit png-Dateien.

Beispiel:
Welchen code sollte verwendet werden, ico und svg? 

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

sollte oder Dimensionen angegeben werden, wenn ico enthält mehr Größen? Ich finde nicht eine gute Antwort.

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

Bitte geben Sie die Abmessungen, die Datei-Formate und meta/link-tags, was favicons verwendet werden soll.

InformationsquelleAutor Jakub Muda | 2018-02-23
  1. 117

    Disclaimer: ich bin der Autor von RealFaviconGenerator, die ich erwarten Sie, um up-to-date (meist, siehe unten). Also nicht Wundern, wenn diese Antwort dem entspricht, was RFG generiert.

    Die one-size-fits-all-Mythos

    Gibt es keine "one-size-fits-all" - Symbol. Sie können nicht erstellen Sie eine einzelne SVG-Symbol und erwarten, dass es funktioniert überall.

    Aus technischer Sicht, eine einzelne SVG-Symbol wäre eine gute Sache. Aber von UI-und UX-Sicht ist dies kein wünschenswertes Ergebnis. Vergleichen Sie iOS und Android. Auf iOS, werden alle Symbole auf dem Startbildschirm sind Quadrate mit abgerundeten Ecken (iOS füllt die transparenten Regionen der Touch-Symbole mit schwarzen). Auf Android -, home-Bildschirm Symbole Häufig Verwendung nicht-quadratische Formen und die Transparenz (inklusive Google app-Symbole). Senden Sie eine single-touch-Symbol, und Android-Chrome verwenden. Aber Sie werden nicht in der Lage, mit Android-Symbol-Richtlinien, in der Erwägung, dass eine dedizierte icon könnte.

    Also habe ich, um bewusst zu vermeiden, mit einem einzigen Symbol. Vielmehr target jede Plattform einzeln, wenn möglich (dies ist nicht immer der Fall ist).

    Symbole, Plattform pro Plattform

    iOS-Safari

    iOS-Safari erwartet eine touch-Symbol. Ab heute ist dies ein 180x180-PNG-Bild. Dieses Bild sollte nicht mit Transparenz, und seine Ecken werden automatisch gerundet, wenn Hinzugefügt, um home-Bildschirm. Deklariert mit:

    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

    Laufe der Jahre, dieses Symbol ist der "Standard-hohe Auflösung-Symbol" für viele Browser. So finden Sie es an anderer Stelle, beim hinzufügen zu den Favoriten, etc.

    Android Chrome

    Android Chrome setzt auf die Web-App-Manifest. Obwohl dieses manifest ist nicht für Android Chrome, es ist derzeit der wichtigste Unterstützer. Also im moment ist es noch ziemlich sicher zu betrachten die icons aus dem Web-App-Manifest zu werden, für Android-Chrome.

    Wie der name schon sagt, der Web-App-Manifest ist, sowie web-apps. Aber jede Website kann verwenden Sie es als eine Möglichkeit zum verweisen auf einige icons.

    Android erwartet eine 192x192 PNG icon, Transparenz erlaubt und erwünscht.

    Dem manifest deklariert mit:

    <link rel="manifest" href="/icons/site.webmanifest">

    macOS Safari

    Obwohl macOS Safari hat kein favicon, es unterstützt die Maske Symbol für angeheftete tabs. Dies ist eine einfarbige SVG-Symbol und eine einzelne Farbe, füllt es aus, wenn die Registerkarte aktiv ist.

    Erklären es mit:

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

    Edge und DH 12

    Führte Microsoft browserconfig, ein XML-Dokument, das enthält verschiedene Symbole, die passen die Metro UI.

    Die Datei und hintergrund Farbe deklariert sind mit:

    <meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

    Klassischen desktop-Browser

    Windows/macOS, Chrome, Windows - /macOS-Firefox, IE... Dies waren Dinge, die sind ein wenig verschwommen. Historisch gesehen gab es eine einzige favicon.ico Datei, noch unterstützt. Allerdings werden die meisten neueren Browsern eher pick PNG-icons, die sind leichter. Plus einige Browser sind nicht in der Lage, wählen Sie das richtige Symbol in der ICO-Datei (dieses format einbetten können mehrere Versionen eines Icons), was eine niedrige Auflösung-Symbol wird falsch verwendet.

    Könnte man versucht sein, fallen die alte favicon.ico ganz. Obwohl ich mag würde, um diesen Sprung in RFG, ich wusste nicht, führen Sie die erforderlichen tests zur Bewertung der Auswirkungen auf die alte Browser.

    Damit die combo, die ich heute noch raten, mit favicon.ico Einbettung 16x16, 32x32 und 48x48 icons:

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

    Anderen Browsern

    Anderen Browsern möglicherweise gewidmet haben Symbole. Zum Beispiel Coast by Opera ist auf der Suche nach einem 228x228 Symbol. Die Notwendigkeit, sich auf diese Browser ist nicht offensichtlich. Sie in der Regel verwenden Sie die touch-Symbol oder andere Symbole, wenn Sie nicht finden können, "Ihre" - Symbol.

    Abschluss

    Wie angekündigt am Anfang, das ist genau das, was RealFaviconGenerator erstellt.

    • Ich habe Ihr generator mehrere Male. Ich LIEBE Sie!!
    • Danke ^^
    • Sie sagen, diese Antwort Spiegel was RFG macht, aber die Website ist "Fügen Sie den folgenden code in den <head> - Abschnitt der Seiten:" Abschnitt mit den Installationsanweisungen nicht enthalten <link href="/icons/favicon.ico"> (siehe oben in dieser Antwort). Ist, dass eine aktuelle änderung, oder fehlt etwas?
    • Keine der letzten änderung. Dies wird durch einen twist: wenn Sie Ihre Symbole in das root-Verzeichnis (zB. /favicon.ico), IE wird es durch Konvention. So, keine Erklärung in diesem speziellen Fall. Generiert ein favicon wieder mit /path/to/icons wie der Weg, und dieses mal ist die Erklärung vorhanden sein wird.
    • Ah, OK, das macht Sinn! Vielen Dank für die Klarstellung.
    • msapplication-config " msapplication-TileColor, browserconfig veraltet sind. Alles ist in Bewegung in Richtung manifestieren.json und PWAs.
    • Das ist richtig. Es ist immer noch unter dev so jetzt browserconfig ist immer noch der Weg zu gehen.
    • Jede Schätzung, wenn Real Favigon Generator aktualisiert werden?
    • Du meinst die mögliche Entfernung von favicon.ico? Ich brauche einen Tag, um zu bekommen und zu installieren Win XP und Vista, so kann ich testen Sie verschiedene Pakete... in Diesem Sommer?
    • Wenn Sie sich einschließlich einer browserconfig.xml Sie, können Sie einfach geben Sie die Fliese Farbe, die dort, ohne die Kachel-color meta-tag (oder in beiden meta-tags, wenn Sie sind servieren die browserconfig.xml von der Wurzel)?
    • Sollten die Symbole reichen bis an die Grenze, oder sollte es einen Rand? Wenn jemand zum Beispiel speichert ein Lesezeichen für ein Handy, je nach Handy-es könnte sparen Sie als Kreis. Sollte ich das ausgleichen oder geht das automatisch?
    • Soweit ich weiß, das Verhalten, das Sie beschreiben (ie. Ernte-Symbol, um einen Kreis) ist ein Android-Ding, richtig? Für diese Besondere Plattform, ja, sollten Sie sicherstellen, dass Ihr Symbol ist immer noch gut suchen, wenn beschnitten. RealFaviconGenerator bieten sollte, solche anzeigen zu lassen, die Sie leicht prüfen, ob Ihr Symbol ist ein Kreis, bereit.

    InformationsquelleAutor philippe_b
  2. 7

    Es ist auch erwähnenswert, dass zusammen mit favicon einige weitere tags aufgenommen werden sollte, wie die OG tags, Twitter cards oder MS-Anwendung. Alles dient dem gleichen Zweck - visuellen Identifizierung der Marke und der sollte auch enthalten sein.

    Twitter-Karte gefunden werden kann HIER

    Füge ich folgenden tags

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

    Fand ich, dass viele Benutzer machen Bilder 1300px von 650px und jpg - /png-Formate.

    Nach dem hinzufügen von tags Sie sollten validiert werden, HIER

    Facebook OG hat mehr option, sondern die Allgemeinen sind wie folgt:

    <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 empfehlen spezifische Verhältnis von Bild und die Dateigröße ist beschränkt auf 8Mb. Zu halten, ähnliche Bilder mit twitter-Karte, die ich empfehlen Dimensionen 1240px von 650px und jpg - /png-format. Facebook und twitter nicht akzeptieren, svg...

    Fand ich, dass einige Globale Marken, die mit diesem tag auf Ihren websites. Man hatte die Maße 150x150 Pixel und im png-format. Dieses Bild kann verwendet werden, von den Browsern in den Suchergebnissen angezeigt werden.

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

    Real Favicon Generator umfasst auch Microsoft favicons. Es gibt viele weitere meta-tags für MS-Anwendung zur Optimierung der Bogen-Seite und andere infos wie das Bild angezeigt werden. Dieses Thema ist auch lesenswert.

    Ich hoffe, dies ist nützlich für jemanden, und erweitert das Thema branding Ihrer website.

    InformationsquelleAutor Jakub Muda
Schreibe einen Kommentar