Aus Ihrem Logo werden favicon.ico und ein ganzes Icon-Set

Inhalt zuletzt geprüft:2026-09-07

Laden Sie Ihr Logo als PNG, JPG oder SVG hoch. Das Werkzeug baut daraus eine Datei favicon.ico, die drei Größen in sich trägt, sowie fünf einzelne PNG-Icons. Alle Dateien entstehen in Ihrem Browser und gehen von dort direkt auf Ihre Festplatte — als komplettes Set oder einzeln.

Vorschau und Favicon-Dateien

Fügen Sie links ein Bild hinzu, um favicon.ico und ein Set von PNG-Symbolen gemäß den aktuellen Richtlinien zu generieren.

favicon.ico

ICO 16x16 + 32x32 + 48x48

Wird generiert

favicon-16x16.png

PNG 16x16

Wird generiert

favicon-32x32.png

PNG 32x32

Wird generiert

apple-touch-icon.png

PNG 180x180

Wird generiert

android-chrome-192x192.png

PNG 192x192

Wird generiert

android-chrome-512x512.png

PNG 512x512

Wird generiert

Dieses Tool funktioniert auf einem größeren Bildschirm

Um dieses Tool komfortabel zu nutzen, öffnen Sie es auf einem Laptop, Desktop-Computer oder Tablet im Querformat.

Tipp

Falls Sie ein Tablet nutzen, drehen Sie es ins Querformat - sobald die Fensterbreite ausreicht, lädt das Tool automatisch.

Was ist ein Favicon und was ein Apple-Touch-Icon?

Ein Favicon ist das Website-Icon, das der Browser im Tab neben dem Seitentitel, in der Lesezeichenleiste und im Verlauf zeichnet. Die enzyklopädische Definition beschreibt es als das Symbol vor der Adresse in der Adressleiste oder auf dem Tab einer geöffneten Seite [1]. Im Tab stehen ihm gut ein Dutzend Pixel Kantenlänge zur Verfügung, also weniger Platz, als ein einzelner Buchstabe dieses Satzes einnimmt.

Das Apple-Touch-Icon ist dieselbe Grafik, vorbereitet für iPhone und iPad. Es landet auf dem Startbildschirm, sobald jemand Ihre Seite als Verknüpfung ablegt. Seine Kantenlänge beträgt 180 Pixel, denn das System zeichnet es in einer Größe nahe an einer gewöhnlichen App.

Die beiden größten Icons des Sets, 192 und 512 Pixel, bedienen Web-Apps. Android greift beim Anlegen einer Verknüpfung und bei der Installation darauf zu und findet sie über die Manifest-Datei, also über das Dokument, in dem eine Website ihren Namen, ihre Farben und eben diese Liste von Icons angibt [2].

Wie erstellen Sie ein Favicon aus Ihrem eigenen Logo?

Laden Sie Ihr Logo im Feld Basisbild hinzufügen hoch, klicken Sie auf Favicon generieren und laden Sie sechs Dateien herunter: favicon.ico sowie PNG-Icons mit den Kantenlängen 16, 32, 180, 192 und 512 Pixel. Das Bild verarbeitet der Browser auf Ihrem Rechner, und die fertigen Dateien speichern Sie direkt auf der Festplatte.

Die Datei favicon.ico ist dabei mehr als ein einzelnes Bild. Das Format ICO ist ein Behälter für mehrere Fassungen derselben Grafik, und der Generator legt drei davon hinein: 16, 32 und 48 Pixel. Browser oder Betriebssystem wählen daraus die Größe, die zu der Stelle passt, an der das Icon gerade gezeichnet wird. Der Browser-Tab greift zur kleinsten Fassung, die Verknüpfung auf dem Schreibtisch zu einer größeren.

Die Dateinamen entsprechen dem, wonach Website-Vorlagen und Dokumentationen suchen: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png und android-chrome-512x512.png. Laden Sie diese Dateien genau so auf den Server, wie sie den Generator verlassen.

Welche Dateien erhalten Sie und wo erscheint jede davon?

Der Generator erstellt immer das vollständige Set. Unten stehen die Größe jeder Datei und der Ort, an dem sie Besuchern tatsächlich begegnet.

Dateiname	Größe	Wo sie erscheint
favicon.ico	16, 32 und 48 px in einer Datei	Browser-Tab, Lesezeichenleiste, Verknüpfung auf dem Schreibtisch
favicon-16x16.png	16 × 16 px	Browser-Tab auf einem Bildschirm mit normaler Dichte
favicon-32x32.png	32 × 32 px	Browser-Tab auf einem Bildschirm mit hoher Dichte
apple-touch-icon.png	180 × 180 px	Startbildschirm von iPhone und iPad
android-chrome-192x192.png	192 × 192 px	Verknüpfung auf dem Android-Startbildschirm
android-chrome-512x512.png	512 × 512 px	Startbildschirm und Installation einer Web-App

Welche Icon-Größe verlangen Google, Apple, Android und WordPress?

Jede dieser Stellen liest das Icon nach eigenen Regeln. Ein Set aus dem Generator deckt sie alle zugleich ab.

Wo das Icon erscheint	Benötigte Kantenlänge	Dateiformat
Google-Suchergebnisse	Mindestens 8 px, empfohlen über 48 px	ICO, PNG, JPEG, GIF, BMP, TIFF oder PPM
Browser-Tab	16 px, auf dichten Bildschirmen 32 px	ICO oder PNG
Startbildschirm von iPhone und iPad	180 px	PNG
Verknüpfung auf dem Android-Startbildschirm	192 px	PNG
Installation einer Web-App	512 px	PNG
Website-Icon in WordPress	Mindestens 512 px	PNG oder JPG

Die Anforderungen von Google an das Favicon, einschließlich der quadratischen Form und der Formatliste, beschreibt die Dokumentation der Suchmaschine [3]. Die Schwelle von 512 Pixeln für das Website-Icon nennt die Dokumentation von WordPress [4].

Wo geben Sie jede heruntergeladene Datei an?

Vier Dateien tragen Sie im head-Bereich der Seite ein, die beiden größten geben Sie in der Manifest-Datei an.

Datei aus dem Generator	Ort der Angabe	Attribut rel
favicon.ico	head-Bereich der Seite	icon
favicon-16x16.png	head-Bereich der Seite	icon
favicon-32x32.png	head-Bereich der Seite	icon
apple-touch-icon.png	head-Bereich der Seite	apple-touch-icon
android-chrome-192x192.png	Manifest-Datei, Liste icons	Angabe im Manifest
android-chrome-512x512.png	Manifest-Datei, Liste icons	Angabe im Manifest

Die Werte des Attributs rel, an denen Google ein Favicon erkennt, lauten icon, apple-touch-icon und apple-touch-icon-precomposed [3]. Die fertigen Codezeilen finden Sie weiter unten im Reiter HTML.

Wie bedienen Sie den Favicon-Generator?

Drei Schritte trennen Sie von einem vollständigen Icon-Set auf der Festplatte:

1. Fügen Sie das Basisbild hinzu
Ziehen Sie die Datei auf das Feld Basisbild hinzufügen oder klicken Sie darauf und wählen Sie eine Grafik von der Festplatte. Das Werkzeug nimmt PNG, JPG/JPEG und SVG entgegen und zeigt darunter Name und Größe der gewählten Datei.
2. Legen Sie den Hintergrund fest
Der Generator startet mit weißem Hintergrund. Ein Häkchen bei Transparenter Hintergrund (PNG/ICO) lässt die Fläche um Ihr Zeichen frei, und einen eigenen Farbton wählen Sie mit dem Farbfeld neben Hintergrundfarbe.
3. Generieren und herunterladen
Klicken Sie auf Favicon generieren. Kurz darauf erscheinen in der rechten Spalte sechs Dateien mit ihrer jeweiligen Größe und einer Gesamtgröße darüber. Die Schaltfläche Herunterladen speichert das ganze Set, und jede Zeile hat ihre eigene Schaltfläche Herunterladen.

Transparenter Hintergrund (PNG/ICO)

Hintergrundfarbe:

Hintergrund des Icons: transparent oder farbig?

Weiß gilt als Ausgangseinstellung

Beim Öffnen der Seite steht das Farbfeld auf Weiß, und jedes der sechs Icons erhält diese Farbe. Das passt zu Logos in dunklen Tönen und überall dort, wo das Icon auf heller und dunkler Tableiste gleich aussehen soll.

Transparenter Hintergrund (PNG/ICO)

Ein Häkchen in diesem Feld lässt die Fläche um Ihr Zeichen frei, und das Farbfeld wird dabei inaktiv. Wählen Sie diese Einstellung, wenn Ihr Logo eine eigene Form hat — einen Kreis, ein Signet, einen Buchstaben — und die Farbe des jeweiligen Untergrunds annehmen soll.

Eine eigene Farbe aus Ihrem Erscheinungsbild

Das Farbfeld nimmt jeden Ton an, auch den aus Ihren Gestaltungsrichtlinien. Den genauen Wert aus vorhandenem Material holen Sie sich mit dem Farbextraktor für Bilder und fügen ihn hier ein.

Welches Ausgangsbild liefert das beste Ergebnis?

Das kleinste Icon des Sets hat eine Kantenlänge von 16 Pixeln, also entscheidet vor allem das Hochgeladene über das Ergebnis.

Setzen Sie auf eine klare Form und ein starkes Zeichen
Bei 16 Pixeln Kantenlänge bleiben Signets, einzelne Buchstaben und geschlossene Symbole lesbar. Auf Hinweisschildern wirkt derselbe Mechanismus: Ein Piktogramm trägt seine Aussage in wenigen Strichen, denn es soll aus der Entfernung und in kleinem Maßstab ankommen.
Laden Sie Ihr Logo als SVG hoch
Eine SVG-Datei beschreibt Formen über Kurven und Geometrie, deshalb zeichnet der Generator jede Größe aus der vollständigen Beschreibung. In unserer Messung kam die Kante eines Kreises im Icon mit 512 Pixeln sauber heraus: Auf einer Linie durch dessen Mitte lag kein einziges Pixel in einem Zwischenton. Dieselbe Datei reicht über Icons hinaus: eine Bitmap dieses Zeichens für eine Präsentation oder eine E-Mail-Signatur liefert der SVG-zu-PNG-Konverter.
Wählen Sie eine Datei mit mindestens 512 Pixeln Kantenlänge
So groß ist das größte Icon des Sets. Bei einer Rasterdatei dieser Größe entsteht jede weitere Größe durch Verkleinern, und das erhält die Schärfe der Kanten.
Laden Sie ein Bild mit beliebigen Seitenverhältnissen hoch
Das Werkzeug setzt es vollständig in das Quadrat ein: Es skaliert das Bild auf die längere Kante, rückt es in die Mitte und füllt die freien Streifen mit dem gewählten Hintergrund. Nehmen Sie ein liegendes Logo mit 400 × 100 Pixeln. Im Icon mit 64 Pixeln Kantenlänge entsteht daraus ein Band von 16 Pixeln Höhe, mit Hintergrund darüber und darunter. Wenn das Zeichen das ganze Quadrat ausfüllen soll, schneiden Sie das Logo zuerst im Bildeditor auf ein Quadrat zu und laden Sie es erst danach hier hoch.
Wählen Sie einen Kontrast für beide Darstellungsarten
Das Icon steht einmal auf einer hellen Tableiste und einmal auf einer dunklen. Töne, die sich deutlich von Weiß und von Schwarz abheben, bleiben in beiden Fällen lesbar.
Lassen Sie an den Rändern Luft für Android
Android kann ein Icon auf einen Kreis oder auf ein Quadrat mit abgerundeten Ecken beschneiden. Die Spezifikation garantiert die Sichtbarkeit innerhalb eines Kreises mit einem Radius von zwei Fünfteln der kürzeren Kante, gemessen von der Mitte [2]. Ein mittig gesetztes Zeichen übersteht damit jeden solchen Beschnitt.
Beginnen Sie mit PNG, wenn Ihr Logo in einem anderen Format vorliegt
Das Feld Basisbild hinzufügen arbeitet mit Dateien im Format PNG, JPG/JPEG und SVG. Ein anders gespeichertes Zeichen braucht vorab nur einen Durchgang durch einen Konverter. Ein Foto vom iPhone öffnet der HEIC-zu-PNG-Konverter. Eine von einer Website geholte Grafik übernimmt der WEBP-zu-PNG-Konverter oder der AVIF-zu-PNG-Konverter. Ein Logo, das im Markenhandbuch als PDF geliefert wurde, holt der PDF-zu-PNG-Konverter heraus.

Genügt eine SVG-Datei allein als Website-Icon?

Ein Icon im Format SVG funktioniert heute in Browsern auf dem Rechner — Chrome und Edge lesen es ab Version 80, Firefox ab 41. Auf iPhone und iPad tut Safari das ab Version 26 [5]. Damit eignet sich SVG als Ergänzung des Sets, neben den Dateien im Format ICO und PNG.

Das Favicon für die Suchergebnisse liest Google aus Dateien im Format ICO, PNG, JPEG, GIF, BMP, TIFF und PPM [3]. Das Set aus diesem Generator steht gleich zweimal auf dieser Liste: einmal mit favicon.ico, einmal mit den PNG-Icons. Wenn Sie bereits eine eigene SVG-Datei haben, behalten Sie sie im head-Bereich daneben — dann findet jede dieser Stellen ein Format, das sie lesen kann.

Wohin laden Sie die erzeugten Dateien?

Vier Wege, je nachdem, worauf Ihre Website läuft:

WordPress
Im heutigen WordPress legen Sie das Icon im Adminbereich unter Einstellungen › Allgemein fest. Das Feld heißt dort Website-Icon. Klassische Themes bieten dieselbe Option zusätzlich im Customizer, im Abschnitt zu den Website-Informationen.
Laden Sie dort die Datei android-chrome-512x512.png hoch. Die Dokumentation verlangt ein quadratisches Bild mit mindestens 512 Pixeln [4], und die kleineren Fassungen erzeugt WordPress selbst.
Sie möchten jede Datei selbst bestimmen? Laden Sie das gesamte Set per FTP in das Stammverzeichnis der Website und tragen Sie die Verweise so ein, wie es die Karte HTML zeigt.
Shopify
Gehen Sie im Shop-Adminbereich auf Onlineshop, suchen Sie Ihr Theme und klicken Sie auf Theme bearbeiten. Unter Theme-Einstellungen öffnen Sie den Abschnitt mit dem Logo und darin das Feld Favicon.
Shopify nennt 32 × 32 Pixel als empfohlene Größe und skaliert größere Bilder darauf herunter [6]. Laden Sie also android-chrome-512x512.png hoch — das lässt Ihnen Qualitätsreserve für Bildschirme mit hoher Dichte.
HTML
Kopieren Sie die Dateien in das Stammverzeichnis der Website, also dorthin, wo index.html liegt. Browser prüfen die Adresse /favicon.ico von sich aus, die übrigen Icons finden sie über die Verweise im Bereich <head>:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
Die beiden größten Icons geben Sie in der Manifest-Datei an, in der Liste icons, zusammen mit ihren Maßen und dem Typ image/png.
Ein Icon lässt sich auch direkt im Code als Zeichenkette hinterlegen — dafür sorgt der Bild-zu-Base64-Konverter. Bei Einzeldateiseiten und Prototypen ist das praktisch; legen Sie daneben eine gewöhnliche Datei unter /favicon.ico ab, denn danach greift der Googlebot [3].
Next.js
Next.js mit App Router erkennt Icons am Dateinamen und ergänzt die Verweise im head-Bereich selbst [7]:
- app/favicon.ico — ausschließlich im Verzeichnis app/ und ausschließlich mit der Endung .ico
- app/icon.png — das PNG-Icon; unter diesem Namen funktionieren auch .jpg und .svg, weitere Fassungen nummerieren Sie als icon1.png, icon2.png
- app/apple-icon.png — das Gegenstück zu apple-touch-icon.png; dieser Name nimmt .png, .jpg und .jpeg an
Die Icons mit 192 und 512 Pixeln bleiben im Verzeichnis public/ und werden aus dem Manifest heraus angegeben. Sie können das ganze Set auch in layout.tsx über das Objekt metadata.icons beschreiben.

Wie verhält sich das Favicon in den Google-Suchergebnissen?

Google zeigt das Website-Icon in den Ergebnissen neben dem Namen der Website, auf dem Telefon wie auf dem Rechner. Um es abzurufen, braucht die Suchmaschine Zugang zu zwei Dingen: Der bildindexierende Googlebot muss die Icon-Datei selbst crawlen können, und der gewöhnliche Googlebot die Startseite [3]. Lassen Sie das Verzeichnis mit dem Icon daher außerhalb der sperrenden Regeln in der Datei robots.txt.

Nach dem Austausch der Datei ist etwas Geduld gefragt: Die Dokumentation sagt ausdrücklich, dass das erneute Crawlen mehrere Tage bis mehrere Wochen dauert [3]. Google weist zudem darauf hin, dass ein Favicon auch bei erfüllten Vorgaben nicht garantiert in den Ergebnissen erscheint.

Das Icon selbst gehört zur Darstellungsebene eines Ergebnisses, und genau so beschreibt es die Dokumentation der Suchmaschine. Worauf es wirklich wirkt, ist die Wiedererkennung: In der Ergebnisspalte und zwischen einem Dutzend offener Tabs ist es oft das einzige farbige Element, an dem Nutzer Ihre Website von den übrigen unterscheiden.

Quellen

Favicon — Wikipedia
Web Application Manifest — W3C
Website-Favicon für Suchergebnisse festlegen — Google Search Central
Customizer — Website-Informationen — WordPress
SVG favicons — Can I use
Theme-Einstellungen — Favicon-Bild — Shopify Help Center
favicon, icon und apple-icon — Next.js

Alle Werte in den Tabellen haben wir aus den Einheitendefinitionen berechnet und vor der Veröffentlichung rechnerisch geprüft. Historische Angaben und die Namen lokaler Einheiten stützen sich auf die oben genannten Quellen.

Inhalt zuletzt geprüft: 7. September 2026 · erstellt und geprüft vom Arteon-Team

Häufige Fragen zum Favicon-Generator

Wie viele Dateien braucht eine gewöhnliche Unternehmenswebsite?

Drei: favicon.ico, favicon-32x32.png und apple-touch-icon.png. Die erste bedient den Browser-Tab und die Suchergebnisse, die zweite Bildschirme mit hoher Dichte, die dritte den Startbildschirm des iPhones. Die beiden größten Icons kommen in dem Moment ins Spiel, in dem Sie die Website als Web-App anbieten möchten.

Muss ein Favicon quadratisch sein?

Google verlangt ein Seitenverhältnis von 1:1 [3], und WordPress erwartet für das Website-Icon ebenfalls ein Quadrat [4]. Der Generator übernimmt das für Sie: Ein Bild mit beliebigen Seitenverhältnissen wird vollständig in das Quadrat eingesetzt und mit dem gewählten Hintergrund ergänzt, sodass alle sechs Dateien quadratisch herauskommen.

Warum zeigt der Browser weiterhin das alte Icon?

Der Browser bewahrt Icons länger im Zwischenspeicher auf als den Rest der Seite. Öffnen Sie die Adresse der Datei selbst, etwa /favicon.ico, und laden Sie sie mit Strg + F5 unter Umgehung des Zwischenspeichers neu. Sie können dem Verweis auch eine Versionsnummer anhängen, etwa /favicon.ico?v=2 — für den Browser ist das dann eine neue Adresse.

Wirkt sich das Favicon auf die Position in Google aus?

Die Dokumentation der Suchmaschine beschreibt das Favicon als Bestandteil des Erscheinungsbilds eines Ergebnisses [3]. Der Einfluss auf die Position selbst ist mittelbar und liegt darin, wie schnell Suchende Ihre Marke in der Ergebnisspalte wiedererkennen.

Was genau steckt in der Datei favicon.ico aus diesem Generator?

Drei Bilder derselben Grafik: 16 × 16, 32 × 32 und 48 × 48 Pixel, jedes davon als PNG innerhalb des ICO-Behälters gespeichert. Browser und Betriebssystem wählen daraus die Fassung, die zu der Stelle passt, an der sie das Icon zeichnen.

Was ist ein Maskable Icon und welcher Bereich darin ist sicher?

Das ist ein Icon für die Systemmasken von Android, das dort auf einen Kreis, ein Quadrat mit abgerundeten Ecken oder einen Tropfen beschnitten wird. Die Spezifikation des Manifests garantiert die Sichtbarkeit innerhalb eines Kreises mit einem Radius von zwei Fünfteln der kürzeren Kante, gemessen von der Mitte des Bildes [2]. Ein in diesem Bereich platziertes Zeichen übersteht jede Maskenform.

Wohin auf dem Server gehören die heruntergeladenen Dateien?

In das Stammverzeichnis der Website, neben die Startdatei. Browser prüfen die Adresse /favicon.ico von sich aus, sogar ohne Verweis im Code, und die übrigen Icons finden sie über die oben im Reiter HTML gezeigten Zeilen aus dem head-Bereich.

Kann ich nur eine einzelne Datei aus dem Set herunterladen?

Ja. Jede Zeile in der Ergebnisliste hat ihre eigene Schaltfläche Herunterladen, sodass Sie ein einzelnes Icon speichern, wenn Sie auf der Website nur eine Größe aktualisieren. Die Schaltfläche Herunterladen über der Liste speichert das gesamte Set auf einmal.

Welche Bilder nimmt der Generator an und was geschieht mit meiner Datei?

Das Feld Basisbild hinzufügen nimmt Dateien im Format PNG, JPG/JPEG und SVG an. Die gesamte Arbeit geschieht in Ihrem Browser: Das Bild wird in den Speicher des Tabs geladen, dort entstehen alle Icons, und von dort gehen sie auf die Festplatte. Die Schaltfläche Löschen entfernt Bild und Ergebnisse sofort, und das Schließen des Tabs bewirkt dasselbe.

Helfen Sie uns, unsere Werkzeuge zu verbessern

Haben Sie eine Idee für eine neue Funktion, einen Fehler gefunden oder möchten Sie ein weiteres Werkzeug vorschlagen, das Ihre Arbeit erleichtern würde? Schreiben Sie uns – wir antworten innerhalb von 24 Stunden.