Favicon-Generator
Erzeuge Favicon-PNGs in allen Standardgrößen und eine .ico-Datei mit mehreren Auflösungen aus einem beliebigen Bild, vollständig in deinem Browser.
Favicon-Generator wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Ein Favicon ist das kleine Symbol, das ein Browser neben dem Seitentitel in der Tab-Leiste, in der Lesezeichenleiste und in der Verlaufsliste anzeigt. Der Name ist eine Zusammenziehung von favorite icon (Favoritensymbol), ein Begriff, der bis zum Internet Explorer 5 im Jahr 1999 zurückreicht, als Microsoft die Unterstützung für eine Datei namens favicon.ico im Stammverzeichnis der Website einführte. Zweieinhalb Jahrzehnte später ist das bescheidene Favicon zu einer kleinen Familie von Ressourcen herangewachsen: eine klassische .ico-Datei mit mehreren Größen für ältere Desktop-Browser, ein Satz von PNGs für moderne Browser, ein 180x180-apple-touch-icon für iOS-Startbildschirme sowie 192x192- und 512x512-PNGs, die von einem Web-App-Manifest für Android und installierbare progressive Web-Apps referenziert werden.
Häufig gestellte Fragen
Wird mein Bild irgendwohin hochgeladen?
Welche Größen erzeugt der Generator und warum?
Kann eine .ico-Datei wirklich PNG-Daten enthalten?
Welches Quellbild sollte ich für das beste Favicon verwenden?
Wie füge ich die erzeugten Favicons zu meiner Website hinzu?
Warum sieht mein Favicon unscharf oder verpixelt aus?
Bewahrt das Werkzeug die Bildtransparenz?
Warum wird mein Favicon im Browser nicht aktualisiert?
Über Favicon-Generator
Dieser Generator nimmt ein einziges Quellbild und erzeugt alle diese Größen auf einmal. Er zeichnet dein Bild auf HTML-Canvases mit 16, 32, 48, 180, 192 und 512 Pixeln, behält dabei das Seitenverhältnis bei und zentriert die Grafik in jedem Quadrat, und kodiert dann jede als gestochen scharfes PNG, das du einzeln herunterladen kannst. Außerdem fügt er eine echte .ico-Datei zusammen, die die 16-, 32- und 48-Pixel-Varianten in einem Container bündelt, damit ein Browser die jeweils benötigte Auflösung auswählen kann. Moderne .ico-Dateien können PNG-komprimierte Einträge statt unkomprimierter Bitmaps einbetten, und genau das schreibt dieses Werkzeug, was ein kleineres und schärferes Symbol als das alte unkomprimierte BMP-Format ergibt.
Alles geschieht lokal in deinem Browser mithilfe der Canvas-API und der Blob-API. Dein Bild wird niemals auf einen Server hochgeladen, es gibt kein Konto anzulegen und keine Warteschlange. Das macht das Werkzeug sicher für unveröffentlichte Logos, Kundenarbeit unter Geheimhaltungsvereinbarung und jede Grafik, die du lieber nicht einem Drittanbieterdienst übergeben möchtest. Sobald die Seite geladen ist, funktioniert es auch offline, und die erzeugten Dateien werden sofort auf deinem eigenen Gerät erstellt.
Für das beste Ergebnis solltest du von einer quadratischen Quelle in hoher Auflösung ausgehen, idealerweise 512x512 oder größer, mit einem transparenten oder einfarbigen Hintergrund und kräftigen, einfachen Formen. Feine Details und dünne Linien verschwinden bei 16 Pixeln, daher sind gut lesbare Favicons fast immer vereinfachte Versionen eines vollständigen Logos. Teste die 16- und 32-Pixel-Vorschauen in ihrer echten Größe, bevor du sie ausspielst, denn so werden die meisten Nutzer dein Symbol tatsächlich in einer überfüllten Reihe von Browser-Tabs sehen.
Von einer einzigen versteckten Datei zu einem ganzen Symbol-Ökosystem
Das Favicon wurde im März 1999 mit dem Internet Explorer 5 geboren. Microsofts Umsetzung war auf stille Weise raffiniert und etwas aufdringlich: Der Browser forderte automatisch eine Datei namens favicon.ico aus dem Stammverzeichnis jeder Website an, die du mit einem Lesezeichen versahst, ganz ohne erforderliche Auszeichnung. Webmaster entdeckten die Funktion, als ihnen rätselhafte Anfragen nach diesem Dateinamen in ihren Serverprotokollen auffielen. Da die Anfrage nur beim Setzen eines Lesezeichens erfolgte, war eine frühe inoffizielle Kennzahl für die Beliebtheit einer Website das Zählen der Zugriffe auf favicon.ico.
Die ursprüngliche Spezifikation band Favicons an den ICO-Container von Windows, ein von Windows 3.0 geerbtes Format, das mehrere Bilder unterschiedlicher Größe und Farbtiefe in einer einzigen Datei aufnehmen kann. Jahrelang waren diese Einträge unkomprimierte BMP-Bitmaps, was hochauflösende Symbole überraschend groß machte. Windows Vista änderte das, indem es PNG-komprimierte Einträge im selben Container erlaubte, und das Web standardisierte sich auf PNG-Favicons, die über link-rel=icon-Tags referenziert werden, was die Designer von den Beschränkungen des alten Formats befreite und zugleich .ico aus Gründen der Abwärtskompatibilität am Leben hielt.
Die mobile Ära vervielfachte die Anforderungen. Apple führte das apple-touch-icon ein, damit eine mit einem Lesezeichen versehene Seite auf dem iOS-Startbildschirm wie eine native App aussehen konnte. Android und die Web-App-Manifest-Spezifikation fügten 192- und 512-Pixel-Symbole für installierbare progressive Web-Apps und Startbildschirme hinzu. Was als eine einzige versteckte 16x16-Datei begann, ist zu einem kleinen Designsystem für sich geworden, und den gesamten Satz von Hand in einem Bildbearbeitungsprogramm zu erstellen, ist genau die mühsame, sich wiederholende Aufgabe, die ein browserbasiertes Werkzeug dir abnehmen soll.