Favicon

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Ein Favicon ist ein kleines Extra-Feature, das beim Anzeigen der Seite(n) in der Adresszeile des Browsers erscheint und dann im Menü der Favoriten dem Eintrag vorangestellt wird. Auf mobilen Geräten erhalten PWAs, aber auch normale Seiten größere Touch-Icons auf dem Startbildschirm oder auf der Startseite des Browsers.

Webseiten mit Favicons haben einen höheren Wiedererkennungswert, da Bilder vom Gehirn auch schneller/besser wahrgenommen werden. Wenn ein Besucher beispielsweise ein Lesezeichen der Seite anlegt, findet er die Webseite über das Favicon in der Lesezeichenliste schneller wieder.

praktische Vorgehensweise

Kopiervorlage: 
1 <link rel="icon" href="/favicon.ico" sizes="48x48" >
2 <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
3 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
4 <link rel="manifest" href="manifest.json">

Diese vier Zeilen arbeiten wir nun in umgekehrter Reihenfolge ab:

Manifest-Datei

Zuerst legen wir eine Manifest-Datei im JSON-Format an. Ursprünglich nur für PWAs gedacht, können auch normale Webseiten gespeichert und später gelesen werden. Hierfür wird auf dem Startbildschirm ein Touch-Icon angelegt. Die dafür benötigten Bilder werden im manifest.json angelegt:

manifest.json 
{
    "name": "Name des Webprojekts",
    "short_name": "kürzere Version des Seitennamens",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "white",
    "background_color": "#000",
    "display": "standalone"
}

Neben dem Touch-Icon wird der name, bei wenig Platz der short-name angezeigt.

theme-color und background_color dienen manchen Browsern als Grundfarbe für die Icons und Tiles.

Die oben referenzierten Bilder werden später durch den realfaviconGenerator erzeugt.

SVG-Favicons

Meist gibt es ja schon ein Logo - optimalerweise bereits im SVG-Format. Ein SVG lässt sich stufenlos skalieren und sieht dabei immer scharf und gut aus.

Browserunterstützung
caniuse.com

Falls das noch nicht geschehen ist, sollte es über das viewBox-Attribut quadratisch zugeschnitten werden.

Referenzieren eines SVG-Favicons 
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">

Das Link-Element erhält ein rel-Attribut und auch ein eigentlich überflüssiges type-Attribut, das den Medientyp angibt.

Es ist möglich, mit prefers-color-scheme das gewünschte Farbschema abzufragen und die Gestaltung entsprechend zu ändern.[1]

unterschiedliche Farben bei SVG-Favicons 
<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: green;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: red;
      }
    }
  </style>
  <rect width="50" height="50" rx="5"/>
</svg>

Hauptartikel: barrierefreie SVGs

Fallbacks

Wenn der User-Agent versucht, ein Icon zu verwenden, aber dieses Icon sich bei näherer Betrachtung als ungeeignet herausstellt (z.B. weil es ein nicht unterstütztes Format verwendet), dann muss der User-Agent das nächstgeeignete Icon versuchen, das durch die Attribute bestimmt wird.
WHATWG: Docs[2]

In Anbetracht der aktuellen Browserunterstützung für das SVG-Favicon ist leider immer noch ein Fallback erforderlich. Je nach System muss das SVG nun in verschiedene Formate umgewandelt werden.

Dies erledigt idealerweise ein

Folgende Dateien/ Formate werden zur Zeit benötigt:

  • favicon.ico
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png

Der RealFaviconGenerator erzeugt aus Deinem SVG einen ZIP-Ordner, den du downloaden und entpacken kannst, sowie das dafür nötige HTML-Markup, dass du nur in den head deiner Webseiten kopieren musst.

Eigentlich ist damit alles getan und du kannst Dich anderen Baustellen zuwenden. Da es im Netz aber zahlreiche weitere Features gibt, werden wir anschließend aktuelle und obsolete Formate im Detail vorstellen:

Formate im Detail

Die überarbeitete Fassung stützt sich auf die Vorarbeit von Masa Kudamatsu, der auf dev.to einen Artikel dazu veröffentlicht hat.[5] Problem bei der Auswahl der richtigen Formate und Größen ist, dass es in der Literatur oft widersprüchliche Behauptungen gibt, die nicht durch Beispiele belegt sind.

der Klassiker: Favicons im ico-Format

Da die Browserunterstützung für SVG-Favicon derzeit (Stand: März 2024) bei 76,88% liegt, benötigen wir einen Fallback.

Klassiker ist eine kleine Grafik im Windows-Icon-Format (Dateien *.ico)[6] und mit einer intrinsischen Größe von 48x48 Pixeln (Früher waren Varianten mit 16x16 und 32x32 üblich). Um solche Grafiken zu erstellen, benötigst Du ein Grafikprogramm oder (oben empfohlenes) Online-Tool, das Grafiken im ICO-Format abspeichern kann.

Die Verknüpfung zwischen einer Webseite und einem Favicon kann auf zwei Weisen hergestellt werden. Automatisch erkannt wird das Favicon, wenn es unter dem festen Dateinamen favicon.ico im Wurzelverzeichnis einer Domain liegt.

Einbinden eines favicon im head 
<link rel="icon" href="/favicon.ico" sizes="48x48">
Empfehlung: Verwende folgende Einbindung mit einem link-Element und einem sizes-Attribut mit der Größenangabe 48x48!


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

Mit dieser - scheinbar gleichen - Variante verwenden Chromium-Browser dann favicon.ico anstelle von favicon.svg. Dies wurde als "bug" gemeldet[7], obwohl die Chromium-Entwickler dies als erwartetes Verhalten anzusehen scheinen. Eine Farbänderung im Dark Mode ist so unmöglich.

Die oben vorgestellte Lösung mit einer Auflösung sizes="48x48" suggeriert Chromium-Browsern, dass die .ico-Grafik zu groß sei. Erst dann laden sie stattdessen das bessere SVG!

Im Link zum SVG-Favicon wurde ein sizes="any" hinzugefügt, das derzeit noch keine Auswirkungen hat, evtl. aber in Zukunft nützlich wird.

Apple-Touch-Icon

Mobile Geräte benutzen ebenfalls eine Art Favicon, um touch-Icons für die Startseite zu erstellen. Hier sind 32x32px oder 48x48px aber zu klein, sodass größere png-Grafiken verwendet werden.

Browserunterstützung
caniuse.com

Allgemein wird eine 192x192px große Grafik empfohlen, wobei man einen 20px breites padding zwischen Motiv und Rand haben sollte. Der RealfaviconGenerator berücksichtigt dies automatisch!

Touch-Icon für Apple 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

Obsolet: apple-touch-icon-precomposed

Favicons, die mit apple-touch-icon referenziert werden, werden vom Browser durch abgerundete Ecken, Schattenwurf und Glanz modifiziert.

Referenzieren von Favicons, die nicht verändert werden sollen (obsolet!) 
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">

Alternativ können Sie durch Angabe von apple-touch-icon-precomposed den Browser anweisen, das Favicon unverändert anzuzeigen.[8][9]


Empfehlung: Probier aus, wie deine Icons mit den browsereigenen Veränderungen aussehen. (Dabei musst du während der Entwicklung immer den Browser-Cache leeren, um den aktuellen Stand angezeigt zu bekommen.

Seit iOS7 werden Touch-Icons aber nicht mehr durch Browser verändert, sodass der Bedarf hierfür eigentlich entfällt.

Web-Manifest für Android

Wie oben bereits besprochen, sollte auch für normale Webseiten eine Manifest-Datei angelegt werden. In ihr werden die für Android benötigten Touch-Icons, sowie weitere Informationen festgeelgt.

Maskable Versionen

Der Webdienst Lighthouse von Google bemängelt Touch-Icons, die sich nicht an die Form der anderen Touch-Icons anpassen lassen.

Dazu solltest du die png-Touch-Icons um die Eigenschaft "purpose": "maskable" ergänzen: 

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

Der realFaviconGenerator berücksichtigt dies nicht. Ob du das zusätzlich festlegen willst, bleibt dir überlassen.

Obsolet: msapplication

Vor einigen Jahren startete Microsoft ein Versuch Mobiltelefone mit eigenem Betriebssystem Windows Phone zu verkaufen. Dort sollten die Kacheln (Tiles) aus Windows 8 verwendet werden. Diese Geräte und damit auch die für das Betriebssytem notwendigen Angaben sind obsolet. Auch die für IE11 auf Win 8.1 benötigte browserconfig.xml wird nicht mehr benötigt. Auch mausetot.

Tabfarbe für Android (optional)

Browserunterstützung
caniuse.com

Mit der Angabe einer theme-color in Form eines meta-Elements ist es möglich, auf mobilen Geräten farbige Adresszeilen und Tabs zu gestalten.[10]

Angabe einer theme-color 
<meta name="theme-color" content="#4a4a4a" />


Laut Valkhof wird diese Themenfarbe auch von Discord für die Umrandung von freigegebenen Links zur Website verwendet.[11]

Weblinks

  1. ↑ catalin.red: How to switch the SVG favicon when in Dark Mode in
    Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature
  2. ↑ WHATWG:Docs
  3. ↑ realfavicongenerator
  4. ↑ Wikipedia: List of tools for .ico generation
  5. ↑ Definitive edition of "How to Favicon" in 2023 von Masa Kudamatsu
  6. ↑ Wikipedia: Favicon (en)
  7. ↑ https://twitter.com/RealFavicon/status/1248635863078141953
  8. ↑ apple: Specifying a Webpage Icon for Web Clip
  9. ↑ How To Set an Apple Touch Icon for Any Site
  10. ↑ css-tricks.com: Meta Theme Color and Trickery
  11. ↑ https://twitter.com/kilianvalkhof/status/1343926777182363649
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Favicon&oldid=98398“