Favicon Generator

Ein Favicon ist das winzige Icon, das im Browser-Tab sitzt, neben deiner Website in Lesezeichen und Verlauf erscheint und neben den Suchergebnissen auftaucht. Es ist klein, aber es gehört zu den sichtbarsten Teilen deiner Marke. Jedes Mal, wenn jemand einen Tab mit deiner Seite öffnet, ist dieses kleine Quadrat das Erste, was er wahrnimmt – deshalb ist ein gestochen scharfes, wiedererkennbares Favicon weit wichtiger, als seine Größe vermuten lässt. Für das perfekte Ergebnis brauchst du mit diesem Tool nur ein gutes Bild und ein paar Klicks.

Dabei übersehen die meisten eine Sache: Ein einzelnes Favicon reicht selten aus. Desktop-Browser fragen Favicons in 16 und 32 Pixeln an, Android-Geräte und Progressive Web Apps verwenden 192 und 512, der iOS-Startbildschirm möchte ein großes Touch-Icon, und App-Stores verlangen Grafik in 1024 Pixeln. Ein Logo von Hand in all diese Größen zu bringen bedeutet, Designsoftware zu öffnen, Leinwandgrößen anzupassen und Datei um Datei zu exportieren. Dieser Favicon-Generator übernimmt das alles für dich in wenigen Sekunden und verwandelt ein hochgeladenes Bild in acht korrekt dimensionierte PNG-Icons.

Wenn du dein Bild hochlädst, erzeugt der Generator Icons in 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 und 1024x1024 Pixeln. Diese Auswahl deckt fast jede Situation ab, die dir begegnen wird: das kleine Tab-Icon, die mittleren Größen, die Browser und Betriebssysteme anfragen, die großen Icons für mobile Startbildschirme und Web-App-Manifeste sowie die vollformatige Grafik, die App-Stores verlangen. Du prüfst jedes Ergebnis in einem Vorschauraster und lädst nur die Größen herunter, die du wirklich brauchst.

Der einfachste Weg zu guten Ergebnissen ist, mit einem quadratischen Bild zu beginnen. Icons sind immer quadratisch, und das Tool skaliert deine Quelle so, dass sie eine quadratische Leinwand ausfüllt. Ein nicht-quadratisches Bild wird also gestreckt. Eine transparente PNG-Datei mit 512x512 oder größer ist der Idealpunkt. Wenn dein Logo zum Beispiel tausend Pixel breit, aber nur vierhundert hoch ist, schneide es vor dem Hochladen auf ein Quadrat zu, anstatt es vom Generator verzerren zu lassen.

Ein großes Logo auf 16 Pixel herunterzuskalieren ist wirklich schwierig. Text verschwindet, dünne Linien verschwimmen, und feine Verläufe werden zu Rauschen. Der Generator verwendet die hochwertige Bildglättung des Browsers, um die Kanten bei jeder Größe so sauber wie möglich zu halten, aber jedes Tool stößt an Grenzen, wenn ein Design überladen ist. Einfache, kräftige Zeichen mit starkem Kontrast überleben den Weg bis auf 16 Pixel; kunstvolle Grafiken selten.

Datenschutz ist einer der Hauptgründe, warum Menschen diesen Ansatz bevorzugen. Die gesamte Umwandlung passiert in deinem Browser über die HTML5-Canvas-API. Dein Bild wird niemals hochgeladen, gespeichert oder irgendwohin gesendet – das macht das Tool zur passenden Wahl für unveröffentlichte Produkte, Kundenlogos und alles, was du lieber nicht auf einem Server eines Drittanbieters sehen willst. Schließe den Tab, wenn du fertig bist, und jede Spur deines Uploads ist verschwunden.

Es ist auch gut, klar zu sagen, was das Tool nicht tut. Es erzeugt PNG-Icons, was praktisch jede moderne Plattform akzeptiert. Es erstellt keine .ico-Datei, bündelt nichts in ein ZIP-Archiv und generiert kein Web-App-Manifest für dich. In der Praxis ist das selten ein Problem: Moderne Browser verwenden seit Jahren problemlos PNG-Favicons, und das .ico-Format ist größtenteils ein Relikt aus alten Zeiten. Lade die gewünschten Größen herunter und füge deiner Seite ein paar Link-Tags hinzu.

Das Einbinden der Icons in eine Website ist unkompliziert. In den Head deiner Seite fügst du ein Link-Tag ein, das auf dein Haupt-Favicon verweist, zum Beispiel ein 32x32-PNG, dazu einen apple-touch-icon-Link für iOS und, falls du eine Progressive Web App betreibst, 192x192- und 512x512-Einträge in deiner manifest.json-Datei. Lade die Dateien auf deinen Server hoch, verweise mit den Tags darauf, und das Icon erscheint in Tabs, Lesezeichen und auf Startbildschirmen.

Denk an die Alltagssituationen, in denen das vorkommt. Ein Blogger möchte ein ordentliches Website-Icon für WordPress und will nicht Photoshop öffnen. Ein Entwickler liefert eine Web-App aus und braucht ein Favicon plus PWA-Icons im Projektordner. Ein Startup bereitet einen App-Store-Eintrag vor und benötigt ein quadratisches 1024x1024-Icon, das auch als kleines Launcher-Icon funktioniert. Ein Student baut ein Projekt für den Unterricht und möchte, dass es fertig aussieht. Alle können dafür in unter einer Minute dasselbe Tool nutzen.

Designentscheidungen zählen hier mehr als die Werkzeuge. Halte das Favicon nahe an der einfachsten Form deines Logos, verwende deine Markenfarben und vermeide Text, der nur in großen Größen Sinn ergibt. Wenn dein Icon einen transparenten Hintergrund hat, denke daran, dass Browser-Tabs in hellen und dunklen Themes kommen – teste es also gegen beide. Wenn es einen festen Hintergrund hat, sieht es überall ohne zusätzlichen Aufwand konsistent aus.

Noch ein praktischer Hinweis: Browser cachen Favicons sehr aggressiv. Nachdem du dein Website-Icon aktualisiert hast, siehst du vielleicht noch eine Weile das alte. Ein hartes Neuladen oder ein kurzer Check in einem Inkognito-Fenster bestätigt, dass das neue Icon live ist. Auch eine kleine Datei hilft, denn das Favicon wird bei jedem Seitenaufruf angefordert und gehört oft zu den ersten geladenen Dateien.

Du brauchst weder Designerfahrung noch installierte Software, um dieses Tool zu nutzen. Es läuft vollständig im Browser, funktioniert auf Windows, macOS, Linux und sogar am Handy, und es gibt kein Konto anzulegen und nichts zu bezahlen. Lade so viele Bilder hoch, wie du möchtest, so oft du möchtest, und lade nur die Größen herunter, die du brauchst. Es ist eines dieser kleinen Werkzeuge, die dich leise vor einer erstaunlich mühsamen Aufgabe bewahren.