Ein ordentliches Favicon-Set besteht aus mehr als einer Datei: Browser wollen eine .ico in mehreren Größen, iOS will ein 180-px-apple-touch-icon, Android will PNGs in 192 und 512 px plus ein Web-Manifest. Dieses Tool rendert sie alle aus einem einzigen Bild und packt sie in ein ZIP, zusammen mit den genauen HTML-Tags zum Einfügen in Ihren <head>.
Die Vorschau zeigt Ihr Symbol in echten 16, 32 und 48 px, sodass Sie prüfen können, ob es auch in winzigen Größen erkennbar bleibt, bevor Sie es ausliefern.
So geht's
- Logo hinzufügenQuadratische Bilder funktionieren am besten; andere werden zentriert zugeschnitten.
- Kleine Größen prüfenDie 16-px-Vorschau ist das, was die meisten Nutzer in einem Tab tatsächlich sehen.
- ZIP herunterladenfavicon.ico, sechs PNGs, site.webmanifest und eine html-snippet.txt zum Einfügen.
Ein Bild rein, ein kompletter Favicon-Satz raus
Legen Sie ein einzelnes Logo oder Symbol ab, und dieser Generator baut den vollständigen Satz, den eine moderne Website braucht: eine favicon.ico in mehreren Größen mit 16-, 32- und 48-Pixel-Versionen, eigenständige PNGs mit 16, 32, 48, 180 für das Apple-Touch-Icon sowie 192 und 512 für Android- und PWA-Installationen, dazu eine site.webmanifest. Alles kommt als ein ZIP herunter, sodass Sie es direkt ins Stammverzeichnis Ihres Projekts legen können.
Sie erhalten außerdem ein einsatzbereites HTML-Head-Snippet mit den bereits korrekt verdrahteten link- und meta-Tags. Kopieren Sie es in Ihr Template, laden Sie die Dateien hoch, und das Favicon erscheint in Browser-Tabs, Lesezeichen und Startbildschirm-Verknüpfungen, ohne dass Sie Markup von Hand schreiben.
Scharfe Symbole in jeder Größe
Favicons sind gnadenlos klein, daher rendert der Generator maßstabsgetreue Vorschauen mit 16, 32 und 48 Pixeln, genau so, wie ein Browser-Tab sie anzeigt. So erwischen Sie ein Logo, das bei 16px zu Brei wird, bevor Sie es ausliefern. Ist Ihr Quellbild nicht quadratisch, schneidet das Tool es mittig zu, damit das Symbol ausgewogen statt gestaucht bleibt.
Der gesamte Vorgang läuft im Browser aus Ihrem Originalbild, was bedeutet, dass Sie Favicon-PNGs und eine ICO aus einem hochauflösenden Logo erzeugen können, ohne Upload oder Konto.
Wofür man es nutzt
Eine neue Website starten — Erzeugen Sie favicon.ico und jede PNG-Größe in einem Durchgang, damit Tabs und Lesezeichen ab dem ersten Tag fertig aussehen.
Ein PWA-Installationssymbol hinzufügen — Exportieren Sie die 192- und 512-PNGs samt einer site.webmanifest, damit Ihre App mit einem richtigen Startbildschirm-Symbol installiert wird.
Apple-Touch-Icon — Erzeugen Sie das 180x180 apple-touch-icon, damit iOS-Lesezeichen und Startbildschirme eine scharfe Kachel zeigen.
Eine bestehende Website neu branden — Schleusen Sie ein neues Logo durch den Generator und ersetzen Sie den gesamten Symbolsatz auf einmal.
Übergabe an den Kunden — Übergeben Sie ein einziges ZIP aus ICO, PNGs, Manifest und dem Head-Snippet, sodass der Entwickler es nur einlegen muss.
Lesbarkeit in kleiner Größe prüfen — Nutzen Sie die maßstabsgetreue 16px-Vorschau, um zu bestätigen, dass ein detailreiches Logo noch als Symbol liest.
Nicht quadratisches Logo — Speisen Sie eine breite Wortmarke ein und lassen Sie den mittigen Zuschnitt daraus ein ausgewogenes quadratisches Favicon machen.
Statische Website oder Framework-Projekt — Kopieren Sie die generierten Head-Tags in Ihr Next-, Astro- oder einfaches HTML-Template und liefern Sie aus.
Erzeugen Sie einen kompletten Favicon-Satz aus einem Bild – im Browser, in einem Durchgang
Ein Favicon klingt nach einer einzelnen 16×16-Pixel-Nebensache, und jahrelang war es das auch. Moderne Browser und Plattformen haben es still in eine kleine Produktion verwandelt. Um es heute richtig zu machen, brauchen Sie eine favicon.ico, eine Reihe von PNGs von 16 px bis 512 px, ein Apple-Touch-Icon für iOS-Startbildschirme, eine site.webmanifest, damit die Seite als App installiert werden kann, und den richtigen Block aus <link>- und <meta>-Tags in Ihrem HTML-<head>. Verpassen Sie eine Größe, sieht Ihr Tab-Symbol auf einem Retina-Bildschirm unscharf aus; verpassen Sie das Manifest, greift das „Zum Startbildschirm hinzufügen"-Symbol auf einen Screenshot zurück; machen Sie den Tag-Block falsch, ignorieren manche Plattformen das Ganze.
Das ist eine Menge fummeliger Ausgabe für eine Aufgabe, die man einmal pro Projekt erledigt und deren Details man danach vergisst. IMG.DIY nimmt ein einzelnes Ausgangsbild und erzeugt den kompletten Satz – die .ico, jede PNG-Größe, das Web-Manifest und einen HTML-Schnipsel zum Kopieren und Einfügen –, wobei die Skalierung vollständig in Ihrem Browser mit Canvas erfolgt. Ihr Logo wird lokal eingelesen und auf dem Gerät in jede Zielgröße gerendert; nichts wird hochgeladen. Für ein Markenzeichen oder das Logo eines unveröffentlichten Produkts, das Sie vor dem Launch lieber nicht auf einen Drittserver stellen möchten, ist diese lokale Garantie es wert – und sie kostet nichts.
Weil die gesamte Verarbeitung clientseitig läuft, funktioniert sie auch offline, sobald die PWA zwischengespeichert ist, sodass Sie Icons auf einem abgeschotteten Arbeitsrechner oder ohne Verbindung neu erzeugen können. Kostenlos, kein Konto, kein in Ihre Icons eingebranntes Wasserzeichen.
Was den Unterschied macht
- Der ganze Satz, nicht nur eine .ico. ICO, PNGs von 16 bis 512, Apple-Touch-Icon und
site.webmanifestin einem Download. - HTML zum Kopieren und Einfügen inklusive. Der exakte
<link>/<meta>-Block zum Einfügen in Ihren<head>, damit die Icons sich tatsächlich über Browser hinweg registrieren. - Nichts hochgeladen. Ihr Logo wird lokal skaliert – nützlich, wenn das Zeichen vertraulich oder vor dem Launch ist.
- Ein Durchgang, kein Assistent. Ein Bild einspeisen, alles erhalten; kein mehrstufiger Ablauf, der nach Plattformentscheidungen fragt, die Sie dann recherchieren müssen.
- Offline und sauber. Zwischengespeicherte PWA, keine Anmeldung, kein Wasserzeichen auf einem erzeugten Icon.
IMG.DIY im Vergleich zu anderen Favicon-Generatoren
| Aspekt | favicon.io | realfavicongenerator.net | Manuell (Design-App + Code) | IMG.DIY |
|---|---|---|---|---|
| Dateien hochgeladen | Ja, auf deren Server | Ja, auf deren Server | Nein, lokal | Nein, bleibt im Browser |
| Vollständiger Satz (.ico + PNGs + Manifest) | Ja | Ja, sehr gründlich | Sie setzen ihn zusammen | Ja |
| HTML-Schnipsel bereitgestellt | Ja | Ja, detailliert | Sie schreiben ihn | Ja |
| Schritte bis zum Ergebnis | Wenige | Mehr (viele Optionen) | Viele | Ein Durchgang |
| Funktioniert offline | Nein | Nein | Ja | Ja, nach dem ersten Besuch |
| Preis | Kostenlos | Kostenlose Stufe; kostenpflichtige Optionen | App-Kosten + Ihre Zeit | Kostenlos |
| Konto erforderlich | Nein | Nein | Nein | Nein |
Ehrlich zur Konkurrenz: realfavicongenerator ist exzellent und wirklich gründlicher – er zeigt eine Vorschau Ihres Icons auf echten Plattformen, behandelt Sonderfälle wie Safari-Pinned-Tab-Masken und Theming und lässt Sie das Erscheinungsbild pro Plattform feinjustieren. Wenn Sie diese Kontrolltiefe wollen und das Hochladen Ihres Bildes nicht stört, ist er eine gute Wahl. favicon.io ist schnell und einfach und erzeugt ebenfalls einen soliden Satz. Der Unterschied von IMG.DIY ist die Kombination aus vollständiger Ausgabe mit keinem Upload und einem Durchgang: Sie erhalten dieselben praktischen Ergebnisse – ico, PNGs, Manifest und das HTML zum Einbinden –, ohne dass Ihr Logo den Browser verlässt und ohne einen Konfigurationsassistenten zu durchlaufen. Für „Ich habe ein Logo, gib mir alles zum Einfügen, und sende meine Datei nirgendwohin" passt genau das.
Warum IMG.DIY
Komplettes Set
ICO + 16/32/48/180/192/512 PNGs + Manifest.
HTML zum Kopieren
Die genauen Link-Tags als Textdatei enthalten.
Vorschau in Echtgröße
Sehen Sie das Symbol zuerst in echten 16/32/48 px.
Privat
Ihr Logo verlässt nie den Browser.