Favicon-Generator
Machen Sie aus einem Bild oder einem Buchstaben den kompletten Satz Favicon-Dateien, samt HTML zum Einbinden.
Ihre Dateien verlassen nie Ihr Gerät
Bild hier ablegen
PNG, JPEG, WebP, GIF, BMP oder AVIF. Oder wechseln Sie unten zu einem Buchstaben-Icon.
Wird auf diesem Gerät geöffnet. Nichts wird hochgeladen.
Ein Bild nach dem anderen, bis zu 50 MB und etwa 100 Megapixel. Buchstaben-Icons verwenden 1 oder 2 Zeichen.
So erstellen Sie ein Favicon
- Wählen Sie ein Bild aus oder wechseln Sie zu Buchstaben und geben Sie ein oder zwei Zeichen mit Ihren Farben ein.
- Wählen Sie bei einem Bild einen mittigen quadratischen Zuschnitt oder Einpassen mit Rand. Prüfen Sie die Vorschauen mit 16, 32, 48 und 180 Pixeln.
- Klicken Sie auf Favicon-Dateien erstellen, laden Sie die .zip herunter und fügen Sie das HTML in Ihre Seiten ein.
Was zu einem Favicon-Satz gehört
Ein Favicon ist das kleine Symbol im Browser-Tab, in der Lesezeichenliste oder im Suchergebnis. Browser suchen nach mehreren Dateien: favicon.ico für ältere Browser und allgemein, PNG-Icons mit 16 und 32 Pixeln für Tabs, ein Apple-Touch-Icon mit 180 Pixeln für den Home-Bildschirm von iPhone und iPad sowie Icons mit 192 und 512 Pixeln für Android und installierbare Web-Apps. Eine kleine Datei site.webmanifest listet die Android-Icons auf. Mit diesem Favicon-Generator erstellen Sie alle auf einmal.
Das Tool zeichnet jede Größe einzeln aus Ihrem Original, sodass kleine Größen aus dem vollen Bild verkleinert und nicht aus einem winzigen Bild hochgerechnet werden. Die .ico-Datei wird als Container mit drei PNG-Bildern zu 16, 32 und 48 Pixeln geschrieben. Buchstaben-Icons werden direkt in jeder Größe gezeichnet, damit die Kanten scharf bleiben.
Tipps
- Verwenden Sie kräftige, einfache Formen und starken Kontrast. Feine Details verschwinden bei 16 Pixeln.
- Sie möchten ein quadratisches Bild aus einem Teil eines Fotos? Nutzen Sie zuerst Bild zuschneiden mit 1:1.
- Sie brauchen andere Größen? Bildgröße ändern liefert jede Breite und Höhe.
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Die Icons werden in Ihrem Browser auf Ihrem Gerät gezeichnet, und auch die ZIP-Datei wird dort erstellt. Nichts wird an einen Server gesendet.
Welche Dateien erhalte ich?
favicon.ico (Versionen mit 16, 32 und 48 Pixeln), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 Pixel), android-chrome-192x192.png, android-chrome-512x512.png und site.webmanifest, in einer .zip.
Wohin lege ich die Dateien?
In das Stammverzeichnis Ihrer Website, sodass sie unter Adressen wie /favicon.ico erreichbar sind. Fügen Sie dann das HTML-Snippet, das nach dem Erstellen angezeigt wird, in den head-Bereich Ihrer Seiten ein.
Mit welchem Bild sollte ich anfangen?
Ein quadratisches Bild mit mindestens 512 × 512 Pixeln liefert das sauberste Ergebnis, weil das größte Icon 512 Pixel misst. Einfache Formen überstehen das Verkleinern auf 16 Pixel viel besser als detailreiche. Prüfen Sie die Vorschauen mit 16 und 32 Pixeln.
Was ist der Unterschied zwischen Zuschneiden und Einpassen mit Rand?
Beim Zuschneiden wird ein mittiges Quadrat aus dem Bild genommen und der Rest verworfen. Einpassen mit Rand behält das ganze Bild, zentriert es mit einem kleinen Rand und füllt den freien Platz mit Ihrer Hintergrundfarbe oder lässt ihn transparent.
Ist die .ico-Datei gültig?
Ja. Sie enthält drei PNG-kodierte Bilder mit 16, 32 und 48 Pixeln, die jeder aktuelle Browser liest.