Favicon in HTML hinzufügen
Ein Favicon in eine einfache HTML-Seite einzubinden ist eine einzeilige Änderung – das moderne, vollständige Setup umfasst sechs Zeilen und deckt iOS, Android, Dark Mode und PWA-Installation ab.
Das eine Tag, das jeder Browser respektiert, ist <link rel="icon" href="/favicon.ico">. favicon.ico im Site-Root ablegen und Sie sind zu 80 % fertig.
Die restlichen 20 % – apple-touch-icon, PNG-Varianten, SVG mit Dark-Mode-Support und ein Webmanifest – machen den Unterschied zwischen einem Standard-Icon und einem professionellen Markenerlebnis.
So funktioniert es
- 1
Favicon-Paket generieren
Mit dem FetchFavicon-Paket-Generator – erzeugt alle Dateien plus kopierbereites Markup.
- 2
Dateien im Site-Root ablegen
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Snippet in den <head> einfügen
Sechs <link>-Tags + ein <meta name="theme-color">.
Jetzt ausprobieren
HTML-Snippet generieren
Favicon-GeneratorFAQ
Wo im Code gehören die <link>-Tags hin?+
In den <head> – die Position innerhalb des <head> ist egal, solange sie vor </head> stehen.
Brauche ich .ico und PNG?+
Ja. .ico ist der universelle Fallback; PNG liefert die schärfste Darstellung auf High-DPI-Screens.
Was ist mit Dark Mode?+
Liefern Sie eine SVG-Variante mit eingebetteter prefers-color-scheme-Media-Query im <style>-Block aus.