JNRT Pixel
|
728 × 90 — Leaderboard
Cookie-Banner ausstehend
Start / Tools / Favicon Generator

Favicon Generator

Logo hochladen und alle nötigen Favicon-Größen auf einmal generieren: 16, 32, 48, 64, 96, 128, 180 (Apple Touch Icon), 192 und 512 px. ZIP-Download inklusive fertigem HTML-Code.

Logo / Icon ablegen oder klicken
Quadratisches Bild empfohlen · min. 512×512 px
Hintergrund & Anleitung2 Min Lesezeit

Wissenswertes zu diesem Tool

Kurz erklärtFavicon-Generator — alle gängigen Größen plus ICO-Container, lokal im Browser.

Das Favicon ist das kleine Symbol, das in jedem Browser-Tab links neben dem Seitentitel erscheint — und gleichzeitig das vielleicht meist-unterschätzte Branding-Element einer Website. Es taucht in Lesezeichen-Listen auf, in History-Listen, in Tab-Wechslern, manchmal in Mobile-Browser-Speed-Dials. Wer es ignoriert, signalisiert „Amateur" — wer es richtig macht, baut Wiedererkennungswert auf. Mit diesem Werkzeug generierst du alle gängigen Favicon-Größen aus einem einzigen Quell-Bild — lokal im Browser, ohne Upload. Welche Größen sind 2026 relevant? Das klassische ICO-Format (Multi-Resolution-Container) enthält traditionell 16×16, 32×32 und 48×48 Pixel. Moderne Browser bevorzugen jedoch separate PNG-Dateien in mehreren Größen, die per HTML-Link-Tags referenziert werden: 16×16 (Tab-Icon), 32×32 (Standard-Browser-Icon), 48×48 (Windows-Site-Tile), 64×64 (Hochauflösungs-Tab), 96×96 (Android-Chrome-Default), 152×152 (iOS-iPad-Touch), 167×167 (iOS-iPad-Pro), 180×180 (iOS-iPhone-Touch, der wichtigste Standard heute), 192×192 (Android-Chrome-Manifest), 512×512 (PWA-Manifest, Splash-Screens). Empfohlene HTML-Einbindung. Der Generator gibt dir am Ende ein HTML-Snippet, das alle Größen referenziert. Es sieht typischerweise so aus: "<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">", plus äquivalente Einträge für alle anderen Größen, plus ein klassischer "<link rel="shortcut icon" href="/favicon.ico">" für maximale Kompatibilität. Design-Tipps für Favicon-Quellen. Erstens: Quadratisch. Wer ein längliches Logo hat, sollte ein quadratisches Symbol-Element extrahieren (Buchstabe, Icon, Initial) statt das volle Wortmarken-Logo zu nehmen. Zweitens: Hoher Kontrast. Die 16×16-Variante wird in winzigen Pixeln gerendert; feine Details gehen verloren. Setze ein klares Hauptmotiv mit Helligkeitskontrast zwischen Vorder- und Hintergrund. Drittens: Einfach. Ein einzelner Buchstabe oder eine geometrische Form funktioniert in der Regel besser als ein detailreicher Illustration. Beispiele guter Favicons: das blaue „f" von Facebook, das schwarz-weiße „G" von Google, die orange Pyramide von HackerNews. ICO-Container. Das ".ico"-Format ist ein Windows-spezifischer Container, der mehrere Bilder unterschiedlicher Größe in einer Datei zusammenpackt. Es war jahrelang Standard, ist aber seit etwa 2018 durch separate PNG-Dateien abgelöst. Der Generator erzeugt trotzdem eine "favicon.ico"-Datei, weil manche ältere Browser nur den klassischen Pfad "/favicon.ico" automatisch laden. Adaptive Icons für Android. Wenn du nicht nur Favicons brauchst, sondern auch native App-Icons für Android und iOS, nutze stattdessen den PWA Generator — er kombiniert Favicon-Erzeugung mit kompletten Plattform-Bundles. Datenschutz. Lokal im Browser. Keine Datei wird hochgeladen. Weiterführend: Favicon erstellen — Anleitung, PWA App-Icons Geschichte.',