Theme-Farbe und App-Symbole

Das Tag <meta name="theme-color" content="#1f2937"> legt auf Mobilgeräten die Farbe der Browser-Adressleiste und bei Desktop-PWAs die Farbe der Titelleiste fest. Dadurch wirkt die Seite hochwertig und appähnlich, ohne dass sich Inhalte ändern.

Stellen Sie separate Farben für den hellen und den dunklen Modus bereit: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> sowie ein zweites Tag mit der dunklen Farbe. Browser wählen anhand der Betriebssystemeinstellung der Nutzerin oder des Nutzers die passende Variante aus.

theme_color im Manifest legt die Farbe fest, wenn die App als installierte PWA ausgeführt wird (Titelleiste des eigenständigen Fensters). Stimmen Sie sie für ein konsistentes Erscheinungsbild mit dem theme-color-Meta-Tag der Seite ab — unabhängig davon, ob die App im Browser oder installiert ausgeführt wird, bleibt die visuelle Identität gleich.

<link rel="icon" href="/favicon.ico"> ist das zeitlose Symbol für den Browser-Tab. Trotz des Namens bevorzugen moderne Browser PNG oder SVG gegenüber ICO. Stellen Sie ein 32x32-PNG über <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> bereit, damit es schärfer dargestellt wird.

Moderne Browser akzeptieren SVG-Favicons: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Sie bleiben bei jeder Größe scharf und sind sehr klein. Verwenden Sie sie für Vektorlogos und ergänzen Sie ein PNG als Fallback für Browser, die keine SVG-Favicons unterstützen.

Der iOS-Home-Bildschirm verwendet das apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Stellen Sie ein 180x180-PNG bereit. iOS liest die Manifest-Symbole nicht für die Installation auf dem Home-Bildschirm; der apple-touch-icon-Link ist erforderlich.

Android-Installationen lesen die Symbole aus dem icons-Array des Manifests. Fügen Sie PNGs mit 192x192 (Home-Bildschirm) und 512x512 (Splash-Screen, App-Drawer) hinzu. Ergänzen Sie eine Kopie mit dem Zweck "maskable", damit Android das Symbol an die Form des Home-Bildschirm-Symbols (Kreis, Squircle, Quadrat) anpassen kann.

Der wichtige Inhalt maskierbarer Symbole sollte innerhalb eines zentrierten Sicherheitsbereichs von 80 % liegen — die äußeren 20 % können je nach Maskenform des Geräts abgeschnitten werden. Verwenden Sie während des Designs Tools wie maskable.app, um eine Vorschau des Symbols mit verschiedenen Maskenformen anzuzeigen.

Für angeheftete Kacheln unter Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> und <meta name="msapplication-TileColor" content="#1f2937">. Heute weniger wichtig als Lösungen für andere Plattformen, aber weiterhin nützlich für Windows-Nutzer, die Websites anheften.

Für das alte IE/Edge: <meta name="msapplication-config" content="/browserconfig.xml"> verweist auf eine XML-Datei mit Kachelsymbolen in mehreren Größen. Heute weitgehend irrelevant; neue Websites können browserconfig.xml ohne Nachteile weglassen.

Angehefteter Tab in Safari unter macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. Das SVG sollte ein einfarbiges Symbol sein (die Farbe wird durch das color-Attribut überschrieben). Wird ausschließlich von der Funktion für angeheftete Tabs in Safari unter macOS verwendet.

Verwenden Sie realfavicongenerator.net, um aus einer einzigen Quelle alle Varianten der Symbole zu erzeugen. Testen Sie auf einem echten iOS-Gerät (zum Home-Bildschirm hinzufügen) und unter Android (die App über das Browsermenü installieren), um zu überprüfen, dass die Symbole korrekt zugeschnitten und nicht pixelig dargestellt werden.

theme-color (mit Media-Query-Varianten) färbt die Adressleiste; theme_color im Manifest färbt die Titelleiste der installierten App. Zu den Symbolen gehören Favicons (SVG + PNG), apple-touch-icon (iOS, 180x180), Manifest-Symbole (Android, 192 + 512 + maskable), das Safari-mask-icon (einfarbiges SVG) und msapplication-TileImage (angeheftete Windows-Kacheln). Verwenden Sie realfavicongenerator.net, um alle Varianten aus einer einzigen Quelle zu erzeugen.