Lade ein beliebiges Bild hoch und erhalte ein komplettes Favicon-Paket: ein mehrgrößiges favicon.ico, PNG-Icons in Standardgrößen für Android und PWA, ein apple-touch-icon für iOS-Homescreens sowie eine site.webmanifest-Datei. Ein README erklärt genau, wie du sie in dein HTML einbindest. Alles wird in einer ZIP-Datei gebündelt, bereit für dein Website-Stammverzeichnis. Die Verarbeitung läuft in deinem Browser — dein Logo verlässt nie dein Gerät.
Dateien hier ablegen
oder zum Hochladen durchsuchen
Bis zu 10.0 MB pro Datei
Lade dein Logo oder Icon hoch
Ziehe ein quadratisches Bild hinein (PNG empfohlen) für beste Ergebnisse. Quadratische Ausgangsbilder erzeugen die saubersten Favicons. Nicht-quadratische Bilder werden für jede Icon-Größe passend skaliert.
Favicon-Paket erstellen
Klicke auf Konvertieren, um den vollständigen Icon-Satz zu erzeugen: favicon.ico (16/32/48/64/128/256px), icon-32x32.png, apple-touch-icon.png (180×180), icon-192x192.png, icon-512x512.png und site.webmanifest.
ZIP herunterladen
Alle Dateien werden in ein ZIP-Archiv gebündelt. Entpacke es und lade alle Dateien in das Stammverzeichnis deiner Website hoch (auf derselben Ebene wie index.html).
HTML-Tags hinzufügen
Kopiere die Link-Tags aus der beiliegenden README.txt in deinen <head>-Bereich: favicon.ico-Link, PNG-Icon-Link, apple-touch-icon-Link und Manifest-Link.
Idealerweise 512×512 Pixel oder größer, quadratisch, mit transparentem Hintergrund (PNG). Das Ausgangsbild wird per hochwertigem Lanczos-Resampling auf jede benötigte Größe herunterskaliert. Einfache, kräftige Designs mit hohem Kontrast funktionieren bei 16×16 und 32×32 am besten — winziger Text oder feine Linien werden unleserlich. Hat dein Logo Text, überlege eine vereinfachte Icon-Version speziell für das Favicon.
Jede dient einem anderen Kontext: favicon.ico (alle Browser und Geräte), icon-32x32.png (moderne Browser bevorzugen PNG), apple-touch-icon.png (iOS/macOS-Homescreen, erfordert exakt 180×180), icon-192x192.png (Chromes Tab-/App-Wechsler auf Android), icon-512x512.png (PWA-Splashscreen und App-Store-Icons). Die Nutzung aller sorgt für optimale Darstellung überall.
Das Web-App-Manifest teilt Browsern etwas über deine Website-App mit: ihren Namen, Icons, Farben und Anzeigemodus. Es ist für Progressive Web Apps (PWAs) erforderlich und ermöglicht Nutzern, sie unter Android „Zum Homescreen hinzuzufügen". Browser nutzen die Manifest-Icons für Android Chrome, Samsung Internet und andere Chromium-basierte mobile Browser. Füge es mit <link rel="manifest" href="/site.webmanifest"> zu deinem HTML hinzu.
Browser cachen Favicons aggressiv. Versuche: (1) Hard-Refresh der Seite (Strg+Umschalt+R), (2) Browser-Cache leeren, (3) ein Inkognito-/Privatfenster öffnen, (4) einen Cache-Buster an die Favicon-URL in deinem HTML anhängen: href="/favicon.ico?v=2". Die meisten Browser cachen Favicons unabhängig vom Seiten-Cache.
SVG-Eingaben werden derzeit nicht unterstützt, da das Rendern von SVGs im Browser DOM-Zugriff erfordert, der in Web Workern nicht verfügbar ist. Konvertiere deine SVG zuerst in PNG (nutze Figma, Inkscape oder einen Online-SVG-zu-PNG-Konverter) und erstelle dann dein Favicon-Paket aus dem PNG. Für den Webgebrauch kannst du in modernen Browsern auch eine SVG direkt als Favicon nutzen: <link rel="icon" href="/icon.svg" type="image/svg+xml">.
Funktioniert etwas nicht? Fehler melden
