Favicon Generator
+ Tipps & Anleitung zum Einbinden



Ein Favicon ist ein 16×16 bis 310×310 Pixel großes Icon bzw. Logo, das von Webbrowsern und Smartphones verwendet wird, um den Wiedererkennungswert einer Website zu stärken.

Die Zeiten in denen ein 16x16 und 32x32 Pixel großes Favicon ausreichte, sind vorbei. Mit den vielen verschiedenen Geräten und Anwendungen werden über 20 verschiedene Bildgrößen benötigt. Die aktuellste Neuerung ist die Anzeige des Favicon in den Google Suchergebnissen.



Favicon Generator


oder
Ein quadratisches Bild (.png,.jpeg oder.gif) in hoher Auflösung (ideal: 310x310px und 140dpi und max. 2Mb).
Chrome Toolbar-Farbe für Android seit Lollipop (Version 39).
<meta name="theme-color" content="#fff">
Die Farbe der iOS-Statusleiste.
<meta name="apple-mobile-web-app-status-bar-style" content="#fff">
Kachelfarbe, wenn Seite auf den Windows-Startbildschirm angeheftet ist.
<meta name="msapplication-TileColor" content="#fff">

Download ZIP-Archiv enthält Favicons in verschiedenen Größen, manifest.json, browserconfig.xml, Beispiel-HTML-Dokument und hat ca. 360Kb.


Favicon einbinden - So wird's gemacht


Es gibt drei Möglichkeiten, um ein Favicon schnell und einfach auf der eigenen Website einzubinden.


1. Die schönere und bessere Variante:

Das Favicon direkt im Quellcode der entsprechenden Seite definieren/verlinken.

Lade ein quadratisches Bild in der Größe 310x310px hoch und starte den Favicon Generator. Entpacke die .zip Datei und lade sämtliche Bilddateien und die manifest.json Datei in das /www Verzeichnis. Der Code im <head> der example.html (alle <meta> & <link> Tags) gehört in den <head> der Website und schon wird das Favicon auf allen Geräten und Browsern angezeigt.


Favicon einbinden
Favicon im Quelltext einbinden


Das Favicon kann nach dem Laden der Website via JavaScript verändert werden. Ein interessantes Beispiel dafür ist Defender of the Favicon.


2. Wird das Favicon mit definiertem Namen und Format (favicon.ico) im Wurzelverzeichnis des Webspaces hinterlegt, wird es von den meisten Browsern aber von wenigen Geräten erkannt und verwendet.


3. In einigen CMS kann man das Favicon direkt in der Verwaltungsoberfläche auswählen.


Einsatzbereich von Favicons

Heutzutage werden Favicons nicht mehr nur vom Browser verwendet, viel mehr finden sie an vielen weiteren Stellen Verwendung.


Einsatz von Favicons auf mobilen Geräten

Favicons werden am Smartphone auch für die Verlinkung am Homescreen verwendet. Für Android und iOS kann dabei je ein eigenes Favicon, für den Homescreen, definiert werden. Es können ebenso noch weitere Eigenschaften für Smartphones definiert werden.


Favicon am iPhone
Website zum Home Screen hinzufügen


Favicons - Google Search

In der neu überarbeiteten Version des Designs der mobilen Suchergebnisse von Google® werden nun auch Favicons ausgegeben.

Bei diesem neuen Design bilden der Domainname und das vorangestellte Favicon einen Anker gefolgt vom eigentlichen Snippet.


Google mobile Suchergebnisse
vorher - nachher
mobile Suchergebnisse Google®


Google Artikel - Änderungen der mobilen Suchergebnisse



Verwendung von Favicons im Browser

Im Browser werden Favicons nahezu immer neben der Domain/URL der Website und auch bei den Lesezeichen angezeigt.

Da die Besucher dieses Icon oft zu Gesicht bekommen, ist es ratsam, wenn es leicht mit der eigenen Website in Verbindung gebracht werden kann. Ein gut gewähltes Favicon erhöht außerdem die Chance, dass Besucher Ihre Seite leichter wiedererkennen und sie erneut aufrufen.


Favicon Firefox
Favicon von Domaintechnik in Firefox


Favicon Chrome Lesezeichen
Favicon als Lesezeichen in Chrome




Favicon als Windowskachel verwenden

Wird deine Website als Kachel bei Windows hinzugefügt, so kannst du auch hier das Aussehen vordefinieren. Dabei kannst du Farbe, Titel und das Icon selbst entsprechend umändern.


Favicon Windows Kachel
Favicon als Kachel bei Windows hinzufügen



Größe und Formate


Da Favicons so vielseitig einsetzbar sind, müssen auch diverse Größen zur Verfügung gestellt werden. Mit unserem Favicon Generator ist das kein Problem, dieser erstellt automatisch alle benötigten Größen.


EndgerätGrößen [ Pixel x Pixel ]
Browser16x16, 32x32, 96x96
Android36x36, 48x48, 72x72, 96x96, 144x144, 192x192
Apple57x57, 60x60, 72x72, 114x114, 76x76, 120x120, 152x152, 180x180
Microsoft70x70, 150x150, 310x150, 310x310

Unterstützte Formate


FormatBemerkung
*.ico
*.gif
*.png
*.jpg
*.svg Vektorgrafik.
Ist beliebig groß / klein skalierbar ohne Verluste in Auflösung oder Qualität einbüßen zu müssen.

Attribute für Meta- und Link-Tags:


Auch diese werden vom Favicon Generator automatisch erstellt


GerätAttributVerwendung
apple-touch-icon Definiert ein spezielles Favicon für iOS Geräte

Dieses Icon wird von Apple mit abgerundeten Ecken, Schattenwurf und Glanz modifiziert!
apple-touch-icon-precomposed Wie apple-touch-icon nur ohne Modifizierung.
apple-touch-startup-image Definiere ein Bild / Icon, welches beim Start des Browser / Laden der Seite angezeigt werden soll.

Normalerweise wird ein Bild vom letzten Aufruf verwendet, kann aber mit diesem Attribut geändert werden.
apple-mobile-web-app-title Definiere einen alternativen Titel.

Wie in Abbildung "Website zum Home Screen hinzufügen" definiert.
apple-mobile-web-app-capable Definiere ob Safari wesentliche Steuerelemente Anzeigen soll oder nicht.

Die Website wird im Safari-Browser mehr den "Standalone look" haben. Safari blendet dabei nahezu alle Steuerelemente aus. (Bis auf die Statusbar)
apple-mobile-web-app-status-bar-styleStatusbar kann ausgeblendet / umdefiniert werden.

Bei Verwendung sollte auch apple-mobile-web-app-capable aktiviert sein.
application-name Definiere einen alternativen Titel für Microsoft Plattformen.
msapplication-TileColor Definiere die Kachel Farbe.

Vergleiche "Website als Kachel hinzufügen"
squareAAxBBlogo Entsprechendes Logo für die Kacheln unter Windows festlegen

Dabei sollten dir Formate, wie in "Größen und Formate" beschrieben, zur Verfügung gestellt werden.
theme-colorFarbe der Statusbar bei Android Browsern kann definiert werden.

Bei Verwendung sollte auch apple-mobile-web-app-capable aktiviert sein.