Favicon Standard – 2023 – svg, ico, png und Abmessungen? [duplicate]
Lesezeit: 10 Minuten
Jakob Muda
Welche Favicon-Abmessungen, Dateiformate und Meta-/Link-Tags sollen ab 2022 verwendet werden? Dazu gehören das Apple-Symbol, Windows, Android und andere Geräte, die Menschen heute verwenden.
Ich verwende Opera und 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 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?
Ich persönlich würde nur verwenden ein großes PNG-Bild: 2019 unterstützen alle modernen Browser PNG und können die Größe ändern. Wir sollten diese wahnsinnige Verbreitung von Favicons unbedingt stoppen und Browser boykottieren, die nicht dem Standard entsprechen. In Zukunft wäre auch ein einzelnes SVG-Bild ok, aber im Moment wird es nicht allgemein unterstützt.
– Collimarco
20. Oktober 2019 um 10:48 Uhr
Beantwortet das deine Frage? Was ist die beste Vorgehensweise zum Erstellen eines Favicons auf einer Website?
– Mahozad
3. August 2021 um 14:11 Uhr
Eigentlich tut es das.
– TylerH
17. August 2021 um 15:04 Uhr
philippe_b
Haftungsausschluss: Ich bin der Autor von RealFaviconGenerator, von dem ich erwarte, dass er aktuell ist (meistens, siehe unten). Seien Sie also nicht überrascht, wenn diese Antwort mit dem übereinstimmt, was RFG generiert.
Der One-Size-Fits-All-Mythos
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-Icon eine gute Sache. Aber aus UI- und UX-Sicht ist dies 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). Auf Android verwenden Startbildschirmsymbole häufig nicht quadratische Formen und Transparenz (einschließlich Google-App-Symbole). Senden Sie ein Single-Touch-Symbol und Android Chrome wird es verwenden. Aber Sie werden nicht in der Lage sein, zusammenzupassen Richtlinien für Android-Symbolewährend ein dediziertes Symbol dies könnte.
Ich rate daher, bewusst auf die Verwendung eines einzelnen Symbols zu verzichten. Zielen Sie lieber, wenn möglich, auf jede Plattform einzeln ab (dies ist nicht immer der Fall).
Symbole, Plattform für Plattform
iOS-Safari
iOS Safari erwartet a Symbol berühren. Ab heute ist dies ein 180×180 PNG-Bild. Dieses Bild sollte keine Transparenz verwenden und seine Ecken werden automatisch abgerundet, wenn es zum Startbildschirm hinzugefügt wird. Deklariert mit:
Im Laufe der Jahre wurde dieses Symbol für viele Browser zum „Standardsymbol für hohe Auflösung“. Sie finden es also an anderer Stelle, beim Hinzufügen zu Lesezeichen usw.
Android-Chrome
Android Chrome setzt auf die Web-App-Manifest. Obwohl dieses Manifest nicht Android Chrome gewidmet ist, ist es derzeit sein Hauptunterstützer. Im Moment ist es also 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 192×192 PNG-Symbol, Transparenz erlaubt und erwünscht.
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE… Hier sind die Dinge etwas verschwommen. Historisch gesehen gab es eine einzige favicon.ico Datei, wird weiterhin unterstützt. Die meisten neueren Browser wählen jedoch eher PNG-Symbole, die heller sind. Außerdem sind einige Browser nicht in der Lage, das richtige Symbol in der ICO-Datei auszuwählen (dieses Format kann mehrere Versionen eines Symbols einbetten), was dazu führt, dass ein Symbol mit niedriger Auflösung fälschlicherweise verwendet wird.
Man könnte versucht sein, das Alte fallen zu lassen favicon.ico vollständig. Obwohl ich diesen Sprung in RFG gerne machen würde, habe ich nicht die notwendigen Tests durchgeführt, um die Auswirkungen auf die alten Browser zu bewerten.
Also die Combo empfehle ich auch heute noch mit favicon.ico Einbetten von 16×16, 32×32 und 48×48 Icons:
Andere Browser haben möglicherweise spezielle Symbole. Zum Beispiel Coast by Opera sucht nach einem 228×228-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.
Abschluss
Wie eingangs angekündigt, ist das genau das Richtige RealFaviconGenerator schafft.
@Will Keine kürzliche Änderung. Dies liegt an einer Wendung: Wenn Sie Ihre Symbole im Stammverzeichnis (z. /favicon.ico), wird IE es nach Konvention finden. Daher keine Erklärung in diesem speziellen Fall. Generieren Sie erneut ein Favicon mit /path/to/icons als Pfad und diesmal wird die Deklaration vorhanden sein.
– philippe_b
29. Mai 2018 um 6:20 Uhr
msapplication-config, msapplication-TileColor, browserconfig sind veraltet. Alles bewegt sich in Richtung manifest.json und PWAs.
– Robert Bäcker
17. Juni 2018 um 0:57 Uhr
@RobertBaker Das stimmt. Es befindet sich noch in der Entwicklungsphase, daher ist die Browserkonfiguration im Moment noch der richtige Weg.
– philippe_b
17. Juni 2018 um 16:28 Uhr
Du meinst die mögliche Entfernung von favicon.ico? Ich brauche einen Tag, um Win XP und Vista zu bekommen und zu installieren, damit ich verschiedene Pakete testen kann… Diesen Sommer?
– philippe_b
27. Juni 2018 um 6:10 Uhr
Leute wie du bekommen nicht die Liebe, die sie verdienen. Ich bin hier, um dir eine nasse, schlampige Großmutter mit zu viel Lippenstift auf die Stirn zu küssen. Benutzte deinen Generator, ein Zauber, guter Mann, ein Zauber. SO Polizei sei verdammt, ich sage danke!
– MikeT
5. Oktober 2019 um 16:49 Uhr
Jakob Muda
Es ist auch erwähnenswert, dass zusammen mit Favicon einige andere Tags wie OG-Tags, Twitter-Karten oder MS-Anwendung hinzugefügt werden sollten. Alles dient demselben Zweck – der visuellen Identifizierung Ihrer Marke und sollte ebenfalls enthalten sein.
<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 in den Formaten 1300 x 650 Pixel und JPG/PNG erstellen.
Nachdem alle Tags hinzugefügt wurden, sollten sie validiert werden HIER
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 der Twitter-Karte zu behalten, empfehle ich die Abmessungen 1240 x 650 Pixel und das JPG/PNG-Format. Facebook und Twitter akzeptieren kein SVG…
Ich habe festgestellt, dass einige globale Marken dieses Tag auf ihren Websites verwenden. Eine hatte die Maße 150×150 Pixel und das PNG-Format. Dieses Bild kann von Browsern zur Anzeige in Suchergebnissen verwendet werden.
Real Favicon Generator deckt auch Microsoft-Favicons ab. Es gibt viele andere Meta-Tags für MS-Anwendungen, um den Bogen der Seite zu optimieren und andere Informationen wie Bild anzuzeigen. Auch dieses Thema ist lesenswert.
Ich hoffe, dies ist für jemanden nützlich und erweitert das Thema Branding Ihrer Website.
CodierungFriend1
Ich hatte vor ein paar Wochen genau die gleiche Frage. Es ist überraschend schwer, zuverlässige und aktuelle Informationen über Favicons im Internet zu finden. In der Tat MDN Und W3C Beide Links zu Wikipedia für weitere Informationen über Favicons. Der Wikipedia-Artikel ist allerdings recht kurz und wenig hilfreich. Ich habe mehrere Stunden gebraucht, um zu recherchieren, was die optimalen Symbole für moderne Browser sind.
Das habe ich gelernt:
Es gibt keine „eine Datei, die sie alle beherrscht“-Lösung. Für moderne Browser ist es jedoch eigentlich nicht so viel, was Sie brauchen.
Die Standardgröße von Favicons in Browsern beträgt immer noch 16 x 16 Punkte, was 32 x 32 Pixeln auf hochauflösenden Bildschirmen entspricht.
Es besteht keine Notwendigkeit, a noch einzufügen favicon.ico Datei in Ihrem Stammverzeichnis, es sei denn, Sie möchten unterstützen IE 10 oder älter.
SVG wäre schön, wird aber nicht von allen Browsern unterstützt. Die einfachste Lösung ist also immer noch, gerade Verwenden Sie PNG-Bilder.
Wenn Benutzer Ihre Website auf dem Startbildschirm ihres Telefons anheften, benötigen Sie ein 192 x 192-Symbol für Android, 167 x 167 für iPad und 180 x 180 für iPhone (während die Link-Tags für das iPhone sind etwas Besonderes – siehe unten)
Theoretisch könnten Sie ein einzelnes 192 x 192 (oder ein höheres Vielfaches von 48) großes Symbol bereitstellen, das von Browsern und allen anderen Diensten herunterskaliert würde, aber besonders bei der 16 x 16-Punkt-Version werden diese Skalierungsergebnisse wahrscheinlich schlechter sein als das, was Sie erhalten, wenn Sie es erhalten Skalieren Sie es selbst mit einem professionellen Bildeditor oder stellen Sie sogar spezielle Versionen für diese Symbole mit niedriger Auflösung bereit.
Sie können auch eine hinzufügen Web-Manifest-Datei das enthält mehr Metainformationen wie Themenfarben. Das ist aber nur auf Android unterstützt und bringt wenig Nutzen, es sei denn, Sie erwarten wirklich, dass ein großer Teil Ihrer Benutzer Ihre Website auf ihrem Startbildschirm anheftet (meiner bescheidenen Meinung nach ist dies für die meisten Websites sehr unwahrscheinlich).
Meine Empfehlung wäre, Folgendes in Ihrem Header zu verwenden:
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Ich habe auch eine geschrieben Blogeintrag mit etwas mehr Prosa und mehr Hintergrundinformationen.
14461700cookie-checkFavicon Standard – 2023 – svg, ico, png und Abmessungen? [duplicate]yes
realfavicongenerator.net wird regelmäßig aktualisiert (realfavicongenerator.net/change_log)
– Sphinxxx
24. Februar 2018 um 2:57 Uhr
favicon.pro
– Nurza
29. September 2018 um 19:42 Uhr
Ich persönlich würde nur verwenden ein großes PNG-Bild: 2019 unterstützen alle modernen Browser PNG und können die Größe ändern. Wir sollten diese wahnsinnige Verbreitung von Favicons unbedingt stoppen und Browser boykottieren, die nicht dem Standard entsprechen. In Zukunft wäre auch ein einzelnes SVG-Bild ok, aber im Moment wird es nicht allgemein unterstützt.
– Collimarco
20. Oktober 2019 um 10:48 Uhr
Beantwortet das deine Frage? Was ist die beste Vorgehensweise zum Erstellen eines Favicons auf einer Website?
– Mahozad
3. August 2021 um 14:11 Uhr
Eigentlich tut es das.
– TylerH
17. August 2021 um 15:04 Uhr