Favicon Standard - 2020 - SVG, ICO, PNG und Abmessungen?

113

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.

Jakub Muda
quelle
8
realfavicongenerator.net wird regelmäßig aktualisiert ( realfavicongenerator.net/change_log )
Sphinxxx
3
@Sphinxxx Als Autor von RFG muss ich mich hier bei Ihnen bedanken :-)
philippe_b
favicon.pro
nourza
7
Persönlich würde ich nur ein großes PNG-Bild verwenden : 2019 unterstützen alle modernen Browser PNG und können die Größe ändern. Wir sollten diese verrückte Verbreitung von Favicons und Boykottbrowsern, die nicht dem Standard entsprechen, unbedingt stoppen. In Zukunft wäre auch ein einzelnes SVG-Bild in Ordnung, wird aber derzeit nicht allgemein unterstützt.
Collimarco

Antworten:

184

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 .

philippe_b
quelle
3
@ Will Keine letzte Änderung. Dies liegt an einer Wendung: Wenn Sie Ihre Symbole im Stammverzeichnis (z. B. /favicon.ico) ablegen, findet der IE sie gemäß Konvention. Somit keine Erklärung in diesem speziellen Fall. Generieren Sie erneut ein Favicon mit /path/to/iconsals Pfad und diesmal ist die Deklaration vorhanden.
philippe_b
1
@philippe_b Ah, richtig, das macht Sinn! Danke fürs klarstellen.
Will
2
@ RobertBaker Das stimmt. Es ist immer noch unter dev, also ist browserconfig vorerst noch der richtige Weg.
philippe_b
2
Du meinst die mögliche Entfernung von favicon.ico? Ich brauche einen Tag, um Win XP und Vista zu erhalten und zu installieren, damit ich verschiedene Pakete testen kann ... Diesen Sommer?
philippe_b
4
Leute wie du bekommen nicht die Liebe, die sie verdienen. Ich bin hier, um dir eine nasse, schlampige Großmutter mit zu viel Lippenstiftkuss auf die Stirn zu geben. Ich habe deinen Generator benutzt, ein Zauber, mein guter Mann, ein Zauber. Also Polizei, verdammt, ich sage Danke!
Michael Tranchida
11

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.

Jakub Muda
quelle