Favicon-Generator
Machen Sie aus Ihrem Logo alle Icons, die eine Website braucht: das Favicon im Browser-Tab, das Icon für den iPhone-Home-Bildschirm und die Android-App-Icons. Sie bekommen alles in einer ZIP-Datei, mit dem HTML-Code zum Einfügen.
So erstellen Sie ein Favicon
- 1Wählen Sie Ihr Logo. Ein SVG oder ein quadratisches PNG ab 512 px liefert das beste Ergebnis.
- 2Legen Sie fest, ob das ganze Bild ins Quadrat eingepasst oder zugeschnitten wird, und wählen Sie den Hintergrund.
- 3Prüfen Sie die Vorschau, auch wie das Icon in einem Browser-Tab aussieht.
- 4Laden Sie die ZIP-Datei herunter, laden Sie ihre Dateien in den obersten Ordner Ihrer Website hoch und fügen Sie den HTML-Code in den <head> Ihrer Seiten ein.
Die Icons, die eine Website wirklich braucht
Eine moderne Website braucht nur eine Handvoll Dateien. favicon.ico enthält Versionen mit 16, 32 und 48 px für Browser-Tabs, Lesezeichen und Windows. Jeder Browser sucht danach, selbst auf Seiten, die sie nicht erwähnen. apple-touch-icon.png (180 px) wird verwendet, wenn jemand Ihre Website zum Home-Bildschirm eines iPhones oder iPads hinzufügt. icon-192.png und icon-512.png, aufgeführt in site.webmanifest, nutzen Android und installierte Web-Apps.
Wenn Sie von einem SVG ausgehen, enthält die ZIP-Datei auch icon.svg. Die meisten aktuellen Browser nutzen es als Tab-Icon, und es bleibt auf jedem Bildschirm scharf. Der HTML-Code führt es bereits auf und behält favicon.ico als Ersatz für Browser, die es brauchen.
Kleine Icons brauchen einfache Formen. Bei 16 px verschwinden feine Linien und kleine Schrift. Hat Ihr vollständiges Logo einen Schriftzug, probieren Sie nur das Symbol oder den ersten Buchstaben. Achten Sie auf die Tab-Vorschau über den Icons: Sie zeigt das 16-px-Icon in Originalgröße, in hellen und dunklen Tabs.
Warum Lilypad
100 % privat
Dateien werden direkt in Ihrem Browser verarbeitet. Nichts wird je auf einen Server hochgeladen.
Alle Größen auf einmal
favicon.ico, das Apple Touch Icon und Android-App-Icons aus einem Bild, in einer ZIP-Datei.
Schnell und kostenlos
Nutzt alle Kerne Ihres Prozessors. Keine Anmeldung, keine Wasserzeichen, keine Dateilimits.
Häufige Fragen
Wohin gehören die Favicon-Dateien?
In den obersten Ordner Ihrer Website, in dem auch die Startseite liegt, damit sie unter /favicon.ico, /apple-touch-icon.png und so weiter erreichbar sind. Fügen Sie dann die HTML-Zeilen in den <head>-Bereich jeder Seite oder in Ihre Seitenvorlage ein.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons sehr hartnäckig im Cache. Öffnen Sie Ihre Website in einem privaten Fenster oder hängen Sie „?v=2“ an die Icon-Links in Ihrem HTML an, um das neue zu sehen.
Kann ich ein JPG- oder HEIC-Foto verwenden?
Ja, jedes Bild funktioniert. Fotos sind bei 16 px aber selten gut zu erkennen, ein einfaches Logo oder Symbol auf schlichtem Hintergrund ergibt meist das bessere Favicon.
Werden meine Dateien irgendwohin hochgeladen?
Nein. Alles läuft in Ihrem Browser. Ihre Dateien verlassen nie Ihr Gerät, und wir sehen sie nie.