Über Favicon-Generator
Zyffs Favicon-Generator verwandelt ein Bild in den Symbolsatz, den eine Seite heute wirklich braucht: eine favicon.ico mit mehreren Auflösungen, PNGs in Vielfachen von 48 px für Googles Suchergebnisse, ein apple-touch-icon mit 180 px, PWA-Symbole mit 192 und 512 px, eine maskierbare Variante für Androids Zuschnitt, ein Web-Manifest und die Head-Tags, die auf alles davon verweisen. Jede Größe wird aus einem einzigen hochauflösenden quadratischen Rendering abgeleitet statt einzeln neu abgetastet, und die Vorschau zeigt die Symbole mit 16, 32, 48 und 64 px in echter Größe — denn ein Logo, das im Browser-Tab zu Matsch wird, ist das eine Problem, das keine Exporteinstellung behebt. Werfen Sie ein PNG, JPG, WebP, AVIF oder SVG hinein und laden Sie alles als ZIP herunter. Das Rendern geschieht auf Zyffs Servern im Arbeitsspeicher für die Dauer dieser einen Anfrage, es bleibt also keine Kopie Ihres Logos zurück. Kostenlos, ohne Anmeldung, ohne Wasserzeichen.
So erstellen Sie ein Favicon für Ihre Website
Laden Sie ein quadratisches Bild hoch
Werfen Sie ein quadratisches PNG, ein SVG oder ein hochauflösendes Logo hinein, idealerweise 512 px oder größer. Alles Nichtquadratische wird standardmäßig passend gefüllt oder beschnitten, wenn Sie auf Füllen umschalten. Ein SVG wird in voller Auflösung gerastert statt in der von ihm deklarierten Größe und außerdem als icon.svg durchgereicht.
Prüfen Sie die kleinen Größen
Die Vorschau zeichnet 16, 32, 48 und 64 px in echter Größe, nicht aus einer großen heruntergerechnet. Die meisten Logos brauchen eine vereinfachte Marke, kräftigere Striche oder einen gefüllten Hintergrund, um bei 16 px lesbar zu bleiben — und wenn es dort unlesbar ist, rettet es keine Exporteinstellung.
Stellen Sie den maskierbaren Rand ein
Android beschneidet Symbole auf einen Kreis oder Squircle seiner Wahl, die maskierbare Fassung braucht ihren Bildinhalt also innerhalb der Sicherheitszone über einem gefüllten Hintergrund. Die Vorschau zeichnet diese Sicherheitszone als gestrichelten Kreis und zeigt das beschnittene Ergebnis neben dem vollen Quadrat.
Laden Sie den Symbolsatz herunter
Ein Button exportiert den ganzen Satz als ZIP: favicon.ico, PNGs in Vielfachen von 48 px, das apple-touch-icon, die PWA-Symbole mit 192 und 512 px, die maskierbare Variante und site.webmanifest. Einzelne Dateien lassen sich aus der Liste nacheinander herunterladen.
Fügen Sie die HTML-Tags ein
Kopieren Sie die erzeugten link- und Manifest-Tags in Ihren Head, laden Sie die Dateien in Ihr Wurzelverzeichnis und aktualisieren Sie hart. Browser speichern Favicons hartnäckig zwischen, ein altes Symbol kann also nachhängen. Setzen Sie vorher einen Auslieferungspfad, wenn die Dateien nicht in der Wurzel liegen sollen.
Was Favicon-Generator kann
Der vollständige moderne Symbolsatz
Ein Upload erzeugt favicon.ico, PNG-Symbole in Vielfachen von 48 px, das apple-touch-icon, die PWA-Symbole mit 192 und 512 px, die ein Web-Manifest erwartet, und site.webmanifest selbst — als ein ZIP.
Größen für das Google-Suchergebnis
Google nutzt nur ein Favicon, das quadratisch und ein Vielfaches von 48 px ist, deshalb deckt der Export 48, 96 und 144 px neben den althergebrachten 16 und 32 px ab, die Browser anfordern. Geeignete Größen sind in der Dateiliste gekennzeichnet.
Maskierbares Android-Symbol
Ein eigener maskierbarer Export hält den Bildinhalt innerhalb der Sicherheitszone über einem gefüllten Hintergrund, sodass Androids Kreis- oder Squircle-Zuschnitt Rand statt Ihres Logos abschneidet. Die Vorschau zeigt den Zuschnitt vor dem Herunterladen.
Vorschau in echter Größe bei 16 px
Die kleinen Größen werden im Verhältnis 1:1 gerendert, nicht aus einer großen heruntergerechnet. Es ist die einzige ehrliche Art zu sehen, ob Ihre Marke einen Browser-Tab übersteht, und es ist die Prüfung, die die meisten Generatoren überspringen.
Farbe und Innenabstand je Plattform
iOS zeichnet ein transparentes Startbildschirm-Symbol schwarz und legt seinen eigenen Squircle an, deshalb bekommt das Apple-Symbol seinen eigenen Hintergrund und Innenabstand und wird ohne Rundung exportiert. Die Browser-Symbole behalten ihre Transparenz.
HTML-Tags zum Kopieren
Sie bekommen die genauen link- und Manifest-Tags für Ihren Head, erzeugt aus den Dateien, die tatsächlich in Ihrem Download liegen, sodass nichts auf eine Datei zeigt, die Sie nicht exportiert haben. Wählen Sie den minimalen modernen Satz oder die vollständige Auflistung.
ICO-Datei mit mehreren Auflösungen
Die .ico bündelt die von Ihnen gewählten Einzelbilder — standardmäßig 16, 32 und 48 px — in einer Datei, und genau die fordern ältere Browser, Windows-Verknüpfungen und manche Feedreader weiterhin aus Ihrem Wurzelverzeichnis an.
Vektor-Symbol wird durchgereicht
Laden Sie ein SVG hoch, und es wird unverändert als icon.svg neben den PNGs ausgeliefert. Moderne Browser bevorzugen es, und es bleibt in jeder Größe scharf, auch auf Displays, die es noch gar nicht gibt.
At a glance
| Eingabeformate | PNG, JPG, WebP, AVIF, SVG, TIFF, GIF, HEIC |
|---|---|
| Ausgabedateien | favicon.ico, PNG-Symbole, apple-touch-icon, PWA- und maskierbare Symbole, icon.svg, site.webmanifest, browserconfig.xml — als ein ZIP |
| ICO-Größen | 16, 24, 32, 48, 64, 128, 256 px (16, 32, 48 standardmäßig) |
| PNG-Symbolgrößen | 16 bis 512 px, einschließlich der von Google verlangten Vielfachen 48, 96 und 144 px |
| iOS-Größen | 120, 152, 167, 180 px (180 standardmäßig, mehr braucht das aktuelle iOS nicht) |
| PWA-Größen | 48 bis 512 px, dazu eine maskierbare Variante mit 512 px |
| Maximale Dateigröße | 25 MB, bis zu 100 Megapixel |
| Rendering | Jede Größe aus einem quadratischen Master mit 1024 px abgeleitet, lanczos3, verlustfreies PNG |
Frequently asked questions
Welche Favicon-Größen braucht eine Website wirklich?
Weit weniger, als die alten Zwanzig-Dateien-Checklisten nahelegen. Ein aktueller Satz besteht aus einer favicon.ico mit 16, 32 und 48 px, einem SVG- oder PNG-Symbol für moderne Browser, einem apple-touch-icon mit 180x180 für iOS-Startbildschirme und PNGs mit 192x192 sowie 512x512, die aus einem Web-Manifest für Android- und PWA-Installationen referenziert werden, dazu eine maskierbare 512-px-Variante für Androids Zuschnitt.
Warum erscheint mein Favicon nicht in den Google-Suchergebnissen?
Google wendet eigene Regeln an: Das Symbol muss quadratisch sein, ein Vielfaches von 48 px, crawlbar statt in der robots.txt gesperrt, seitenweit einheitlich und mit einem rel-Wert referenziert, den Google kennt, etwa icon oder apple-touch-icon. Selbst wenn das behoben ist, aktualisiert Google das Symbol erst beim erneuten Crawlen Ihrer Startseite, was Tage oder Wochen dauern kann.
Wird favicon.ico noch gebraucht?
Sie lohnt sich weiterhin. Moderne Browser bevorzugen ein in Ihrem HTML deklariertes SVG- oder PNG-Symbol, aber eine favicon.ico im Wurzelverzeichnis ist der Rückfall, den mehrere Programme standardmäßig anfordern, darunter ältere Browser, manche Crawler und manche Feedreader. Sie liegen zu lassen kostet ein paar Kilobyte.
Was ist ein maskierbares Symbol?
Ein maskierbares Symbol ist ein PWA-Symbol, das darauf ausgelegt ist, einen Zuschnitt zu überstehen. Android legt eine Plattformform an, meist einen Kreis oder ein abgerundetes Quadrat, das Symbol braucht also einen randlosen Hintergrund mit dem wichtigen Bildinhalt in einer zentrierten Sicherheitszone von etwa 80 Prozent der Breite. Es wird im Manifest mit purpose auf maskable deklariert.
Wohin gehören Favicon-Dateien auf einer Website?
Die .ico liegt traditionell im Wurzelverzeichnis als /favicon.ico, weil Browser genau diesen Pfad anfordern, selbst wenn kein HTML-Tag darauf zeigt. Die übrigen Dateien können überall liegen, wo Sie sie referenzieren können, wobei die Wurzel oder ein Ordner /icons/ auf oberster Ebene die Pfade kurz hält. Referenzieren Sie jede mit einem link-Tag und führen Sie die PWA-Größen in Ihrem Manifest auf.
Welche Größe sollte ein apple-touch-icon haben?
180x180 Pixel ist die Größe, die Sie ausliefern sollten. iOS skaliert dieses eine PNG für kleinere Geräte herunter, die lange Liste gerätespezifischer apple-touch-icon-Dateien ist also nicht mehr nötig. Nehmen Sie ein quadratisches Bild ohne Transparenz, denn iOS setzt das Symbol auf eine gefüllte Kachel, und transparente Bereiche können schwarz erscheinen.
Welches Bild soll ich für ein Favicon hochladen?
Ein quadratisches Bild mit mindestens 512 px, damit jede Größe eine Verkleinerung und keine Vergrößerung ist. Ein SVG ist noch besser — es wird unabhängig von der deklarierten Breite in voller Auflösung gerastert und außerdem als icon.svg mitgeliefert. Ein nicht quadratisches Bild wird standardmäßig passend gefüllt oder beschnitten, wenn Sie auf Füllen umschalten. Fotos funktionieren selten: Ein Favicon ist auf den meisten Bildschirmen 16 px groß, und eine vereinfachte Marke ist dort lesbar, wo eine detailreiche es nicht ist.
Behält Zyff das hochgeladene Logo?
Nein. Das Bild wird für die Dauer der einen Anfrage, die Ihre Symbole rendert, im Arbeitsspeicher gehalten und beim Senden der Antwort verworfen. Nichts wird auf die Festplatte geschrieben, es gibt also keine Kopie zum späteren Löschen und keinen Verlauf zum Leeren. Der Generator ist kostenlos und braucht kein Konto.