Welche Favicon-Dimensionen, Dateiformate und Meta / Link-Tags sollten ab 2020 verwendet werden? Dazu gehören Apple-Symbole, Windows, Android und andere Geräte, die heute verwendet werden.

Ich benutze Opera und ich kann sehen, 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 durchsucht und verschiedene "Favicon-Generatoren" überprüft. Alle von ihnen sind Jahre alt und arbeiten hauptsächlich mit PNG-Dateien.

Zum Beispiel: Welcher Code sollte für 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 Abmessungen, Dateiformate und Meta / Link-Tags an, welche Favoriten verwendet werden sollen.

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

Der Mythos der Einheitsgröße

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

Aus technischer Sicht wäre ein einziges 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 Startbildschirmsymbole 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 verwendet es. Sie können jedoch nicht mit den Richtlinien für Android-Symbole übereinstimmen , wohingegen ein dediziertes Symbol dies könnte.

Ich rate daher, die Verwendung eines einzelnen Symbols bewusst zu vermeiden. Wenn möglich, zielen Sie lieber auf jede Plattform einzeln ab (dies ist nicht immer der Fall).

Symbole, Plattform pro Plattform

iOS Safari

iOS Safari erwartet ein Touch-Symbol . Ab heute ist dies ein 180x180 PNG-Bild. Dieses Bild sollte keine Transparenz verwenden 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". Sie finden es also an anderer Stelle, wenn Sie es zu einem Lesezeichen hinzufügen usw.

Android Chrome

Android Chrome basiert auf dem Web App Manifest . Obwohl dieses Manifest nicht für Android Chrome bestimmt ist, ist es derzeit der Hauptförderer. Daher ist es im Moment noch 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 es verwenden, um auf einige Symbole zu verweisen.

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

Das Manifest wird deklariert mit:

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

Edge und IE 12

Microsoft hat die browserconfig eingeführt , ein XML-Dokument, in dem verschiedene Symbole aufgelistet sind, die zur Metro-Benutzeroberfläche passen.

Die Datei und die 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, Safari, IE ... Hier sind die Dinge etwas verschwommener. In der Vergangenheit gab es eine einzige favicon.icoDatei, die noch unterstützt wurde. Die neuesten Browser wählen jedoch eher PNG-Symbole aus, die leichter sind. Außerdem können einige Browser nicht das richtige Symbol in der ICO-Datei auswählen (dieses Format kann mehrere Versionen eines Symbols einbetten), was dazu führt, dass ein Symbol mit niedriger Auflösung falsch verwendet wird.

Man könnte versucht sein, das Alte favicon.icoganz 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.

Daher die Kombination, die ich heute noch empfehle, mit der favicon.icoEinbettung von 16x16-, 32x32- und 48x48-Symbolen:

<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 verfügen möglicherweise über dedizierte Symbole. Zum Beispiel sucht Coast by Opera nach einem 228x228-Symbol . Die Notwendigkeit, sich auf diese Browser zu konzentrieren, ist nicht offensichtlich. Sie verwenden normalerweise das Touch-Symbol oder andere Symbole, wenn sie "ihr" Symbol nicht finden können.

Fazit

Wie eingangs angekündigt, erstellt RealFaviconGenerator genau dies .

Erwähnenswert ist auch, dass zusammen mit Favicon einige andere Tags wie OG-Tags, Twitter-Karten oder MS-Anwendungen hinzugefügt werden sollten. Alles dient dem gleichen Zweck - der visuellen Identifizierung 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 fand heraus, dass viele Benutzer Bilder im Format 1300 x 650 Pixel und JPG / PNG erstellen.

Nachdem alle Tags hinzugefügt wurden, sollten sie HIER validiert werden

Facebook OG hat mehr Optionen, aber allgemein 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 empfiehlt ein bestimmtes Verhältnis des Bildes und die Dateigröße ist auf 8 MB begrenzt. Um ähnliche Bilder mit einer 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. Einer hatte die Abmessungen 150x150 Pixel und das 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 Favicons ab. Es gibt viele andere Meta-Tags für MS-Anwendungen, um die Seite zu optimieren, und andere Infos wie das Bild werden angezeigt. Dieses Thema ist auch lesenswert.

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