Gelernt: Favicons im Jahr 2025
Zu einer Webseite gehört schon immer seit langer Zeit das Favicon, mit dem man sie von anderen Seiten im Browser unterscheiden kann.
Früher reichte ein Link auf ein favicon.ico aus, dann kam die Unterstützung für Mobil-Geräte, Smartphones und dann spezifischer für iOS und Android Geräte und jetzt Progressive Web Applications hinzu.
Für Statische Seiten Generatoren gab es dann Plugins oder Skripte, welche aus einem SVG die entsprechenden Dateien generierte und im HTML hinterlegte.
Vor ein paar Monaten startete ich nochmal mit Eleventy - und fand auf Anhieb kein Plugin und keine Anleitung, nach der ich das einfach so hinterlegen konnte. Mehrmals scheiterte ich daran, eine vernünftige Referenz auf das, was heute notwendig ist, zu finden. Meine Standard-Suchmaschine duckduckgo war nicht in der Lage, in paar gute Seiten auszuwerfen.
Heute hingegen funktionierte die Suchmaschine wieder so, dass ich via Bernard Nijenhuis Artikel via CSS Tricks zum Original von Andrey Sitnik gelangte, das inzwischen auch auf den Stand von 2025 gebracht wurde und heute "How to Favicon in 2025: Three files that fit most needs" heisst.
Da ich keine PWA baue, reichen für mich diese Angaben hier aus:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->Als Bonus gab es dann weiter unten von duckduckgo noch den Beitrag von EQUK: Favicon Generation In Eleventy sowie den Link zum eleventy-plugin-gen-favicons
Bei mir ist es dann letzteres geworden:
Installation:
npm i eleventy-plugin-gen-faviconsKonfiguration eleventy.config.js
import genFavicons from "eleventy-plugin-gen-favicons"
export default async function (eleventyConfig) {
eleventyConfig.addPlugin(genFavicons);
}Und einbinden im Basis-Layout:
<head>
{% favicons "src/assets/favicon.svg", appleIconBgColor='white', generateManifest=False %}
</head>Für Entwürfe habe ich eine zweite Maschine stehen, die natürlich ein anderes Favicon ausliefern soll. Unterscheiden kann ich beide im Eleventy-Build-Prozess mit der Site-Variable site.isProduction Mein Entwurf sah erst einmal so aus:
<head>
{% set favicon %}{{ "favicon.svg" if site.isProduction else "favicon-drafts.svg" }}{% endset %}
{% favicons ["src/assets/",favicon] | join, appleIconBgColor='white', generateManifest=False %}
</head>Die Frage an ein LLM "Can you improve this code?" lieferte dann diese, leicht verbesserte Version:
<head>
{% set faviconFile = "favicon.svg" if site.isProduction else "favicon-drafts.svg" %}
{% set faviconPath = "src/assets/" ~ faviconFile %}
{% favicons faviconPath, appleIconBgColor='white', generateManifest=False %}
</head>