Favicon-Generator

Ein Favicon (Kurzform für 'Favorite Icon') ist das kleine quadratische Icon, das der Browser neben dem Seitentitel anzeigt — im Browser-Tab, der Lesezeichenleiste, dem Verlauf und manchmal in Suchergebnissen. Es wird üblicherweise in 16×16 oder 32×32 Pixeln angezeigt und liegt im Stammverzeichnis deiner Website als favicon.ico. Moderne Websites fügen außerdem ein favicon.svg, ein Apple Touch Icon und PWA-Icons für Startbildschirme hinzu. Ein wiedererkennbares Favicon verbessert die Klickraten in Lesezeichen und Suchergebnissen.

Beginne mit 16×16 und 32×32 — den zwei Größen, die Browser in Tabs und Lesezeichen anzeigen — zusammengefasst in einer einzigen favicon.ico. Für vollständige Abdeckung füge auch 48×48 (von Windows verwendet), ein 180×180 Apple-Touch-Icon für iOS und 192×192 sowie 512×512 PNGs für Android und PWA-Startbildschirme hinzu. Dieser Generator erzeugt alle diese Größen auf einmal aus einer einzigen Quelle, sodass du nie manuell skalieren oder mehrere Tools verwenden musst.

Wähle eine Quelle — lade ein Bild hoch (PNG, JPG, SVG oder WebP), tippe ein bis drei Buchstaben oder füge ein Emoji ein — dann wähle eine Hintergrundfarbe, Form (Quadrat, gerundet oder Kreis) und Abstand. Das Tool rendert alle Favicon-Größen auf einem Canvas, packt 16/32/48 in ein favicon.ico und übergibt dir ein ZIP mit allen Dateien plus dem HTML-Snippet zum Einfügen in deinen <code>&lt;head&gt;</code>. Der gesamte Prozess dauert unter einer Minute und erfordert keine Design-Software.

Ja — weil nichts wirklich hochgeladen wird. Jeder Schritt läuft in deinem Browser mit einem HTML-<code>&lt;canvas&gt;</code> und JavaScript: Dein Bild wird lokal gelesen, skaliert, in PNG und ICO kodiert und auf deinem Gerät gezippt. Keine Datei wird jemals an einen Server gesendet, anders als bei Tools wie favicon.io und RealFaviconGenerator.net, die dein Bild in der Cloud verarbeiten. Dein Logo verlässt nie deinen Computer — wichtig, wenn du an einem Kundenprojekt oder einem unveröffentlichten Produkt arbeitest.

Fast immer liegt es am Browser-Cache. Browser cachen Favicons sehr aggressiv, also mache einen harten Reload (Ctrl+F5), öffne die Icon-URL direkt (deineseite.de/favicon.ico) um zu bestätigen, dass sie lädt, oder probiere es in einem privaten Fenster. Prüfe auch, ob die Dateien im Stammverzeichnis deiner Website liegen, ob die Pfade in deinen <code>&lt;link&gt;</code>-Tags korrekt sind (ein führender Schrägstrich ist wichtig) und ob du wirklich alle Größen hochgeladen hast. Neue Favicons können in Lesezeichen und Suchergebnissen eine Weile brauchen — warte ein paar Stunden nach dem Deployen.

Ja — die Canvas-API und der Datei-Download funktionieren in iOS Safari, Chrome für Android und Samsung Internet. Du kannst ein Foto aus deiner Kamerarolle hochladen, einen Buchstaben eintippen oder ein Emoji einfügen und dann das vollständige ZIP direkt auf dein Handy herunterladen. Praktisch für schnelles Prototyping eines Favicons, wenn du nicht am Schreibtisch bist. Das Layout passt sich kleinen Bildschirmen an, sodass das Tool bei 375px bequem zu bedienen ist.

Maskierbare Icons (192×192 und 512×512 PNGs, die in site.webmanifest aufgeführt sind) sind das, was Android und installierte PWAs verwenden. Ein maskierbares Icon hält seinen wichtigen Inhalt innerhalb einer zentralen Sicherheitszone — etwa 80% des Icons — damit es gut aussieht, wenn das System es in einen Kreis, Squircle oder abgerundetes Quadrat zuschneidet. Dieser Generator fügt automatisch dieses Sicherheitszone-Padding zu den 192- und 512-Icons hinzu und markiert sie mit <code>purpose: maskable</code>. Du musst den Sicherheitsbereich nicht manuell berechnen.