WebyTooly

Favicon-Generator

Lade dein Logo hoch und lade alle Favicon-Größen herunter, die eine moderne Website braucht, inklusive favicon.ico.

Espacio publicitario

Zieh dein Logo hierher oder klicke, um es auszuwählen

Ideal ist ein quadratisches Bild ab 512 × 512 px

Wird nur angewendet, wenn dein Bild transparente Flächen hat. Für den Alphakanal auf transparent lassen.

Espacio publicitario

So entstehen die Favicons

Zuerst schneiden wir das größte zentrierte Quadrat aus deinem Bild, damit ein breites Logo nicht gestaucht wird. Dieses Quadrat wird dann auf eine Canvas jeder Größe gezeichnet und als PNG exportiert.

Seitenlänge des Zuschnitts = min(Breite, Höhe)

Die favicon.ico bauen wir mit einem eigenen ICO-Encoder: ein ICONDIR-Header, ein Verzeichniseintrag pro Größe und die PNG mit 16, 32 und 48 px unverändert eingebettet. Seit Windows Vista erlaubt das ICO-Format PNG im Inneren, und alle aktuellen Browser lesen das.

Die großen Größen sind kein Schmuck: 180 px ist das Icon, das iOS beim Hinzufügen zum Startbildschirm nutzt, 192 und 512 px fordert das Manifest einer PWA.

Praktisches Beispiel

Ein Logo mit 1024 × 768 px wird auf das mittlere Quadrat von 768 × 768 px zugeschnitten; daraus entstehen die sechs PNG und die .ico, alle zentriert und unverzerrt.

Häufig gestellte Fragen

Wie groß sollte mein Ausgangsbild sein?
Je größer, desto besser: Ab 512 × 512 px werden alle Größen scharf. Aus einem kleinen Bild wirken die großen Größen pixelig.
Brauche ich die favicon.ico noch, wenn ich PNG habe?
Sie ist weiterhin empfehlenswert: Manche Browser und viele Aggregatoren fragen sie standardmäßig im Wurzelverzeichnis ab, ohne die HTML-Tags zu lesen.
Bleibt die Transparenz erhalten?
Ja, sofern du keine Hintergrundfarbe wählst. Die erzeugten PNG behalten den Alphakanal und die .ico bettet genau diese 32-Bit-PNG ein.
Wohin gehören die Dateien?
Die favicon.ico ins Wurzelverzeichnis, die PNG wohin du magst — referenziert über die link-Tags, die wir nach dem Erzeugen anzeigen.

Verwandte Rechner