Favicon Standard – 2023 – svg, ico, png und Abmessungen? [duplicate]

Lesezeit: 10 Minuten

Benutzeravatar von Jakub Muda
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?

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

oder sollen maße angegeben werden wenn ico mehr größen enthält? Eine gute Antwort habe ich nicht gefunden.

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

Bitte geben Sie Abmessungen, Dateiformate und Meta-/Link-Tags an, welche Favicons verwendet werden sollen.

  • 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

Benutzeravatar von philippe_b
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:

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

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.

Das Manifest wird deklariert mit:

<link rel="manifest" href="https://stackoverflow.com/icons/site.webmanifest">

Edge und Internet Explorer 12

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

Die Datei und Hintergrundfarbe sind 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 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:

<link rel="icon" type="image/png" sizes="32x32" href="https://stackoverflow.com/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://stackoverflow.com/icons/favicon-16x16.png">
<link rel="shortcut icon" href="http://stackoverflow.com/icons/favicon.ico">

Andere Browser

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


Benutzeravatar von Jakub Muda
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.

Twitter-Karte kann gefunden werden 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 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.

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

Benutzeravatar von encodingFriend1
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.

  1. 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.
  2. 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.
  3. 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.
  4. Google sagt es ausdrücklich sie unterstützen keine 16×16- oder 32×32-Symbole. Für Google-Ergebnisse müssen Sie mindestens ein Symbol einfügen, das ein Vielfaches von 48 x 48 ist.
  5. 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)
  6. 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.
  7. 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.

1446170cookie-checkFavicon Standard – 2023 – svg, ico, png und Abmessungen? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy