nikolausdulgeridis

link rel - ich habe einen gemeeinsamen header für allle webseiten, Kann ich für verschiedene Webseiten einen unterschiedliches favicon einbinden?

Ja, das ist möglich. Obwohl Sie einen gemeinsamen Header nutzen, können Sie das Favicon für verschiedene Webseiten individualisieren.

Hier sind die drei gängigsten Wege, um dies umzusetzen:

1. Manuelles Überschreiben pro Seite

Wenn Ihr gemeinsamer Header eine Standarddatei (z. B. favicon.ico) im Root-Verzeichnis nutzt, wird diese automatisch von Browsern erkannt. Sie können jedoch auf spezifischen Seiten ein anderes Favicon erzwingen, indem Sie den <link>-Tag direkt im <head>-Bereich der jeweiligen Seite unterhalb des gemeinsamen Headers einfügen. Der Browser verwendet in der Regel die zuletzt gefundene Deklaration.

html

<!-- Beispiel für eine spezifische Unterseite --> <link rel="icon" href="/pfad/zu/speziellem-favicon.png" type="image/png">

Verwende Code mit Vorsicht.

2. Dynamische Steuerung über Variablen (CMS/Backend)

Falls Sie ein Content-Management-System (CMS) oder eine serverseitige Sprache (wie PHP) nutzen, können Sie den Pfad zum Favicon im Header als Variable definieren.

Logik: Der Header bleibt identisch, aber der Wert für href wird basierend auf der aktuellen Seite oder Kategorie geladen.
Vorteil: Sie müssen den Header-Code nur einmal schreiben und steuern die Icons zentral über Ihre Datenbank oder Seiten-Konfiguration.

3. Wechsel per JavaScript

Sie können das Favicon auch dynamisch per Skript austauschen, nachdem die Seite geladen wurde. Dies ist besonders nützlich für Web-Apps oder wenn Sie das Icon basierend auf Nutzerinteraktionen ändern möchten.

Ein einfaches Beispiel, um das Favicon per JavaScript zu ersetzen:

javascript

function changeFavicon(src) {     let link = document.querySelector("link[rel*='icon']") || document.createElement('link');     link.type = 'image/x-icon';     link.rel = 'shortcut icon';     link.href = src;     document.getElementsByTagName('head')[;">0].appendChild(link); } // Aufruf auf der spezifischen Seite: changeFavicon('/pfad/zum/neuen-icon.ico');

Verwende Code mit Vorsicht.

Wichtiger Hinweis zum Cache: Browser speichern Favicons oft sehr hartnäckig im Zwischenspeicher. Wenn Änderungen nicht sofort sichtbar sind, hilft es meist, den Browser-Cache zu leeren oder einen Zeitstempel an die URL anzuhängen (z. B. favicon.ico?v=2).

Soll das Favicon automatisch je nach Light- oder Dark-Mode des Nutzers wechseln, oder geht es Ihnen rein um die inhaltliche Trennung der Seiten?