Favicon erstellen und einbinden: Größe, Format und Code

Q: ICO, PNG oder SVG: Welches Format ist richtig?

Alle drei funktionieren. Eine favicon.ico im Hauptverzeichnis ist der sichere Rückfall, PNG oder SVG die moderne Ergänzung. SVG bleibt in jeder Größe scharf, wird aber nicht überall genutzt, deshalb nie als einzige Datei.

Stand: 3. Oktober 2026 · CAZ Labs

Kurz gesagt

Das Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und neben deinem Eintrag in der Google-Suche. Du brauchst ein quadratisches Bild mit mindestens 48 x 48 Pixeln, das du mit `<link rel="icon">` im `<head>` einbindest. Zusätzlich lohnt sich eine `favicon.ico` im Hauptverzeichnis der Domain.

Warum das wichtig ist

Ein fehlendes Favicon kostet dich keine Platzierung. Es kostet Wiedererkennung. In der Google-Suche steht das Icon direkt neben deinem Seitennamen. Fehlt es, setzt Google ein graues Standardsymbol ein, und dein Eintrag wirkt neben den Mitbewerbern unfertig.

Dazu kommen die Stellen, an denen Besucher deine Seite wiederfinden: Browser-Tabs, Lesezeichen, der Verlauf, das Symbol auf dem Startbildschirm des Handys. Wer zwölf Tabs offen hat, findet deinen nur über das Icon.

Google stellt ein paar Bedingungen. Das Icon muss quadratisch sein, und Google empfiehlt mindestens 48 x 48 Pixel, damit es überall scharf aussieht. SVG geht auch. Außerdem müssen die Datei und deine Startseite für Google abrufbar sein, also nicht per robots.txt gesperrt.

So prüfst du es selbst

Im kostenlosen Check sucht checkfrei nach einem <link rel="icon"> und nach einer /favicon.ico. Fehlt beides, gibt es eine Warnung. Ob das Icon gut aussieht, kann kein Werkzeug beurteilen, das musst du selbst anschauen.

Schau in den Browser-Tab: Siehst du dein Symbol oder ein leeres Standardbild?
Ruf https://deine-domain.de/favicon.ico direkt auf. Erscheint ein Bild, ist die Datei da.
Such im Quelltext (Strg+U) nach rel="icon". Dort steht, welche Datei die Seite tatsächlich einbindet.

So behebst du es

Fang mit einer quadratischen Vorlage von 512 x 512 Pixeln an. Ein komplettes Logo mit Schriftzug ist in 16 Pixeln Breite nur noch Matsch. Meist funktioniert das Bildzeichen allein oder ein Anfangsbuchstabe besser. Generatoren wie RealFaviconGenerator erzeugen daraus alle nötigen Größen und Dateien.

html

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

WordPress

Im Customizer lädst du unter "Website-Informationen" das Website-Icon hoch. WordPress empfiehlt mindestens 512 x 512 Pixel und erzeugt die kleineren Größen selbst. Bei Block-Themes geht es über den Block "Website-Logo", der eine Option hat, das Logo zusätzlich als Website-Icon zu verwenden.

Shopify

Das Favicon findest du im Theme-Editor in den Theme-Einstellungen, bei vielen Themes im Bereich Logo. Shopify rechnet das Bild selbst auf die passende Größe herunter.

Wix

Das Favicon stellst du in den Website-Einstellungen ein. Ein eigenes Favicon gibt es bei Wix nur mit Premium-Paket und verbundener Domain, vorher zeigt der Tab das Wix-Symbol.

HTML

Leg die Dateien ins Hauptverzeichnis und setz die Zeilen von oben in den <head> jeder Seite. Das Apple-Touch-Icon (180 x 180 Pixel) erscheint, wenn jemand deine Seite auf dem iPhone zum Startbildschirm hinzufügt. Die favicon.ico im Hauptverzeichnis fängt Programme auf, die einfach dort nachsehen.

Next.js

Im App Router legst du favicon.ico direkt in den Ordner app, dazu bei Bedarf icon.png und apple-icon.png. Next.js erzeugt die passenden Link-Tags automatisch.

Typische Fehler

Das neue Icon ist hochgeladen, der Browser zeigt aber noch das alte. Browser speichern Favicons hartnäckig. Ein privates Fenster zeigt den echten Stand.
Google zeigt auch Wochen später noch das alte oder gar keins. Google holt Favicons in eigenem Rhythmus ab. Über die URL-Prüfung der Startseite in der Search Console kannst du einen neuen Abruf anstoßen, eine Garantie ist das nicht.
Ein querformatiges Logo als Favicon. Es wird gequetscht oder mit Rand aufgefüllt und ist dann kaum zu erkennen.

So prüft checkfrei

Wir suchen ein <link rel="icon"> oder eine /favicon.ico. Fehlt beides, gibt es eine Warnung.

Gewicht 1 von 3 im Bereich SEO.

Häufige Fragen

Welche Größe muss ein Favicon haben?

Quadratisch und mindestens 48 x 48 Pixel, damit Google es in den Suchergebnissen gut darstellen kann. Als Ausgangsdatei eignen sich 512 x 512 Pixel, daraus lassen sich alle kleineren Größen ableiten.

ICO, PNG oder SVG: Welches Format ist richtig?

Alle drei funktionieren. Eine favicon.ico im Hauptverzeichnis ist der sichere Rückfall, PNG oder SVG die moderne Ergänzung. SVG bleibt in jeder Größe scharf, wird aber nicht überall genutzt, deshalb nie als einzige Datei.

Warum zeigt Google mein Favicon nicht an?

Meist ist das Icon zu klein oder nicht quadratisch, die Datei ist per robots.txt gesperrt, oder Google hat die Startseite seit der Änderung noch nicht neu abgerufen. Icons, die Google für unangemessen hält, ersetzt es durch das Standardsymbol.

Jetzt deine Seite prüfen

checkfrei prüft Favicon und 68 weitere Punkte in einem Durchgang. Kostenlos und ohne Anmeldung.