Favicon Generator
+ Tipps & Anleitung zum Einbinden



Die kleine Grafik, die in der Adresszeile von Browsern neben dem Titel der Seite angezeigt wird, nennt sich Favicon (Favorite Icon).


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. Aufgrund der vielen verschiedenen Geräte, mit denen User Ihre Website besuchen, werden über 20 verschiedene Bildgrößen benötigt.


Mit unserem Favicon Generator erhalten Sie schnell alle benötigten Größen.



  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.  Favicon im <head> einbinden


Die schönere und bessere Variante: Das Favicon direkt im Quellcode der entsprechenden Seite definieren/verlinken.


Laden Sie ein quadratisches Bild in der Größe 310x310px hoch und starten den Favicon Generator. Entpacken Sie die .zip Datei und laden 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. Er enthält verschiedene Größen und Bildformate Ihres Favicons und schon wird das Favicon auf allen Geräten und Browsern angezeigt.


Die verschiedenen Icons werden für verschiedene Systeme benötigt: favicon.png für moderne Desktop Browser, favicon.ico für ältere Browser (alte IE Versionen etc.), das Apple Touch Icon für mobile Browser wie iOS Safari und Android Chrome usw.


Der HTML Code, um das Favicon im Quelltext einzubinden.
Favicon im Quelltext einbinden


  

rel="icon" legt fest, dass es sich um ein Icon handelt, href="/favicon.png" gibt an, wo sich das Favicon befindet. Mit sizes="16x16" wird die Größe bestimmt und type="image/png" gibt an, um welchen Content-Typ es sich handelt.

<link rel=“apple-touch-icon-precomposed“ sizes=“57x57“ href=“/apple-touch-icon-57x57.png“ /> definiert z. B. ein spezielles Favicon für IOS Geräte.



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




2.  Im Wurzelverzeichnis des Webspaces hinterlegen


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


Browser suchen automatisch die Datei favicon.ico im Rootverzeichnis und können sie so als Favicon ausgeben.


Diese Methode wird vom W3C ausdrücklich nicht empfohlen.




3.  Direkt in der Verwaltungsoberfläche des CMS


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


Bei WordPress können Sie ein Favicon z. B. über den Customizer einfügen. Dazu gehen Sie zu „Design“ → „Customizer“ und klicken „Website-Informationen“. Unter „Website-Icon auswählen“ können Sie nun Ihr gewünschtes Favicon hochladen.


Sie benötigen ein quadratisches Bild, z. B. Ihr Logo, mit einer Größe von mindestens 512 x 512 Pixel.


Auf diesem Weg wird von WordPress ein Standard-Favicon erstellt, allerdings keines für Windows Kacheln oder Home-Buttons.


Bei WordPress kann man ganz einfach ein Favicon hinzufügen.

  Einsatzbereich von Favicons


Heutzutage werden Favicons nicht mehr nur vom Browser verwendet, vielmehr 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 Homescreen hinzufügen




Favicons - Google Suche

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 der mobilen Google® Suchergebnisse
Quelle: Google




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 Ihre Website als Kachel bei Windows hinzugefügt, so können Sie auch hier das Aussehen vordefinieren. Dabei können Sie Farbe, Titel und das Icon selbst entsprechend umändern.


Favicon Windows Kachel
Favicon als Kachel bei Windows hinzufügen



  Benötigte Bildgrößen


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


Sie können eines der folgenden Dateiformate nutzen:


FormatBemerkung
*.icoWird im Betriebssystem Windows zur Speicherung von Favicons verwendet.
*.gifGeringe Speicherplatz-Belegung, kurze Ladezeiten.
*.pngFür kleine Dateien bei hoher Qualität. Transparenter Hintergrund möglich.
*.jpgKomprimierung mit Qualitäts-Verlust.
*.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 Browsers / 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 Ihnen 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.

  FAQ


1. Was ist ein Favicon?

Ein Favicon ist die kleine Grafik, die in der Tab-Leiste eines Browsers neben dem Seitentitel angezeigt wird.


Es wird außerdem angezeigt, wenn Sie eine Website als Lesezeichen abspeichern oder am Smartphone dem Homescreen hinzufügen.


In den mobilen Suchergebnissen von Google ist es neuerdings sogar neben dem Domainnamen zu sehen.


Für einen besseren Wiedererkennungswert und einen professionellen Auftritt sollten Sie Ihrer Website unbedingt ein Favicon hinzufügen.


2. Kann ich selbst ein Favicon erstellen?

Sie können ein Favicon ganz einfach mit unserem Favicon Generator erstellen. User besuchen Ihre Website mit den unterschiedlichsten Geräten und Browsern. Deshalb benötigen Sie Ihr Favicon in vielen verschiedenen Größen. Der Generator übernimmt das für Sie.


3. Was passiert, wenn ich kein Favicon habe?

Der Google Chrome Browser zeigt ein leeres Dokumentenicon an, wenn kein Favicon vorhanden ist. Bei Firefox und Safari wird gar kein Favicon angezeigt.


Das ist zwar nicht schlimm, allerdings verpassen Sie eine tolle Möglichkeit, in den Suchergebnissen mehr hervorzustechen und den Erinnerungswert Ihrer Website zu erhöhen.