Das Favicon (Favorite Icon) ist das kleine quadratische Bild, das im Browser-Tab neben dem Seitentitel, in der Lesezeichen-Liste, im Browser-Verlauf und seit 2019 auch in den Google-Suchergebnissen angezeigt wird. Ein prägnantes Favicon sorgt für Wiedererkennung und wirkt professionell — ein fehlendes oder hässliches Favicon dagegen hinterlässt einen schlampigen Eindruck.
Welche Favicon-Größen brauche ich 2026?
Ein einzelnes 16×16-Favicon reicht nicht mehr. Moderne Websites brauchen ein ganzes Set: favicon.ico (16×16, 32×32, 48×48 kombiniert), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180, für iOS Home-Screen), android-chrome-192x192.png und android-chrome-512x512.png (für PWA) sowie eine site.webmanifest-Datei. So sieht dein Icon auf jedem Gerät sauber aus.
Einbindung im HTML-Head
Die Einbindung erfolgt im <head>-Bereich: <link rel="icon" type="image/png" href="/favicon.png">, ergänzt um die apple-touch-icon-Variante für iOS. Das Manifest wird per <link rel="manifest" href="/site.webmanifest"> eingebunden. Wichtig: Alle Dateien müssen im Root-Verzeichnis liegen — manche Browser suchen dort fest.
Design-Tipps für ein gutes Favicon
Ein 16×16-Pixel-Icon verträgt keine Details — vergiss komplette Logos mit Text. Besser: nur die Bildmarke, der Monogramm-Buchstabe oder ein Kern-Symbol. Starker Kontrast, klare Silhouette, keine dünnen Linien. Teste das Favicon auf hellem UND dunklem Hintergrund, und immer in der tatsächlichen Anzeigegröße — nicht nur auf 1000-Pixel-Mockups.