Softonic

Favicon-Konverter

Erstelle aus einem Rasterbild alle Dateien, die du für ein Website-Favicon brauchst. Lege fest, wie das Ausgangsbild in die quadratische Fläche eingepasst wird, wähle den Hintergrund und lade eine ZIP-Datei herunter. Sie enthält eine ICO-Datei mit mehreren Größen, sieben PNG-Icons, ein Web-App-Manifest, eine Windows-Kachelkonfiguration und ein fertiges HTML-Snippet für den Seitenkopf. Bildkonvertierung und ZIP-Erstellung erfolgen lokal in deinem Browser.

So wandelst du ein Bild in ein Favicon-Paket um

  1. 1

    Rasterbild auswählen

    Wähle eine PNG-, JPEG- oder WebP-Datei, die innerhalb der angezeigten Grenzen für Dateigröße und Bildabmessungen liegt. SVG-, GIF- und AVIF-Dateien werden nicht akzeptiert.

  2. 2

    Einpassung wählen

    Mit „Ausfüllen“ wird das Quadrat vollständig gefüllt und an den Rändern beschnitten. „Einpassen“ erhält dagegen das ganze Bild und ergänzt Randfläche.

  3. 3

    Hintergrund festlegen

    Wähle eine Hintergrundfarbe für transparente Pixel und die im Modus „Einpassen“ entstehende Randfläche. Prüfe anschließend die erzeugten Vorschauen.

  4. 4

    Herunterladen und einbinden

    Lade die ZIP-Datei herunter, lege die Icon- und Konfigurationsdateien auf deiner Website ab und kopiere die mitgelieferten Link-Tags in den Dokumentkopf.

Inhalt der ZIP-Datei

Bestandteil Zweck
favicon.ico Ein ICO-Container mit Einträgen in 16, 32, 48 und 256 px für Browser und Programme, die den klassischen Favicon-Pfad abrufen
favicon-16x16.png Kompakte PNG-Datei für Browser-Tabs und andere kleine Darstellungen
favicon-32x32.png Höher aufgelöstes Icon für Browser-Tabs und Lesezeichen
favicon-48x48.png Zusätzliche Größe für Desktop und Verknüpfungen
mstile-150x150.png PNG-Datei mit 150 × 150 px, auf die die Windows-Kachelkonfiguration verweist
apple-touch-icon.png PNG-Datei mit 180 × 180 px für Links auf dem Apple-Home-Bildschirm
android-chrome-192x192.png App-Icon mit 192 × 192 px, auf das das Web-App-Manifest verweist
android-chrome-512x512.png App-Icon mit 512 × 512 px, auf das das Web-App-Manifest verweist
site.webmanifest JSON-Metadaten, die kompatible Browser auf die Icons mit 192 px und 512 px verweisen
browserconfig.xml Windows-Kachelkonfiguration mit Verweisen auf die erzeugten Icon-Dateien
favicon-head.html Fertige Tags, die eine Seite mit ICO, PNGs, Apple-Icon, Manifest und Browserkonfiguration verbinden

ICO- und PNG-Dateien liegen bewusst getrennt vor. Browser und Betriebssysteme wählen Icons unterschiedlich aus. Ein vollständiges Paket deckt daher sowohl den klassischen Abruf von /favicon.ico als auch explizite moderne Icon-Angaben ab.

HTML-Tags für den Seitenkopf

Das heruntergeladene Paket enthält ein Snippet in dieser Form:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

Wenn die Dateien in einem Unterordner oder auf einem eigenen Asset-Host liegen, passe die Pfade vor dem Einfügen der Tags in <head> an. Die Dateinamen und Pfade in site.webmanifest und browserconfig.xml müssen mit den tatsächlich bereitgestellten Dateien übereinstimmen.

Ausfüllen, Einpassen und Hintergrund

  • Ausfüllen füllt jede quadratische Ausgabe vollständig. Ein breites oder hohes Ausgangsbild wird an gegenüberliegenden Rändern gleichmäßig beschnitten. Wichtige Motive sollten daher nahe der Mitte liegen.
  • Einpassen hält das gesamte Ausgangsbild sichtbar. Die ungenutzte Fläche wird zur Randfläche in der gewählten Hintergrundfarbe.
  • Hintergrund kann transparent bleiben oder eine eigene Volltonfarbe verwenden. Im Modus „Einpassen“ bestimmt diese Auswahl auch die Farbe der Randfläche. Prüfe die Vorschau vor der Veröffentlichung sowohl auf hellen als auch auf dunklen Seitenhintergründen.

Für möglichst klare kleine Icons empfiehlt sich ein einfaches quadratisches Ausgangsbild mit mindestens 512 × 512 Pixeln. Feine Schrift, Haarlinien und kleine Details können in der 16-px-Version verschwinden, selbst wenn die Quelldatei groß ist.

Eingabegrenzen und Einbindung

Dieser Konverter akzeptiert ausschließlich Rasterbilder im PNG-, JPEG- oder WebP-Format. Er prüft die Dateisignatur und lehnt SVG, GIF, AVIF sowie andere nicht aufgeführte Formate ab. Eine Quelldatei darf bis zu 20 MiB groß sein. Keine Seite darf länger als 8.192 Pixel sein, und das Bild darf insgesamt höchstens 24 Megapixel umfassen. Die Abmessungen werden geprüft, bevor das vollständige Bild dekodiert wird.

Entpacke nach dem Herunterladen die ZIP-Datei und lade die erzeugten Dateien an die Pfade hoch, die im mitgelieferten Snippet verwendet werden. Root-relative Pfade wie /favicon.ico setzen voraus, dass die Dateien im Stammverzeichnis der aktuellen Domain verfügbar sind. Leere beim Ersetzen eines vorhandenen Favicons gegebenenfalls den Website- oder CDN-Cache, da Browser Icon-Dateien oft länger speichern als gewöhnliche Seiteninhalte.

Das enthaltene Manifest stellt Icon-Metadaten bereit. Ein Manifest und ein Icon-Satz allein machen eine Website jedoch noch nicht zu einer installierbaren Progressive Web App. Die Installierbarkeit hängt zusätzlich von der Seite, der sicheren Übertragung und den Anforderungen des jeweiligen Browsers ab.

Häufig gestellte Fragen

Du kannst PNG, JPEG oder WebP verwenden. Der Konverter prüft die Dateisignatur, statt sich nur auf den Dateinamen zu verlassen, und lehnt SVG, GIF, AVIF sowie andere Formate ab.

Ausfüllen skaliert das Bild, bis das Quadrat vollständig gefüllt ist. Bei einem nicht quadratischen Seitenverhältnis wird an den Rändern gleichmäßig beschnitten. Einpassen erhält das ganze Bild und füllt die verbleibende quadratische Fläche mit der gewählten Hintergrundfarbe.

ICO ist ein Container, der mehrere kleine Icon-Größen in einer klassischen Favicon-Datei speichern kann. Separate PNG-Dateien geben Browsern und Plattformen eindeutig dimensionierte Elemente für Tabs, Home-Bildschirm-Links und App-Icons. Beide Formate zusammen verbessern die praktische Abdeckung.

Nein. Das Manifest beschreibt die erzeugten App-Icons und zugehörige Darstellungsmetadaten. Für die Installierbarkeit gelten jedoch weitere Browseranforderungen, und auch Aufbau und Bereitstellung der Website spielen eine Rolle.

Das mitgelieferte Snippet verwendet Root-relative Pfade. Am einfachsten legst du die entpackten Dateien daher im Stammverzeichnis der Domain ab. Bei einem anderen Ordner oder Asset-Host musst du das Snippet sowie die Pfade im Manifest und in der Browserkonfiguration entsprechend anpassen.

Nein. Bildverarbeitung und ZIP-Erstellung erfolgen in deinem Browser. Im mehrstufigen Ablauf kann ein IndexedDB-Entwurf das Bild bis zu 30 Minuten lang in diesem Browser aufbewahren, damit es zwischen den Schritten übergeben werden kann. Diese lokale Übergabe ist kein Upload auf einen Server.

Verwandte Tools

Barcode-Generator

Erstellen Sie scannbare 1D-Barcodes in Code 128, Code 39, EAN-13, UPC-A, ITF-14 und Codabar. Exportieren Sie als PNG, SVG oder PDF für den Druck.

Fotoeditor

Browser-basierter Fotoeditor mit Zuschneiden, Drehen, Helligkeit, Kontrast, Sättigung, Filtern, Textüberlagerung und Export nach JPG, PNG oder WebP.

Bildgröße ändern

Ändere Bilder auf exakte Pixelmaße oder Prozentwerte und behalte das Seitenverhältnis bei. Für Stapel geeignet, ohne Upload.

QR-Code-Generator

Erstellen Sie einen QR-Code lokal im Browser aus URL, Klartext oder einer korrekt formatierten QR-Nutzlast und laden Sie ihn als PNG herunter.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

WebP zu PNG

Konvertieren Sie WebP-Bilder in PNG und behalten Sie Transparenz sowie pixelgenaue Qualität für Bearbeitung, Druck und ältere Design-Tools bei.