Favicons erstellen und generieren

Startseite > Favicons erstellen

Favicons erstellen und generieren

Favicons (ein zusammengesetztes Kunstwort aus favorite und icons) sind Symbole mit hohem Wiedererkennungswert für die jeweilige Webseite. Favicons werden, wenn vorhanden, in geöffneten Browser-Tabs, in den Browser-Lesezeichen und im Browser-Verlauf angezeigt. Manche Browser legen das Favicon als Symbol auf dem Desktop des Besuchers ab.

Vor zwanzig Jahren noch reichte eine einzige Bilddatei im ico-Format in den Abmessungen 32 * 32 px als Favicon für eine Webseite aus. Heute stellen verschiedene Browser für verschiedene Endgeräte unterschiedliche Anforderungen an ein Favicon: Jeder Browser auf jedem Gerät kocht sein eigenes Süppchen. Eine ausführliche Übersicht über die Browser-Unterstützung, eine Tabelle der Stellen, an denen welche Browser Favicons anzeigen, und eine Tabelle der link-Element-Formate gibt's im Favicons-Artikel der englischen Wikipedia.

Die geplagten Webmaster sind verdammt, alle wesentlichen Favicon-Formate bereitzustellen. Fehlt ein Format und antwortet der Server mit Statuscode 404 (nicht gefunden), droht sogar Ladezeitverzögerung beim Seitenaufbau. Aber Hilfe naht: findige Tüftler haben Favicon-Generatoren entwickelt, die aus einer hochgeladenen Grafik-Datei alle benötigten Formate erzeugen und auch die erforderlichen HTML-link- und -meta-Elemente bereitstellen. Das beste dieser Werkzeuge ist nach meiner Erfahrung der kostenlos nutzbare Real Favicon Generator von Philippe Bernard.

Favicons generieren mit dem Real Favicon Generator

Erstellen Sie als Favicon-Vorlage für den Real Favicon Generator eine Bilddatei im jpg-Format in der Auflösung 260 * 260 px. Vielleicht finden Sie auch eine passende Favicon-Vorlage in den Weiten des Internets?
Rufen Sie den Real Favicon Generator auf und laden Sie über das Eingabefeld oben rechts Ihre erstellte Bilddatei hoch.
Favicon Generator Options: Die Fragen zur Konfiguration beantworten Sie bei besonderen Extra-Wünschen abweichend. Im Normalfall sind die im Programm voreingestellten Optionen aber ausreichend. Bei folgenden Punkten empfehle ich jedoch eine Änderung:
- Path:
  Aktivieren Sie die Option ... Instead I will place them here: und tragen Sie in das zugehörige Eingabefeld das mit der Vorlage vorgesehene Ziel-Verzeichnis /favicons ein.
- Compression:
  Wählen Sie die 2. Option (Very high quality) oder die 3. Option (High quality): das reicht völlig aus (mit der voreingestellten 1. Option würden die generierten Elemente zu viel Platz belegen).
- Additional files:
  Zur vollständigen Dokumentation werden auf Wunsch die Dateien html_code.html und README.md zusätzlich ins Download-Paket aufgenommen.
Laden Sie die vom Generator erstellte zip-Datei mit den Favicon-Formaten auf Ihren Rechner runter und kopieren Sie die angezeigten HTML-link- und -meta-Elemente in Ihre Zwischenablage.
Wenn Sie bei der Generierung zusätzlich die Optionen html_code.html und/oder README.md angekreuzt haben, erhalten Sie die benötigten link- und meta-Elemente zusätzlich als Datei im Download-Paket.

Generierte Favicons in die Webseiten-Vorlage integrieren

Entpacken Sie die vom Generator runtergeladene zip-Datei mit den Favicon-Formaten in das Vorlagen-Verzeichnis /favicons. Dort müssen im Normalfall (bei Standard-Generierung ohne Extra-Wünsche) folgende 10 Dateien gespeichert sein:
```
android-chrome-192x192.png
android-chrome-256x256.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
mstile-150x150.png
safari-pinned-tab.svg
site.webmanifest
```
Fügen Sie die kopierten HTML-link- und -meta-Elemente aus Ihrer Zwischenablage (oder, falls von Ihnen runtergeladen: aus den Dateien html_code.html oder README.md) in das PHP-Include-Element /x-includes/meta.inc der Vorlage ein (am Besten vor das vorhandene script-Element). Im Normalfall (bei Standard-Generierung) sollten dort neun neue Anweisungen (zu den vorher schon vorhandenen) hinzugekommen sein.

Keine passende Favicon-Vorlage erstellt oder gefunden?

Wenn Grafikerstellung nicht so Ihr Ding ist und Sie auch im Netz keine geeignete Favicon-Vorlage gefunden haben, gibt's zwei Möglichkeiten: Sie beauftragen einen Grafiker (kostet Geld) oder Sie verwenden eine der von mir erstellten Bilddateien (kostenlos): Im Vorlagen-Verzeichnis /extras liegen vier jpg-Bilddateien in der Auflösung 260 * 260 px, die Sie gerne nutzen und beim Real Favicon Generator als Vorlage hochladen können.

Beachten Sie bitte, daß die vier Bilder hier nur in 25 % der Originalgröße angezeigt werden.

	__blauer-haken-260-260.jpg (17 KB): paßt zum Farbschema (Design) Rhodos, die Favicon-Vorlage habe ich für diese Website verwendet :-)
	__brauner-haken-260-260.jpg (16 KB): paßt zum Farbschema (Design) Sahara
	__gruener-haken-260-260.jpg (17 KB): paßt zum Farbschema (Design) Waldeslust
	__roter-haken-260-260.jpg (17 KB): paßt zum Farbschema (Design) Merlot

Lob und Dank an Philippe Bernard

Bei dieser Gelegenheit ein großes Lob und herzlichen Dank an Philippe Bernard für den nützlichen Real Favicon Generator: ein tolles Werkzeug :-)

« vorige Seite

nächste Seite »