Favicon-Generator Online
Erstelle dein Favicon in allen erforderlichen Größen kostenlos direkt im Browser.
.jpg, .png, .webp · bis zu 50 MB
Warum dieses Tool nutzen
Das richtige Favicon für jedes Gerät und jeden Browser
Alle Formate
Erstellt .ico, .png und alle Größen für iOS, Android und PWA.
100% privat
Die Verarbeitung erfolgt in deinem Browser. Dein Logo verlässt niemals dein Gerät.
Alle Größen
16×16, 32×32, 180×180, 192×192 und 512×512. Produktionsfertig.
Sofortige Verarbeitung
Sofortiges Ergebnis. Keine Warteschlangen, keine Anmeldung, keine Beschränkungen.
So funktioniert es
Drei Schritte, kein Aufwand
Bild oder Logo hochladen
Ziehe eine quadratische PNG-, SVG-, JPG- oder WebP-Datei in den Bereich oder wähle sie aus. Empfohlen: mindestens 512×512 px.
Generierte Größen in der Vorschau prüfen
Erhalte automatisch 16×16, 32×32, 180×180 (Apple Touch Icon), 192×192 und 512×512 px.
Favicon-Paket herunterladen
Lade alle generierten Größen herunter, bereit zum Einbinden in dein Web-Projekt.
FAQ
Noch Fragen?
Ein vollständiges modernes Favicon-Set benötigt: 16×16 px (Browser-Tab unter Windows/Linux), 32×32 px (Tab unter macOS und Lesezeichen), 180×180 px (Apple Touch Icon, beim Speichern auf dem iOS-Startbildschirm), 192×192 px (Android Chrome, Zum Startbildschirm hinzufügen) und 512×512 px (PWA-Ladebildschirm unter Android). Die Datei favicon.ico im Stammverzeichnis kann mehrere eingebettete Auflösungen (16, 32, 48 px) in einer Datei enthalten. Für moderne Browser reicht eine einzelne 32×32 px große PNG-Datei mit HTML-Verweis aus. Für maximale Kompatibilität mit Apple-Geräten, Lesezeichen-Apps und PWA ist jedoch das vollständige Set notwendig.
Das .ico-Format ist das ursprüngliche Favicon-Format, eingeführt mit Internet Explorer 5 im Jahr 1999. Es kann mehrere Auflösungen in einer Datei enthalten und wird universell unterstützt, auch von sehr alten Browsern. Das .png-Format ist einfacher: eine Datei pro Größe, native Unterstützung in allen modernen Browsern und bessere Komprimierungsqualität als .ico bei hohen Auflösungen. Das .svg-Format als Favicon wird von modernen Chrome-, Firefox- und Edge-Versionen unterstützt, aber nicht von Safari oder iOS. Der Vorteil von SVG ist die perfekte Skalierung auf jede Größe und die Möglichkeit, das Erscheinungsbild per CSS-Media-Queries an den System-Dark-Mode anzupassen (@media (prefers-color-scheme: dark)). Aktuelle Empfehlung: .ico für Basiskompatibilität, .png für spezifische Auflösungen und optional .svg für moderne Browser.
Das Apple Touch Icon ist das Symbol, das iOS und macOS Safari verwenden, wenn ein Nutzer eine Website auf dem iPhone/iPad-Startbildschirm speichert oder zum Mac-Dock hinzufügt. Im Gegensatz zu normalen Favicons (die iOS für diesen Zweck ignoriert) muss das Apple Touch Icon eine 180×180 px große PNG-Datei (für Retina) ohne Transparenz sein (iOS fügt automatisch abgerundete Ecken hinzu), deklariert im HTML als: link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png. Ist kein Apple Touch Icon angegeben, erstellt iOS automatisch einen Screenshot der Seite als Symbol, mit sehr schlechtem visuellem Ergebnis.
Die korrekte Methode, moderne Favicons im HTML-Head zu deklarieren, ist: link rel=icon type=image/x-icon href=/favicon.ico für Basiskompatibilität, link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png für moderne Browser, link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png für iOS, und link rel=manifest href=/site.webmanifest für PWA. Die Datei site.webmanifest ist ein JSON, das die 192×192 und 512×512 Icons deklariert. Moderne Browser bevorzugen das Manifest gegenüber einzelnen Link-Tags, weshalb das Manifest für PWA besonders wichtig ist.
favicon.ico ist seit 1999 der De-facto-Standard, der von allen Browsern auch ohne HTML-Tag interpretiert wird (Browser suchen automatisch nach /favicon.ico im Stammverzeichnis). Das Web-App-Manifest (manifest.json oder site.webmanifest) ist der moderne Standard für PWA (Progressive Web Apps), eingeführt mit dem W3C-Web-App-Manifest-Standard 2013. Neben Icons deklariert das Manifest Name, Designfarben, Anzeigemodus und weitere App-Eigenschaften. Für eine normale Website ohne PWA-Funktionalität reichen favicon.ico + PNG + Apple Touch Icon aus. Für eine vollständige PWA mit Installation auf dem Startbildschirm ist das Manifest unverzichtbar.
Favicons: Geschichte, Webstandards und Browser-Tab-Branding
Das Favicon ist eines der kleinsten und bekanntesten Elemente der visuellen Identität einer Website. Seine Geschichte beginnt im März 1999, als Microsoft Internet Explorer 5 die Unterstützung für favicon.ico als Teil der Favoriten-Funktion einführte: Beim Speichern einer Website rief IE5 /favicon.ico ab, um das Symbol neben dem Lesezeichen anzuzeigen. Der Name Favicon kommt von Favorites Icon. Der Standard wurde in RFC 2616 und W3C im Jahr 2000 mit dem Tag link rel=shortcut icon formalisiert. Heute, mehr als 25 Jahre später, hat sich das Favicon von einer einfachen 16×16-Pixel-ICO-Datei zu einem Ökosystem aus Icons für Browser-Tabs, Lesezeichen, mobile Startbildschirme und App-Ladebildschirme entwickelt.
Das ICO-Format ist technisch gesehen ein Bild-Container, der mehrere Auflösungen und Farbtiefen in einer einzigen Datei enthalten kann. Es wurde ursprünglich von Microsoft für Windows-Desktop-Icons entwickelt und für das Web adaptiert. Eine technische Besonderheit: Eine .ico-Datei kann seit Windows Vista (2007) komprimierte PNG-Bilder innerhalb des ICO-Containers enthalten, was die Dateigröße erheblich reduziert. SVG-Favicons, unterstützt ab Chrome 80+ und Firefox 41+, haben einen einzigartigen Vorteil: Sie können CSS-Media-Queries nutzen, um sich automatisch an den System-Dark-Mode anzupassen. Das erlaubt ein schwarzes Favicon auf weißem Grund im hellen Modus und ein weißes auf dunklem Grund im dunklen Modus, alles in einer einzigen Vektordatei mit wenigen Kilobyte.
Im Kontext von Googles Core Web Vitals hat das Favicon eine oft übersehene Performance-Auswirkung. Der Browser lädt das Favicon in einer separaten Anfrage beim Seitenaufruf, und wenn die Datei favicon.ico nicht existiert, antwortet der Server mit einem 404, der möglicherweise eine mehrere Kilobyte große HTML-Fehlerseite enthält. Für Websites mit Millionen von Besuchen kann dieser wiederholte 404-Fehler eine erhebliche Menge unnötigen Datenverkehrs erzeugen. Die Lösung ist, immer eine favicon.ico im Stammverzeichnis bereitzuhalten, selbst wenn es sich nur um eine minimale 16×16-px-Datei handelt, um diese 404-Fehler bei jedem Besuch zu vermeiden.