Symbole und Browserfarben

Mit modernen Browsern ist es ganz einfach, bestimmte Komponenten wie Symbole und die Farbe der Adressleiste anzupassen und sogar benutzerdefinierte Kacheln hinzuzufügen. Mit diesen einfachen Optimierungen können Sie Interaktionen fördern und Nutzer dazu bringen, Ihre Website erneut aufzurufen.

Paul Bakaus
Paul Bakaus

Mit modernen Browsern ist es ganz einfach, bestimmte Komponenten wie Symbole und die Farbe der Adressleiste anzupassen und sogar benutzerdefinierte Kacheln hinzuzufügen. Mit diesen einfachen Optimierungen können Sie Interaktionen fördern und Nutzer dazu bringen, Ihre Website erneut aufzurufen.

Ansprechende Symbole und Kacheln bereitstellen

Wenn ein Nutzer Ihre Webseite besucht, versucht der Browser, ein Symbol aus der HTML abzurufen. Das Symbol kann an vielen Stellen angezeigt werden, z. B. auf dem Browsertab, auf der kürzlich geöffneten App oder auf der Seite mit dem neuen (oder kürzlich besuchten) Tab.

Mit einem qualitativ hochwertigen Bild lässt sich Ihre Website besser erkennen und Nutzer können sie leichter finden.

Damit alle Browser vollständig unterstützt werden, musst du dem <head>-Element jeder Seite ein paar Tags hinzufügen.

<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">

<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">

<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

Chrome und Opera

Chrome und Opera verwenden icon.png, das vom Gerät auf die erforderliche Größe skaliert wird. Um das Autoscaling zu verhindern, können Sie auch zusätzliche Größen angeben, indem Sie das Attribut sizes angeben.

Safari

Safari verwendet außerdem das <link>-Tag mit dem rel-Attribut: apple-touch-icon, um das Startbildschirmsymbol zu kennzeichnen.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Eine nicht transparente PNG-Datei mit einer Größe von 180 oder 192 Pixel im Quadratformat ist ideal für das Apple-Touch-Symbol.

Es wird nicht empfohlen, mehrere Versionen über das Attribut sizes anzugeben. Bisher wurde in Safari für iOS das Keyword -precomposed verwendet, um das Hinzufügen visueller Effekte zu vermeiden. Seit iOS 7 war das aber nicht mehr erforderlich.

Internet Explorer und Windows Phone

Der neue Startbildschirm von Windows 8 unterstützt vier verschiedene Layouts für angepinnte Websites und erfordert vier Symbole. Du kannst die entsprechenden Meta-Tags weglassen, wenn du eine bestimmte Größe nicht unterstützen möchtest.

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Kacheln in Internet Explorer

Die von Microsoft angepinnten Websites und die rotierenden „Live-Kacheln“ gehen weit über andere Implementierungen hinaus und werden in diesem Leitfaden nicht behandelt. Weitere Informationen finden Sie unter Live-Kacheln erstellen von MSDN.

Farbbrowserelemente

Mit verschiedenen meta-Elementen kannst du den Browser und sogar Elemente der Plattform anpassen. Einige funktionieren möglicherweise nur auf bestimmten Plattformen oder in bestimmten Browsern, sie können jedoch die Nutzererfahrung erheblich verbessern.

In Chrome, Firefox OS, Safari, Internet Explorer und Opera Coast können Sie Farben für Browserelemente und sogar für die Plattform mithilfe von Meta-Tags definieren.

Metadesign-Farbe für Chrome und Opera

Wenn Sie die Designfarbe für Chrome unter Android festlegen möchten, verwenden Sie die Metadesign-Farbe.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Designfarben für die Adressleiste in Chrome.

Safari-spezifische Stile

In Safari können Sie den Stil der Statusleiste anpassen und ein Start-Image angeben.

Start-Image angeben

Standardmäßig zeigt Safari während der Ladezeit und nach mehreren Laden eines Screenshots des vorherigen Status der Anwendung einen leeren Bildschirm an. Sie können dies verhindern, indem Sie Safari auffordern, ein explizites Start-Image anzuzeigen. Fügen Sie dazu ein Link-Tag mit rel=apple-touch-startup-image hinzu. Beispiel:

<link rel="apple-touch-startup-image" href="icon.png">

Das Bild muss die entsprechende Größe des Zielgerätebildschirms haben. Andernfalls wird es nicht verwendet. Weitere Informationen finden Sie in den Richtlinien für Safari-Webinhalte.

Auch wenn die Dokumentation von Apple zu diesem Thema spärlich ist, hat die Entwickler-Community eine Möglichkeit gefunden, ein Targeting auf alle Geräte vorzunehmen. Dazu verwendet sie erweiterte Medienabfragen, um das entsprechende Gerät auszuwählen und dann das richtige Bild anzugeben. Hier ist eine funktionierende Lösung, mit freundlicher Genehmigung von tfausak's gist

Darstellung der Statusleiste ändern

Sie können die Darstellung der Standardstatusleiste entweder in black oder black-translucent ändern. Bei black-translucent schwebt die Statusleiste über dem Inhalt des Vollbildmodus, anstatt sie nach unten zu schieben. So erhält das Layout mehr Höhe, verdeckt jedoch den oberen Rand. Hier ist der erforderliche Code:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Screenshot mit schwarz-durchsichtigem Bild.
Screenshot mit black-translucent

Screenshot mit Schwarz
Screenshot mit black