Optimieren

Favicon-Generator

Machen Sie aus einem Logo, einem Bild oder ein paar Buchstaben alle Icons, die eine Website braucht: Browser-Tab, Lesezeichen, Startbildschirme von iPhone und Android, samt HTML zum Einbinden.

Erst Vorschau, dann Prüfung

Sehen Sie das Icon vor dem Download in hellen und dunklen Browser-Tabs und auf Startbildschirmen. Jede Datei wird vorher wieder eingelesen und geprüft.

So funktioniert es

Gestalten, ansehen, herunterladen

Mit einem Bild oder Buchstaben beginnen. Fügen Sie ein Logo hinzu (am besten SVG oder ein PNG ab 512 Pixel) oder tippen Sie bis zu drei Buchstaben.
Form geben. Quadrat, abgerundet oder Kreis, transparenter oder farbiger Hintergrund und Abstand rundherum.
Vorschau prüfen. Browser-Tabs im hellen und dunklen Modus, die echten Größen 16, 32 und 48 Pixel und die Startbildschirme von iPhone und Android.
Herunterladen und einbinden. Laden Sie die ZIP-Datei herunter, laden Sie die Dateien auf Ihre Website und fügen Sie das HTML in den <head> jeder Seite ein.

Was Sie erhalten

Die Dateien und wofür sie da sind

favicon.ico mit Bildern in 16, 32 und 48 Pixel: das klassische Icon, nach dem jeder Browser sucht.
favicon-16x16.png und favicon-32x32.png für Tabs und Lesezeichen.
apple-touch-icon.png (180 Pixel, nie transparent) für Startbildschirme von iPhone und iPad.
android-chrome-192x192.png und 512x512.png sowie ein Maskable-Icon, das Android zu Kreis oder abgerundetem Quadrat zuschneiden kann, ohne Ihr Motiv anzuschneiden.
site.webmanifest mit Name und Farben der Website, um sie als App zu installieren.
favicon.svg, wenn Sie mit einem SVG beginnen, damit moderne Browser in jeder Größe ein scharfes Icon zeigen.

Gut zu wissen

Ein Favicon, das bei 16 Pixel lesbar ist

Ein Browser-Tab zeigt das Icon mit 16 Pixel, etwa so groß wie ein Buchstabe. Feine Details und lange Wörter verschwinden dabei. Verwenden Sie daher ein einfaches Zeichen, ein bis drei Buchstaben oder den markantesten Teil Ihres Logos. Starker Kontrast hilft, und ein gefüllter Hintergrund hält das Icon auf hellen und dunklen Tabs sichtbar. Das Werkzeug warnt, wenn ein Bild zu klein ist oder Buchstaben schwer lesbar sind.

Verwandte Werkzeuge

Mehr für Ihre Website

FAQ

Fragen zu Favicons.

Wie groß sollte ein Favicon sein?

Es gibt nicht die eine Größe: Browser nutzen 16 und 32 Pixel für Tabs, Windows 48 Pixel, iPhones 180 Pixel und Android 192 und 512 Pixel. Beginnen Sie mit einem Bild von mindestens 512 Pixel oder einem SVG, und dieses Werkzeug erstellt alle Größen.

Wie füge ich ein Favicon zu meiner Website hinzu?

Laden Sie die Dateien aus der ZIP-Datei auf Ihre Website, meist in den obersten Ordner, und fügen Sie das hier gezeigte HTML in den <head> jeder Seite ein. Liegen die Dateien in einem anderen Ordner, geben Sie ihn unter Website-Angaben an, und das HTML passt sich an.

Brauche ich favicon.ico noch?

Ja, es lohnt sich. Manche Browser, Feed-Reader und Werkzeuge fragen direkt nach /favicon.ico, ohne Ihr HTML zu lesen. Die hier erstellte Datei enthält Bilder in 16, 32 und 48 Pixel in einer Datei.

Was ist ein Maskable-Icon?

Android zeigt App-Icons je nach Gerät in verschiedenen Formen, etwa als Kreis oder abgerundetes Quadrat. Ein Maskable-Icon hat zusätzlichen Rand um das Motiv, sodass der Zuschnitt auf diese Formen Ihr Logo nie anschneidet. Die Android-Vorschau zeigt es als Kreis zugeschnitten.

Warum ändert sich mein Favicon im Browser nicht?

Browser behalten Favicons lange. Öffnen Sie nach dem Hochladen die Adresse des Icons direkt, laden Sie mit Strg+F5 oder Umschalt+Neu laden neu oder versuchen Sie ein privates Fenster. Ein neuer Dateiname oder ?v=2 an den Links lässt jeden Browser das neue Icon laden.

Werden meine Bilder hochgeladen?

Nein. Die Icons werden in Ihrem Browser aus Ihrem Bild oder Ihren Buchstaben gezeichnet. Bild, Icons und Website-Angaben werden nirgendwohin gesendet.