Favicon: das Icon Ihrer Website in 5 Minuten erstellen

Was ist ein Favicon?

Das Favicon (kurz für „favorite icon“) ist das kleine Symbol, das im Tab Ihres Browsers, in den Lesezeichen und auf dem mobilen Startbildschirm erscheint, wenn jemand Ihre Website hinzufügt. Ein Detail, das beim Eindruck von Professionalität den Unterschied macht: Eine Website ohne Favicon wirkt unfertig.

Die Formate und Größen, die Sie kennen sollten

Verwendung	Größe	Format
Browser-Tab	16×16 px, 32×32 px	ICO oder PNG
Windows-Favoriten	16×16 px	ICO
Android-Verknüpfung	192×192 px	PNG
iOS-App (Apple Touch)	180×180 px	PNG
PWA (Progressive Web App)	512×512 px	PNG

In der Praxis erzeugen die meisten Favicon-Generatoren all diese Größen automatisch aus einer hochauflösenden Quelldatei.

Ihr Favicon in 3 Schritten erstellen

Schritt 1 — Die Quelldatei vorbereiten

Verwenden Sie idealerweise Ihre Logomark (den Icon-Teil Ihres Logos, ohne Text) als PNG mit transparentem Hintergrund und mindestens 512×512 px. BrandMotion Lab liefert zu jeder Bestellung automatisch eine ICO-Datei — sie enthält die Größen 16, 32 und 64 px bereits.

Schritt 2 — Das Favicon-Paket erzeugen

Wenn Sie ein komplettes Paket erzeugen möchten (ICO + PNG in allen Größen + manifest.json):

favicon.io: am einfachsten, kostenlos, erzeugt alles mit einem Klick
realfavicongenerator.net: am umfassendsten, mit Vorschau auf allen Geräten

Schritt 3 — In Ihre Website einbinden

Im <head> Ihres HTML:

<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Bei Next.js (App Router): Legen Sie Ihre favicon.ico direkt in den Ordner /app. Next.js erkennt sie automatisch.

Bei WordPress: Design → Customizer → Website-Informationen → Website-Icon.

Design: Was macht ein gutes Favicon aus?

Ein Favicon muss auf 16×16 px erkennbar sein. Einige Regeln:

Verwenden Sie einen einzelnen Buchstaben, eine Initiale oder ein einfaches Piktogramm — niemals das vollständige Logo mit Text
Hoher Kontrast zwischen Icon und Hintergrund (hell oder transparent)
Vermeiden Sie feine Details: Sie verschwinden im Kleinformat
Testen Sie es in einer Simulation des Browser-Tabs (dunkle Titelleiste)

BrandMotion Lab und das Favicon

BrandMotion Lab erzeugt zu jedem gelieferten Logo automatisch eine ICO-Datei. Sie ist die für kleine Größen optimierte Version der Logomark. Sie können sie direkt als Favicon Ihrer Website nutzen oder in favicon.io importieren, um das komplette Paket zu erzeugen.