So verwenden Sie Favicon-Generator
- 1
Quelle wählen
Laden Sie ein Logo oder Bild mit bis zu 25 MB hoch, geben Sie ein bis drei Buchstaben in einer von 11 Schriftarten ein oder wählen Sie ein Emoji.
- 2
Icon gestalten
Wählen Sie eine von 12 Formoptionen – von keiner oder einem schlichten Quadrat bis zu Keks oder Kleeblatt –, dazu eine Hintergrundfarbe oder Transparenz, Innenabstand und Eckenradius.
- 3
Alle Größen prüfen
Sehen Sie sich das Icon in Größen von 16 bis 192 Pixeln an, in hellen und dunklen Browser-Tabs sowie innerhalb des maskierbaren Sicherheitsbereichs von Android.
- 4
Herunterladen und einbauen
Speichern Sie favicon.zip, entpacken Sie die Datei in den Ordner Ihrer Website und fügen Sie das erzeugte HTML in den Head der Seite ein.
Limits und Pro
Unbegrenzt viele Icon-Sets aus Text oder Emoji; Bildquellen bis 25 MB, jeweils eine auf einmal. Jedes Set besteht aus 10 Dateien.
Mit Pro steigt das Upload-Limit für Logo-Bilder auf 4 GB. Pro ansehen
Über Favicon-Generator
Der Favicon-Generator erstellt aus einem einzigen Entwurf alle Icons, die eine moderne Website braucht. Die ZIP-Datei enthält eine favicon.ico mit Bildern in 16, 32 und 48 Pixeln, separate PNGs in 16, 32 und 48 Pixeln, ein apple-touch-icon mit 180 Pixeln und deckendem Hintergrund (iOS fügt seine eigenen runden Ecken hinzu), Android-Chrome-Icons mit 192 und 512 Pixeln, ein maskierbares Icon mit 512 Pixeln, dessen Inhalt im Sicherheitsbereich von 80 % bleibt, eine site.webmanifest mit App-Name, Kurzname und Designfarbe sowie ein fertiges HTML-Snippet mit den Link- und theme-color-Tags. Alle PNGs werden verlustfrei optimiert.
Hochgeladene Bilder werden mit einem Lanczos-Filter verkleinert, sodass auch ein großes Logo bei 16 Pixeln scharf bleibt; ein SVG-Logo wird zuerst mit 1.024 Pixeln gezeichnet. Text-Icons werden mit der gewählten Schriftart dargestellt, Emojis mit der Schrift Noto Color Emoji, damit das Ergebnis auf jedem System gleich aussieht. Liegen Ihre Icons nicht im Stammverzeichnis der Website, geben Sie den Ordner ein, zum Beispiel /icons/, und die Pfade in Snippet und Manifest passen sich an.
Typische Einsatzfälle sind eine neue Website oder ein Blog, eine Web-App, die Menschen auf dem Startbildschirm installieren, ein internes Dashboard, das zwischen Browser-Tabs auffallen soll, oder ein schnelles Platzhalter-Icon für ein Nebenprojekt. Feine Details und lange Wörter gehen bei 16 Pixeln verloren, daher funktionieren einfache Formen und ein oder zwei Buchstaben am besten. Das Tool hostet die Dateien nicht und ändert Ihre Website nicht; das Hochladen übernehmen Sie selbst.
Datenschutz
Die Icons werden in diesem Tab auf Canvas-Elementen gezeichnet und vom WebAssembly-PNG-Codec der Website in einem Web Worker kodiert, sodass ein hochgeladenes Logo Ihr Gerät nie verlässt. Wenn Sie eine der Google-Schriftarten oder die Quelle Emoji wählen, lädt der Browser diese Schrift einmalig von Google Fonts, sobald Sie mit dem Bearbeiten beginnen; die Anfrage nennt die Schrift, nie Ihren Text, und beim Laden der Seite wird nichts abgerufen.
Funktionen
Komplettes Icon-Set
ICO, PNG-Größen, Apple Touch Icon, Android- und maskierbare Icons und ein Web-Manifest in einer ZIP-Datei.
Bild, Text oder Emoji
Verwenden Sie Ihr Logo, ein bis drei Buchstaben in 11 Schriftarten oder ein beliebiges Emoji als Quelle.
Ausdrucksstarke Formen
Quadrat, Abgerundet, Kreis und acht Material-Formen, mit Reglern für Innenabstand und Eckenradius.
HTML zum Einfügen
Link-Tags, Designfarbe und Manifest-Pfade werden passend zum gewählten Ordner erzeugt.