Laden...
Laden...
Laden Sie ein Bild hoch und erhalten Sie jede Favicon-Größe, die eine moderne Website benötigt – favicon.ico, PNG-Größen für Browser, Apple und Android, plus HTML- und Manifest-Snippets, die bereit zum Einfügen sind.
Ein Favicon-Generator verwandelt ein Quellbild in die Familie von Icon-Dateien, die eine moderne Website benötigt – die Legacy .ico-Datei, die Browser automatisch abrufen, die kleinen PNG-Größen, die in Tabs und Lesezeichen angezeigt werden, das 180-Pixel-Apple-Touch-Icon, das verwendet wird, wenn ein iPhone-Benutzer Ihre Website zu seinem Startbildschirm hinzufügt, und die 192/512-Pixel-Bilder, die Android aus dem Web-Manifest abruft. Dies manuell zu tun bedeutet, einen Bildbearbeitungsprogramm zu öffnen, sieben separate Dateien zu exportieren und einen langen Block von <link>-Tags in Ihrem HTML zu schreiben. Dieser Generator führt die gesamte Pipeline in Ihrem Browser aus: Laden Sie ein Bild hoch, erhalten Sie jede Größe und kopieren Sie das passende HTML- und Manifest-Snippet. Ihr Bild verlässt niemals die Seite.
Laden Sie ein PNG, JPG, WebP oder SVG hoch, das quadratisch und mindestens 512×512 Pixel groß ist. Eine nicht quadratische Quelle wird auf eine quadratische Leinwand letterboxed, sodass das Logo niemals beschnitten wird, aber kleine Details sehen am schärfsten aus, wenn die Quelle bereits quadratisch ist.
Lassen Sie es transparent, wenn Ihr Logo sowohl auf hellem als auch auf dunklem Browser-Chrome gut lesbar ist. Wechseln Sie zu einer einfarbigen Option, wenn Ihr Symbol einen hellen Vordergrund hat, der gegen einen weißen Tab verschwinden würde – die meisten Unternehmens-Tabs sind immer noch sehr hell.
Sehen Sie sich die 16- und 32-Pixel-Vorschauen genau an. Die meisten Logos verlieren bei dieser Größe Details. Wenn das Ergebnis ein Schmiere ist, vereinfachen Sie die Quelle – weniger Farben, dickere Striche, weniger feine Schrift – und laden Sie sie erneut hoch.
Verwenden Sie 'Alle herunterladen', um favicon.ico plus die sechs PNG-Größen zu erhalten. Platzieren Sie sie im Stammverzeichnis Ihrer Website. Das .ico enthält intern 16, 32 und 48 px PNGs, was aktuelle Chrome-, Firefox- und Edge-Browser erwarten.
Kopieren Sie das HTML-Snippet in den <head> jeder Seite. Speichern Sie das site.webmanifest-Snippet neben den Icons, damit Android das richtige Bild für den Startbildschirm anzeigt, wenn jemand Ihre Website hinzufügt.
1. Dekodieren Sie das hochgeladene Bild mit dem nativen Bildlader des Browsers.
2. Zeichnen Sie für jede Zielgröße (16, 32, 48, 180, 192, 512) auf eine quadratische Leinwand.
3. Letterboxen Sie die Quelle, sodass die längere Seite in die Leinwand passt – niemals zuschneiden, niemals dehnen.
4. Kodieren Sie die Leinwand erneut als PNG über canvas.toBlob('image/png').
5. Für favicon.ico, fügen Sie die 16/32/48 PNGs in eine ICONDIR + ICONDIRENTRY-Struktur ein.
6. Verkettung der PNG-Bytes nach den 16-Byte-Verzeichniseinträgen – dies ist ein gültiges Multi-Resolution .ico.Moderne Browser und Apple-Geräte akzeptieren PNG-Bytes, die in einen .ico-Container eingebettet sind – es ist nicht notwendig, das veraltete BMP-mit-AND-Maske-Format zu kodieren, das ursprünglich mit Windows 95 ausgeliefert wurde. Der Container besteht nur aus einem sechs-Byte-Header (reserviert + Typ + Anzahl), einem 16-Byte-Verzeichniseintrag pro enthaltenem Bild (Größe + Farbtiefe + Offset + Länge) und den verketteten PNG-Nutzdaten. Das ist es, was dieses Tool produziert, und es ist das, was Chrome, Firefox, Safari und Edge abrufen, wenn sie /favicon.ico von Ihrem Server anfordern.
Referenz: Wikipedia – ICO-Dateiformat
| Quellbild | Was zu erwarten ist |
|---|---|
Fettes quadratisches Logo, 1024×1024 PNG, transparenter Hintergrund | Klar in jeder Größe. Die 16 und 32 px Vorschauen sind weiterhin deutlich lesbar. Direkt in eine Produktionsseite einfügen. Der ideale Eingang. |
Breites horizontales Wortmarkenlogo, 2000×400 | In ein quadratisches Format mit leeren Bändern oben und unten eingekästelt. Die Wortmarke ist bei 192 und 512 noch lesbar, aber unleserlich bei 16 und 32 – der Text ist zu klein. Zuschneiden auf ein quadratisches Zeichen vor dem Hochladen. |
Fotografisches Logo mit dünnem Farbverlauf-Rahmen | Der Farbverlauf und der Rahmen verschwinden bei 16 und 32 px. Verwenden Sie eine vereinfachte, hochkontrastreiche Version desselben Logos für ikonische Assets. Detailverlust ist ein Quellproblem, kein Exportproblem. |
SVG ohne explizite Breite oder Höhe | Wird in der Standardgröße 300×150 gerendert, die der Browser SVGs ohne eine viewBox-abgeleitete Größe zuweist. Fügen Sie Breite/Höhe-Attribute oder eine viewBox zum Quell-SVG hinzu, bevor Sie es hochladen. SVG-Sonderfall – beheben Sie die Quelle. |
Schneiden Sie das Motiv aus jedem Foto mit KI auf dem Gerät aus – kein Upload erforderlich.
Verkleinern Sie JPG-, PNG- oder WebP-Dateien in Ihrem Browser mit einem interaktiven Qualitätsregler.
Passen Sie Fotos im Browser an, filtern, drehen und zuschneiden — keine Uploads, kein Wasserzeichen.
Erstelle Memes und Screenshot-Collagen mit echten Ebenen — einfügen, ziehen, zuschneiden, beschriften, exportieren.
Zuletzt aktualisiert