Logos und Favicons für Webseiten

Logos und Favicons für Webseiten: Standard-Darstellung sowie Optimierung für Apple Retina-Displays. Logos und Favicons für die perfekte Anzeige optimieren.

Logos und Favicons für Webseiten
Früher war alles einfacher und besser. Über das „besser“ lässt sich streiten. Aber seit Webseiten nicht nur für den Desktop-Computer sondern auch Mobilgeräte und Apple Retina-Displays optimiert werden sollten, sind die Anforderungen gestiegen.

Das macht auch bei Logos und Favicons für Webseiten nicht halt. Was sind Favicons? Dabei handelt es sich um die kleine Grafik neben der URL oder im Tab der Webseite. Wird vom Besucher ein Bookmark (= Lesezeichen) auf die Seite gesetzt, so erscheint das Favicon auch im Lesezeichen-Menü und bietet somit einen entsprechenden Wiedererkennungswert.

Früher wurde ein Favicon im Format 16×16 Pixel erstellt und als so genannte Icon-Datei mit der Endung .ico gespeichert. Für die Erstellung eignet sich beispielsweise Photoshop, für das Abspeichern wird ein zusätzliches Plugin benötigt, das kostenlos bezogen werden kann.

Alternativ lässt sich eine .ico-Datei mit Hilfe entsprechender Tools erstellen. Beispielsweise online mit Convertico.

Da alle moderneren Browser auch .png-Dateien einlesen können, wird das .ico-Format inzwischen eigentlich nicht mehr benötigt.

Favicon für Apple Retina Displays

Apple bietet mit seinen Retina Displays hochauflösende Bildschirmdarstellungen. Normale Favicons und Logos werden dort wegen ihrer geringen Auflösung allerdings in relativ bescheidener Qualität dargestellt.

Es gibt zwei Möglichkeiten, um die Darstellung zu verbessern:

1. Eine einzige Bilddatei für das Logo und Favicon

Sowohl Logo als auch Favicon werden doppelt so groß erstellt, wie sie später anzuzeigen sind. Das Favicon somit im Format 32×32 Pixel.

Das Favicon wird dann auf Retina-Displays qualitativ ansprechend angezeigt. Wird es im Format 16×16 Pixel benötigt, so skalieren moderne Browser das Favicon automatisch auf die benötigte Größe herunter.

Auch das Logo wird doppelt so groß erstellt, wie es benötigt wird. Soll das Logo beispielsweise eine Größe von 200×75 Pixel aufweisen, so wird es im Format 400×150 Pixel erstellt. Entsprechendes CSS sorgt für eine Anzeige in der Größe 200×75 Pixel und auf dem Apple Retina-Display wird automatisch die größere Version mit 400×150 Pixel verwendet.

2. Individuelle Grafiken für das Logo und Favicon für die jeweiligen Ausgabegeräte.

Dimensionen für das Favicon
Das Favicon wird in fünf unterschiedlichen Größen erstellt und zwar in den Dimensionen 16×16 / 57×57 / 72×72 / 114×114 sowie 144×144 Pixel.

Die Einbindung erfolgt über:

<link rel="shortcut icon" href="icons/favicon-16px.png" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="icons/favicon-57px.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/favicon-72px.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/favicon-114px.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/favicon-144px.png">

Mit dem Tool von Websiteplanet lassen sich verschiedene Favicon-Größen automatisch erstellen. Dazu müssen wir vor der Erstellung des Favicons unter „Einstellungen“ die Option „>Alle Größen bitte!“ aktivieren.

Dimensionen für das Logo
Analog zur vorstehenden Beschreibung unter Eine einzige Bilddatei für das Logo und Favicon wird das Logo doppelt so groß erstellt, wie es angezeigt werden soll. Mittels CSS lässt sich die gewünschte Anzeigegröße definieren.

Sollte die Webseite separate Optimierungen für die Desktop-Darstellung, Mobilversion sowie Sticky-Header (= scrollt der Besucher nach unten, so bleibt das Navigationsmenü im Kopfbereich „stehen“) aufweisen, so sind bis zu sechs Logogrößen erforderlich. Die drei Varianten für Desktop / Mobilversion / Sticky-Header sowie deren doppelt so große Darstellung für Apple Retina-Displays.

Stichworte: Logos und Favicons für Webseiten