wake-up-neo.com

Favicon Standard - 2019 - Svg, ICO, PNG und Dimensionen?

Welche Favicon-Dimensionen, Dateiformate und Meta/Link-Tags sollten ab 2019 verwendet werden? Dies umfasst das Symbol Apple, Windows, Android und andere Geräte, die heute verwendet werden.

Ich verwende Opera und sehe, dass es das SVG-Format unterstützt. Ist es heutzutage die beste Lösung, svg zu verwenden? Gibt es eine Option "eine Datei passt für alle"?

Ich habe viele Websites besucht und verschiedene "Favicon-Generatoren" überprüft. Alle von ihnen sind Jahre alt und arbeiten meist mit PNG-Dateien.

Beispiel: Welcher Code sollte ico und svg verwendet werden?

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

oder sollten abmessungen angegeben werden, wenn ico mehr größen enthält? Ich habe keine gute Antwort gefunden.

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

Bitte geben Sie Maße, Dateiformate und Meta/Link-Tags an, welche Favoriten verwendet werden sollen.

66
Jakub Muda

Haftungsausschluss: Ich bin der Autor von RealFaviconGenerator, von dem ich erwarte, dass er auf dem neuesten Stand ist (meistens siehe unten). Seien Sie also nicht überrascht, wenn diese Antwort mit der von RFG generierten Antwort übereinstimmt.

Der Mythos der Einheitsgröße

Es gibt kein "Einheitsgröße" -Symbol. Sie können kein einzelnes SVG-Symbol erstellen und erwarten, dass es überall funktioniert.

Aus technischer Sicht wäre ein einzelnes SVG-Symbol eine gute Sache. Aus Sicht der Benutzeroberfläche und der Benutzeroberfläche ist dies jedoch kein wünschenswertes Ergebnis. Vergleichen Sie iOS und Android. Unter iOS sind alle Symbole auf dem Startbildschirm Quadrate mit abgerundeten Ecken ( iOS füllt transparente Bereiche von Touch-Symbolen mit Schwarz ). Unter Android verwenden Startbildschirmsymbole häufig nicht quadratische Formen und Transparenz (einschließlich Google App-Symbole). Senden Sie ein einzelnes Touch-Symbol und Android Chrome) wird es verwenden. Sie können jedoch keine Übereinstimmung erzielen Richtlinien für Android-Symbole , während ein dediziertes Symbol könnte.

Daher rate ich, die Verwendung eines einzelnen Symbols bewusst zu vermeiden. Zielen Sie möglichst jede Plattform einzeln an (dies ist nicht immer der Fall).

Icons, Plattform für Plattform

iOS Safari

iOS Safari erwartet ein Touch-Symbol . Ab heute ist dies ein 180x180 PNG-Bild. Dieses Bild sollte nicht transparent sein und seine Ecken werden beim Hinzufügen zum Startbildschirm automatisch abgerundet. Erklärt mit:

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

Im Laufe der Jahre wurde dieses Symbol für viele Browser zum "Standard-Symbol mit hoher Auflösung". So finden Sie es an anderer Stelle, wenn Sie Lesezeichen hinzufügen usw.

Android Chrome

Android Chrome stützt sich auf das Web App Manifest . Obwohl dieses Manifest nicht für Android= Chrome bestimmt ist, ist es derzeit sein Hauptförderer Im Moment ist es also ziemlich sicher, die Symbole aus dem Web - App - Manifest als für Android Chrome zu betrachten.

Wie der Name schon sagt, ist das Web-App-Manifest für Web-Apps gedacht. Aber jede Website kann damit auf einige Symbole verweisen.

Android erwartet ein 192x192 PNG-Symbol, Transparenz erlaubt und empfohlen.

Das Manifest wird deklariert mit:

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

macOS Safari

Obwohl macOS Safari kein Favicon hat, unterstützt es das Maskensymbol für angeheftete Tabs . Dies ist ein monochromes SVG-Symbol und eine einzelne Farbe, die es ausfüllt, wenn die Registerkarte aktiv ist.

Erkläre es mit:

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

Edge und IE 12

Microsoft hat das browserconfig eingeführt, ein XML-Dokument, das verschiedene Symbole auflistet, die zur Metro-Benutzeroberfläche passen.

Die Datei und Hintergrundfarbe werden deklariert mit:

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

Klassische Desktop-Browser

Windows/MacOS Chrome, Windows/MacOS Firefox, IE ... Dies ist, wo die Dinge etwas verschwommener sind. In der Vergangenheit gab es eine einzige favicon.ico - Datei, die noch unterstützt wurde. In den meisten neueren Browsern werden jedoch eher leichtere PNG-Symbole verwendet. Außerdem können einige Browser nicht das richtige Symbol in der ICO-Datei auswählen (in dieses Format können mehrere Versionen eines Symbols eingebettet werden), was dazu führt, dass ein Symbol mit niedriger Auflösung falsch verwendet wird.

Man könnte versucht sein, den alten favicon.ico Komplett fallen zu lassen. Obwohl ich diesen Sprung in RFG machen möchte, habe ich nicht die notwendigen Tests durchgeführt, um die Auswirkungen auf die alten Browser zu bewerten.

So empfehle ich die Combo auch heute noch mit favicon.ico Eingebetteten 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">

Andere Browser

Andere Browser haben möglicherweise spezielle Symbole. Zum Beispiel Coast by Opera sucht nach einem 228x228-Symbol . Die Notwendigkeit, sich auf diese Browser zu konzentrieren, liegt nicht auf der Hand. Sie verwenden normalerweise das Touch-Symbol oder andere Symbole, wenn sie angezeigt werden kann "ihr" Symbol nicht finden.

Fazit

Wie eingangs angekündigt, ist dies genau das, was RealFaviconGenerator erzeugt.

125
philippe_b

Erwähnenswert ist auch, dass neben dem Favicon einige andere Tags wie OG-Tags, Twitter-Karten oder MS-Anwendungen hinzugefügt werden sollten. Alles dient dem gleichen Zweck - der visuellen Identifikation Ihrer Marke und sollte auch enthalten sein.

Die Twitter-Karte finden Sie HIER

Ich füge folgende Tags hinzu

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

Ich habe festgestellt, dass viele Benutzer Bilder im Format 1300px x 650px und jpg/png erstellen.

Nach dem Hinzufügen aller Tags sollten sie validiert werden HIER


Facebook OG hat mehr Optionen, aber allgemein sind folgende:

<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 empfiehlt ein bestimmtes Verhältnis des Bildes und der Dateigröße ist auf 8 MB begrenzt. Um ähnliche Bilder mit der Twitter-Karte zu erhalten, empfehle ich die Abmessungen 1240 x 650 Pixel und das JPG/PNG-Format. Facebook und Twitter akzeptieren keine SVG ...


Ich habe festgestellt, dass einige globale Marken dieses Tag auf ihren Websites verwenden. Man hatte Abmessungen 150x150 Pixel und PNG-Format. Dieses Bild kann von Browsern zur Anzeige in Suchergebnissen verwendet werden.

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

Real Favicon Generator deckt auch Microsoft-Favoriten ab. Es gibt viele andere Meta-Tags für MS-Anwendungen, um die Seite zu optimieren, und andere Infos wie Bilder werden angezeigt. Auch dieses Thema ist lesenswert.

Ich hoffe, dass dies für jemanden nützlich ist und das Thema Branding Ihrer Website erweitert.

7
Jakub Muda