Image to Favicon: Create Website Icons From Any Image

Q: Wie verweise ich auf Favicons in HTML?

Mit Tags, die auf jede Größe und Formate zeigen, plus für iOS. Der Browser wählt das beste passende Element aus. Ein vollständiger Satz von Link-Tags deckt jede Plattform ab.

Zuletzt aktualisiert: June 28, 2026. Die Unterstützung für Favicons in Browsern entwickelt sich weiter; die Kerngrößen und Formate hier decken die aktuelle Landschaft ab.

Ein Favicon ist das kleine Icon, das in einem Browser-Tab, einer Lesezeichenliste und auf dem Startbildschirm eines Telefons erscheint, wenn jemand Ihre Seite speichert. Ein Bild in ein Favicon umzuwandeln bedeutet, die richtigen Dateitypen in den passenden Größen zu erstellen, damit das Icon überall scharf aussieht – vom 16-Pixel-Browser-Tab bis zum 180-Pixel-Apple Touch Icon. Dieser Leitfaden behandelt die erwarteten Größen jeder Plattform, die Formate zur Generierung und wie man sicherstellt, dass das Icon auch bei winzigen Abmessungen erkennbar bleibt.

Kurzantwort: Wie erstelle ich ein Favicon aus einem Bild?

Beginnen Sie mit einem quadratischen Quellbild (oder schneiden Sie es mit dem image cropper auf Quadrat zu), [skalieren] Sie es auf die Standard-Favicon-Größen (16px, 32px, 180px, 512px) herunter und exportieren Sie es als PNG plus eine ICO-Datei für ältere Browser. Verweisen Sie darauf in Ihrem HTML <head> mit den entsprechenden Link-Tags. Testen Sie die 16px-Version im Browser-Tab, denn wenn das Icon in dieser Größe nicht erkennbar ist, wird es durch keine größere Version behoben. Behalten Sie auch die SVG-Version bei, falls das Logo ein Vektorbild ist, um eine scharfe Darstellung auf hochauflösenden DPI-Bildschirmen zu gewährleisten.

Welche Größen benötigt ein Favicon?

Verschiedene Kontexte zeigen das Favicon in unterschiedlichen Größen an, und die Bereitstellung der richtigen Größen sorgt dafür, dass es überall scharf bleibt.

Größe	Datei	Verwendungszweck
16x16	ICO / PNG	Browser-Tab (Legacy)
32x32	ICO / PNG	Browser-Tab (Retina)
180x180	PNG	Apple Touch Icon
192x192	PNG	Android Startbildschirm
512x512	PNG	PWA / Splash
Beliebig	SVG	Moderne Browser, hochauflösend (high-DPI)

Die 16px-Version ist am wichtigsten – das ist das, was die meisten Menschen im Tab sehen.
Das Apple Touch Icon benötigt 180px für eine scharfe Darstellung auf dem iOS Startbildschirm.
SVG dient modernen Browsern in jeder Auflösung ohne mehrere Dateien.
Ein ICO kann mehrere Größen bündeln, um Legacy-Unterstützung zu gewährleisten.

Wie entwerfe ich ein Favicon, das bei 16px funktioniert?

Die Herausforderung eines Favicons besteht darin, dass es auch bei 16 Pixeln erkennbar sein muss – das ist winzig. Details, die bei 512px gut aussehen, verschwinden bei 16px, daher muss das Design einfach sein.

Verwenden Sie eine einzige, kräftige Form – einen Buchstaben, ein Logozeichen, ein einfaches Icon.
Vermeiden Sie dünne Linien und kleinen Text – sie verschwinden bei 16px.
Nutzen Sie einen hohen Kontrast, damit die Form gegen den Hintergrund des Tabs lesbar ist.
Testen Sie die 16px-Version in der tatsächlichen Größe, bevor Sie es veröffentlichen.

Ein häufiger Fehler ist die Verwendung des vollständigen Logos mit Text. Bei 16px ist der Text unleserlich, sodass das Favicon wie ein verschwommiger Fleck aussieht. Die Lösung besteht darin, das einzeln erkennbarste Element zu extrahieren – das Icon oder den ersten Buchstaben – und dies als Favicon zu verwenden. Der SVG to PNG guide behandelt den Export von Vektorzeichen in den benötigten Größen.

Welche Dateiformate sollte ich generieren?

Favicons umfassen mehrere Formate, da die Browserunterstützung im Laufe der Zeit gewachsen ist, und die Abdeckung aller davon stellt sicher, dass das Icon überall funktioniert.

ICO – das Legacy-Format, bündelt mehrere Größen, wird von allen Browsern unterstützt.
PNG – der moderne Standard, eine Datei pro Größe.
SVG – Vektor, skaliert auf jede Größe, wird von modernen Browsern unterstützt.
Apple Touch PNG – speziell 180x180 für iOS Startbildschirm-Icons.

Format	Wann verwenden
ICO	Legacy-Browserunterstützung, bündelt Größen
PNG	Moderne Browser, Dateien pro Größe
SVG	Moderne Browser, einzelne skalierbare Datei
Apple Touch PNG	iOS Startbildschirm

Generieren Sie eine ICO für die Kompatibilität mit älteren Systemen, PNGs in jeder Größe für breite Unterstützung und ein SVG, falls die Quelle ein Vektorbild ist. Der image converter übernimmt die Formatgenerierung, und der image cropper stellt zuerst das quadratische Quellbild bereit.

Wie verweise ich auf Favicons in HTML?

Die generierten Dateien müssen im <head> des Seiten-Codes referenziert werden, damit die Browser sie finden. Die Link-Tags teilen dem Browser mit, welche Datei für welchen Kontext zu verwenden ist.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Das ICO deckt ältere Browser mit gebündelten Größen ab.
Das SVG dient modernen Browsern in jeder Auflösung.
Das Apple Touch Icon deckt iOS Startbildschirm-Speicher ab.
Platzieren Sie die Dateien im Stammverzeichnis der Seite für maximale Kompatibilität.

Der Mozilla favicon guide dokumentiert die Link-Tags und das Browserverhalten, und der Web.dev app icons guide behandelt den maskierbaren Icon-Standard für Android. Testen Sie das Ergebnis in einem echten Browser-Tab und auf einem Telefon-Startbildschirm nach dem Deployment, da Rendering-Unstimmigkeiten nur in den tatsächlichen Kontexten auftreten.

Gestaltung von Favicons für Hell- und Dunkelmodus

Moderne Browser und Betriebssysteme wechseln zwischen Hell- und Dunkelmodus, und ein Favicon, das in einem hellen Tab gut aussieht, kann in einem dunklen Tab verschwinden. Ein PNG mit transparentem Hintergrund oder ein SVG mit adaptiven Farben berücksichtigt beide Kontexte, da das Icon sich an die umgebende Oberfläche anpasst und nicht seinen eigenen Hintergrund trägt.

Herausforderung des Modus	Lösung
Dunkles Icon verschwindet im dunklen Tab	Einen dezenten Umriss hinzufügen oder Transparenz nutzen
Helles Icon verschwindet im hellen Tab	Gleiches gilt – Umriss oder adaptive Farbe
Schwierige Lesbarkeit bei 16px	Form vereinfachen, Kontrast erhöhen

Bei SVG-Favicons können Sie die prefers-color-scheme Media Query innerhalb des SVG verwenden, um für helle und dunkle Kontexte unterschiedliche Farben bereitzustellen, was die sauberste Lösung ist. Für PNG funktioniert ein transparenter Hintergrund mit einer Form, die genügend inneren Kontrast aufweist, akzeptabel in beiden Modi. Das Ziel ist, dass das Favicon unabhängig davon lesbar ist, ob der Benutzer den Hell- oder Dunkelmodus aktiviert hat – was zunehmend der Standard und nicht mehr die Ausnahme ist.

Häufige Favicon-Fehler

Zu viele Details – das Icon ist bei 16px nicht erkennbar. Vereinfachen Sie es.
Nicht quadratische Quelle – zuerst auf Quadrat zuschneiden, sonst verzerrt sich das Icon.
Vergessen des Apple Touch Icons – iOS-Speicher zeigen stattdessen einen generischen Screenshot an.
Kein SVG – hochauflösende DPI-Bildschirme rendern stattdessen ein unscharfes PNG statt eines scharfen Vektors.
Testen bei 16px vergessen – die Größe, die die meisten Menschen sehen, ist die am häufigsten vernachlässigte.

Das Favicon ist klein, aber es erscheint überall dort, wo Ihre Seite repräsentiert wird – in Tabs, Lesezeichen, Startbildschirmen und Suchergebnissen. Ein klares, erkennbares Icon in jeder Größe verstärkt die Marke auf einen Blick, während ein unscharfes oder fehlendes Favicon mangelnde Sorgfalt signalisiert. Nehmen Sie sich die Zeit, die 16px-Version richtig zu erstellen, generieren Sie den vollständigen Satz an Größen und Formaten, und das Icon wird die Seite sauber dort repräsentieren, wo es erscheint. Die Investition ist gering – ein einziger Nachmittag Design- und Exportarbeit –, aber sie zahlt sich aus, jedes Mal, wenn ein Benutzer Ihre Seite in einem Tab, Lesezeichen oder auf dem Startbildschirm sieht, was viel häufiger vorkommt, als die meisten Teams realisieren.

Häufig gestellte Fragen

Welche Größen benötigt ein Favicon?

Ein modernes Set: 16×16, 32×32, 48×48 (klassisch), plus 180×180 (Apple Touch Icon) und 192×192 / 512×512 (Android). Ein Master-Bild generiert das gesamte Set. Der Browser wählt je nach Kontext die richtige Größe aus.

Wie entwerfe ich ein Favicon, das bei 16px funktioniert?

Halten Sie es einfach – eine einzige kräftige Form, hoher Kontrast, keine feinen Details oder Texte. Bei 16px wird alles Intrikate zu einem Fleck. Testen Sie das Design vor der Veröffentlichung bei 16px; wenn es dort nicht lesbar ist, ist es zu komplex.

Welche Dateiformate sollte ein Favicon verwenden?

ICO für die Kompatibilität mit älteren Systemen, PNG für moderne Browser und Apple/Android-Icons sowie SVG für eine resolutionsunabhängige Version, wo unterstützt. Generieren Sie das vollständige Set; ein Format deckt nicht jedes Gerät ab.

Wie verweise ich auf Favicons in HTML?

Mit <link rel="icon"> Tags, die auf jede Größe und Formate zeigen, plus <link rel="apple-touch-icon"> für iOS. Der Browser wählt das beste passende Element aus. Ein vollständiger Satz von Link-Tags deckt jede Plattform ab.

Kann ich ein Bild für alle Favicon-Größen verwenden?

Ja – ein einziges quadratisches Master (512×512 oder größer) generiert das gesamte Set, von 16×16 bis 512×512. Entwerfen Sie das Master so, dass es bei 16px lesbar ist (eine kräftige Form), damit auch die kleinste Größe funktioniert. Ein Master, viele Größen.

Wie teste ich ein Favicon?

Öffnen Sie die Seite in einem Browser-Tab und überprüfen Sie das Icon bei 16px (Tabgröße), 32px (Lesezeichen) und 180px (Apple Touch). Wenn die 16px-Version nicht lesbar ist, ist das Design zu komplex – vereinfachen Sie es auf eine kräftige Form. Favicons sind klein, erscheinen aber überall, daher verstärkt ein klares, erkennbares Icon in jeder Größe die Marke auf einen Blick.

Was ist eine ICO-Datei?

Ein Legacy-Containerformat, das ein oder mehrere Rasterbilder in verschiedenen Größen enthält und für Favicons auf älteren Browsern verwendet wird (insbesondere altes Internet Explorer). Moderne Browser verwenden PNG und SVG, daher ist ICO hauptsächlich eine Kompatibilitätsschicht. Generieren Sie neben Ihrem PNG/SVG-Set auch eine ICO, damit jeder Browser, egal wie alt, ein Icon erhält.

Image to Favicon: Create Website Icons From Any Image

Kurzantwort: Wie erstelle ich ein Favicon aus einem Bild?

Welche Größen benötigt ein Favicon?

Wie entwerfe ich ein Favicon, das bei 16px funktioniert?

Welche Dateiformate sollte ich generieren?

Wie verweise ich auf Favicons in HTML?

Gestaltung von Favicons für Hell- und Dunkelmodus

Häufige Favicon-Fehler