Seit Google Chrome Version 39 für Android kannst Du die Browser-Oberfläche Deiner Webseite visuell an Dein Branding anpassen. Konkret lässt sich:
- die Farbe der Adress- und Tab-Leiste definieren
- ein individuelles Icon für die Tab-Übersicht hinterlegen
Damit wirkt Deine Webseite auf Android-Smartphones moderner, professioneller und konsistenter mit Deinem Corporate Design.
Was ist die Theme Color?
Die Theme Color ist eine per Meta-Tag definierte Farbe, die Google Chrome auf Android für den oberen Bereich des Browsers verwendet. Da Adressleiste und Suchleiste auf Android kombiniert sind, ist der Effekt sofort sichtbar.
So sieht das dann in der Praxis aus:
Der Kopfbereich (Im Android-Browser ist ja die Adressleiste und Suchleiste kombiniert) ist nun in der Farbe #2175bc eingefärbt.
In der Tab-Übersicht wird zudem das definierte Icon angezeigt:
Sicher ist das ganze ein bißchen Spielerei – aber trotzdem sieht es auf dem Android-Smartphone sehr cool aus.
Offizielle Google-Dokumentation:
https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
Informationen bei Mozilla zur Meta-Angabe Theme-Color:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color
Theme Color mit HTML definieren
Wenn Du Deine Webseite klassisch mit HTML erstellst, fügst Du die folgenden Angaben im <head>-Bereich Deiner Seite ein:
<meta name="theme-color" content="#2175bc">
<link rel="icon" sizes="192x192" href="https://example.com/icon.png">Erklärung der Angaben
theme-color
Definiert die Farbe der Browser-Oberfläche (Hex-Farbwert).link rel="icon"
Legt das Icon fest, das in der Tab-Übersicht von Chrome angezeigt wird.
Empfohlene Größe: 192 × 192 Pixel, quadratisch, PNG oder WebP.
Theme Color in WordPress setzen
Wenn Du WordPress nutzt, hast Du mehrere komfortable Möglichkeiten:
Möglichkeit 1: SEO- oder Head-Plugin
Viele SEO-Plugins erlauben das Einfügen eigener Meta-Tags, z. B.:
- Yoast SEO
- Rank Math
- All in One SEO
Dort kannst Du den Meta-Tag für theme-color direkt im Head-Bereich hinterlegen.
Möglichkeit 2: functions.php oder Child Theme
Alternativ kannst Du den Code in Dein Theme integrieren:
add_action('wp_head', function () {
echo '<meta name="theme-color" content="#2175bc">';
});Möglichkeit 3: Favicon über WordPress-Customizer
Das Tab-Icon kannst Du im WordPress-Backend setzen unter:
Design → Customizer → Website-Informationen → Website-Icon
WordPress erzeugt daraus automatisch die passenden Icon-Größen.
Darstellung auf Android-Smartphones
Nach dem Setzen der Theme Color passiert Folgendes:
- Die Adress- und Tab-Leiste wird in Deiner definierten Farbe dargestellt
- In der Tab-Übersicht erscheint Dein eigenes Icon
- Deine Seite hebt sich optisch klar von anderen Webseiten ab
- Achtung: Beim Testen ist uns aufgefallen, dass die Theme-Color nur im Light-Mode gesetzt wird. Im Dark-Mode bleibt der Browser schwarz eingefärbt.
Das ist zwar kein Ranking-Faktor, verbessert aber Branding, Wiedererkennung und Nutzererlebnis.
Typische Fehler, die Du vermeiden solltest
- zu helle Farben (schlechte Lesbarkeit der Icons)
- fehlendes oder zu kleines Icon
- Icon nicht quadratisch
- Meta-Tags außerhalb des
<head>-Bereichs
Nützliche Tools & Anbieter
| Link zum Anbieter | Beschreibung des Angebots |
|---|---|
| https://favicon.io | Online-Generator für Favicons in allen benötigten Größen |
| https://realfavicongenerator.net | Umfangreicher Generator inkl. Android- und PWA-Support |
| https://coolors.co | Farbschema-Generator zur Auswahl passender Theme Colors |
| https://web.dev | Offizielle Google-Ressourcen zu Web-Standards und Performance |
Fazit
Mit der Theme Color für Google Chrome auf Android kannst Du Deine Webseite mit minimalem Aufwand deutlich aufwerten. Egal ob Du mit HTML oder WordPress arbeitest – die Umsetzung ist schnell erledigt und sorgt für ein konsistentes, professionelles Erscheinungsbild auf mobilen Geräten.