Favicon-Generator

Aus jedem Bild, Text oder Emoji ein komplettes Favicon-Paket machen

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

cloud_upload

Dateien hierher ziehen

oder durchsuchen zum Hochladen

Supports PNG, JPG, WebP - a square image works best

In deinem Browser verarbeitet - deine Datei verlässt dieses Gerät nie.

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Eine .ico-Datei ist unter Bildformaten ungewöhnlich: Sie ist ein Container, der mehrere Größen desselben Icons in einer Datei hält. Das Design existiert, weil dasselbe Favicon in völlig verschiedenen Kontexten erscheint – 16 Pixel im Browser-Tab, 32 in der Lesezeichenleiste, 48 in einer Windows-Verknüpfung, größer noch auf einer angehefteten Kachel. Den Browser ein großes Bild herunterskalieren zu lassen, liefert bei 16px matschige Ergebnisse, wo jedes Pixel zählt und Feindetail zu Rauschen wird. Zweckgefertigte Größen zu bündeln lässt jeden Kontext das für ihn gezeichnete nehmen. Die praktische Folge betrifft Design, nicht Tooling: Ein Icon, das bei 16 Pixeln funktioniert, kann nicht dein volles Logo sein. Platz ist für einen Buchstaben, ein einfaches Zeichen oder eine kühne Form – mehr nicht. Dieses Tool startet von dem, was du schon hast – lade ein Logo hoch oder überspringe die Designarbeit und erzeuge ein Icon direkt aus ein paar Buchstaben oder einem Emoji. In beiden Fällen bekommst du mehr als ein nacktes favicon.ico: Der Download ist ein komplettes Paket mit jeder PNG-Größe, die eine moderne Site wirklich referenziert (Apple Touch Icon, Android/PWA-Größen), einer site.webmanifest und dem exakten HTML-Snippet zum Einfügen in deinen <head> – plus Live-Vorschau, wie das Icon im Browser-Tab und auf einem Handy-Home-Screen sitzt, bevor du etwas herunterlädst. Die Erzeugung läuft komplett in deinem Browser.

Ablauf

Erstelle ein Favicon und ein App-Icon-Set

  1. 1Von Vektor zu RasterRendere dein SVG-Logo in Icon-Größe.Öffnen
  2. 2Quadratisch machenIcons müssen perfekt quadratisch sein.Öffnen
  3. 3.ico erzeugenMulti-Resolution-Icon für Browser.Du bist hier
  4. 4Alle anderen GrößenErzeuge das komplette Plattform-Set auf einmal.Öffnen

So verwendest du dieses Tool

  1. Eine Quelle wählenLade ein quadratisches Logo-Bild hoch oder wechsle zu Text (1–3 Buchstaben) oder Emoji, wenn du noch kein Artwork hast.
  2. Die Live-Vorschau prüfenSieh genau, wie das Icon im Browser-Tab und auf einem Handy-Home-Screen wirkt, bevor etwas erzeugt wird.
  3. Die .ico erzeugenWähle, welche Größen gebündelt werden, und erzeuge die Mehrgrößen-Icon-Datei.
  4. Das volle Paket herunterladenHol favicon.ico plus jede Standard-PNG-Größe, eine site.webmanifest und ein fertiges HTML-Snippet in einem .zip.

Warum es nutzen

  • Funktioniert von einem hochgeladenen Bild oder erzeugt ein Icon direkt aus Text oder Emoji, wenn du noch kein Logo hast.
  • Zeigt eine Live-Vorschau von Browser-Tab und Handy-Home-Screen, bevor du einen Download festlegst.
  • Bündelt mehrere Größen in einer .ico, damit jeder Kontext ein dafür gezeichnetes Icon nutzt statt einer herunterskalierten Schätzung.
  • Der volle Paket-Download enthält Apple Touch Icon, Android/PWA-Größen, site.webmanifest und das HTML-Snippet – nicht nur eine nackte .ico.
  • Läuft in deinem Browser – unveröffentlichtes Branding wird nie hochgeladen.
  • Kein Konto und kein Wasserzeichen.

Häufige Anwendungen

  • Ein Favicon zu einer neuen Website ohne Logo hinzufügen – einfach Initialen tippen oder ein Emoji wählen.
  • Ein unscharfes Favicon ersetzen, das ein herunterskaliertes Logo war.
  • Das komplette Icon-Set (Touch Icon, PWA-Icons, Manifest) für ein neues Projekt in einem Download bekommen.
  • Ein Favicon aus einem Logo erzeugen, das nur als Rasterbild vorliegt.
  • Das Site-Icon im Rahmen eines Rebrands auffrischen.

Tipps für bessere Ergebnisse

  • Vereinfache das Design. Ein einzelner Buchstabe, Initialen oder ein kühnes Emoji liest sich bei 16 Pixeln; ein detailliertes Logo mit Text nicht.
  • Nutze die Tab- und Home-Screen-Vorschau, um das Icon in realistischer Größe zu beurteilen, nicht reingezoomt – Icons, die bei 256px fein wirken, scheitern routinemäßig bei 16.
  • Lade das volle Paket, nicht nur die .ico – moderne Browser und Handys suchen Apple Touch Icon und Manifest-Icons unter exaktem Dateinamen.
  • Hoher Kontrast überlebt Skalierung. Dünne Linien und subtile Verläufe verschwinden in kleinen Größen.
  • Setze das Site-Name-Feld vor dem Paket-Download – es füllt name und short_name in site.webmanifest automatisch.

Fehler, die du vermeiden solltest

  • Ein voll detailliertes Logo nutzen, das in Tab-Größe unlesbar wird.
  • Nur favicon.ico herunterladen und Apple Touch Icon / Manifest-Icons überspringen, die moderne Geräte wirklich anfragen.
  • Von einem kleinen Quellbild starten und kein Detail für die größeren Größen haben.
  • Ein nicht quadratisches Bild nutzen und einen ungeschickten Crop bekommen.
  • Das Ergebnis nur in großer Vorschau beurteilen, wo jedes Icon fein wirkt.

Häufig gestellte Fragen

Ja – wechsle zum Text- oder Emoji-Tab. Der Textmodus rendert 1–3 Buchstaben auf einem farbigen Hintergrund, den du wählst; der Emoji-Modus nutzt jedes Emoji, das du einfügst, mit optionalem Hintergrund. Beides gilt als echte Quellbild für jede Download-Option inklusive vollem Paket.

favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180), android-chrome-192x192.png, android-chrome-512x512.png, eine site.webmanifest und eine Textdatei mit dem passenden HTML-Snippet – das komplette Set, das eine echte Site referenziert, nicht nur die eine .ico-Datei.

Moderne Browser und Handys suchen spezifische Dateinamen jenseits von favicon.ico: apple-touch-icon.png für „Zum Home-Bildschirm“ auf iOS und die in site.webmanifest gelisteten Größen für Android und installierbare Web-Apps. Nur favicon.ico zu liefern heißt, diese Flächen fallen auf ein generisches Icon zurück.

Starte mit einem quadratischen Bild, ideal mindestens 256x256 Pixel, damit der Generator genug Detail hat, um scharfe Icons in allen kleineren, im Paket gebündelten Größen zu erzeugen.

Favicons sollen quadratisch sein – ein nicht quadratisches Quellbild wird typischerweise zugeschnitten oder aufgefüllt, um vor der Icon-Erzeugung auf eine quadratische Canvas zu passen.

Entpacke das volle Paket in dein Site-Root (derselbe Ordner wie index.html) und füge das HTML-Snippet in den <head> deiner Seite ein. Browser fragen favicon.ico auch ohne Link-Tag automatisch vom Root an.

Fast immer, weil das Design für 16 Pixel zu detailliert ist oder das Quellbild zu klein war. Ein Favicon hat Platz für einen Buchstaben, Initialen oder ein einfaches Zeichen – ein volles Logo mit Text überlebt diese Größe nicht, deshalb nutzen bekannte Marken ein vereinfachtes Symbol.

Nein. Das Icon – ob aus hochgeladenem Bild, getipptem Text oder Emoji – wird komplett in deinem Browser erzeugt, unveröffentlichtes Branding bleibt auf deinem Gerät.

Ja. Der Favicon-Generator ist für die normale Nutzung kostenlos, du brauchst kein Konto, und ToolBox fügt deinem Ergebnis kein Wasserzeichen hinzu.

Andere suchen auch nach

  • favicon generator kostenlos
  • favicon aus text online
  • emoji favicon generator
  • apple touch icon generator
  • site.webmanifest generator
  • favicon aus logo erstellen
  • favicon ico generator
  • warum ist mein favicon unscharf

Related guides