Dein Logo als perfektes Favicon.In drei einfachen Schritten.

Für jede selbst gebaute Website oder jedes Template, in dem du den <head> bearbeiten kannst.

1. Dateien hochladen: Entpacke das Favicon-Paket und lade alle Dateien ins Hauptverzeichnis (Root) deiner Website – dorthin, wo auch die Startseite liegt.

2. Code einfügen: Füge diese Zeilen in den <head> jeder Seite ein:

   %HEAD%
   

3. Prüfen: Seite neu laden. Siehst du noch das alte Favicon, hilft ein harter Reload (Strg + F5 bzw. Cmd + Shift + R) – mehr dazu unter Favicon wird nicht angezeigt.

Liegen die Dateien in einem Unterordner, passe die Pfade im Code an, z. B. /favicon/favicon.ico. Die Pfade im site.webmanifest sind relativ und funktionieren in jedem Ordner.

Diese Anleitung als eigene Seite ↗

Der schnelle Weg (reicht für die meisten Seiten): Lade die Datei icon-512.png aus deinem Paket als Website-Icon hoch. Du findest es je nach Theme unter Einstellungen → Allgemein → Website-Icon (seit WordPress 6.5) oder unter Design → Customizer → Website-Informationen. WordPress erzeugt daraus selbst die nötigen Größen.

Das volle Paket (mit favicon.ico, icon.svg und Web-App-Manifest):

1. Dateien hochladen: Lade alle Dateien per FTP ins Hauptverzeichnis deiner WordPress-Installation (dort, wo die wp-config.php liegt).

2. Code ins Child-Theme: Füge in die functions.php deines Child-Themes ein:

   add_action('wp_head', function () { ?>
   %HEAD%
   <?php }, 1);
   

3. Website-Icon entfernen: Ist unter Website-Icon noch ein Bild hinterlegt, entferne es – sonst gibt WordPress zusätzlich eigene Icon-Tags aus.

Nutze ein Child-Theme, sonst ist der Code beim nächsten Theme-Update wieder weg.

Diese Anleitung als eigene Seite ↗

1. Dateien hochladen: Lege im Modul Dateiliste den Ordner fileadmin/favicon/ an und lade alle Dateien aus dem Paket hinein.

2. TypoScript einfügen: Ergänze im Setup deines Sitepackages (oder im TypoScript-Template der Root-Seite):

   page.headerData.1730 = TEXT
   page.headerData.1730.value (
   %HEAD:/fileadmin/favicon/%
   )
   

3. Caches leeren: Wartung → Alle Caches leeren bzw. das Blitz-Symbol, dann die Seite neu laden.

Nur ein einfaches favicon.ico brauchst du? Dafür kennt TYPO3 page.shortcutIcon = fileadmin/favicon/favicon.ico – Apple- und Android-Icons fehlen dann aber. Wenn dein Sitepackage den <head> im Fluid-Layout selbst ausgibt, kannst du den HTML-Code auch direkt dort einfügen.

Diese Anleitung als eigene Seite ↗

1. Favicon in den Theme-Einstellungen: Onlineshop → Themes → Anpassen → Theme-Einstellungen, dort im Bereich Logo bzw. Favicon die Datei icon-512.png hochladen. Shopify erzeugt daraus das Browser-Favicon.

2. Touch-Icon hochladen: Themes → … → Code bearbeiten → Assets → Neues Asset hinzufügen und apple-touch-icon.png hochladen.

3. Code im theme.liquid ergänzen: In layout/theme.liquid vor </head> einfügen:

   <link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_url }}">
   <meta name="theme-color" content="%THEME%">
   

Theme-Updates überschreiben Änderungen am Code manchmal – prüfe das Touch-Icon nach einem Update.

Diese Anleitung als eigene Seite ↗

Website-Baukästen erlauben keinen Zugriff auf Dateien und <head>. Du lädst dort ein einziges Bild hoch – nimm icon-512.png aus deinem Paket, der Baukasten erzeugt daraus die nötigen Größen.

1. Wix: Einstellungen → Favicon bzw. Website-Einstellungen → Favicon – bei Wix nur mit Premium-Paket und verbundener eigener Domain.
2. Squarespace: Je nach Version Design → Browser-Symbol oder Einstellungen → Website → Browser-Symbol (Favicon).
3. Jimdo: Einstellungen → Website bzw. Einstellungen → Favicon – die Bezeichnung hängt von der Jimdo-Version ab.

Einschränkungen: Touch-Icon, Android-Icon und Theme-Farbe legt der Baukasten selbst fest; favicon.ico, icon.svg und das Manifest lassen sich nicht verwenden. Das Bild aus deinem Paket ist trotzdem schärfer als ein einfach verkleinertes Logo.

Diese Anleitung als eigene Seite ↗

Next.js (App Router) erkennt Icons an ihrem Dateinamen und erzeugt die Tags selbst:

1. In app/ ablegen: favicon.ico und icon.svg unverändert, apple-touch-icon.png umbenennen in apple-icon.png.

2. In public/ ablegen: site.webmanifest, icon-192.png, icon-512.png, icon-maskable-512.png.

3. Manifest und Farbe im Root-Layout (app/layout.tsx):

   export const metadata = { manifest: '/site.webmanifest' };
   export const viewport = { themeColor: '%THEME%' };
   

React und Vue mit Vite (oder Create React App): Alle Dateien nach public/ und in die index.html in den <head>:

%HEAD%

Diese Anleitung als eigene Seite ↗

Joomla:

1. Dateien hochladen: Alle Dateien per FTP ins Hauptverzeichnis der Joomla-Installation.

2. Code ins Template: Im Template (am besten in einem Kind-Template) in die index.php in den <head>:

   %HEAD%
   

3. Standard-Icon des Templates: Bringt das Template ein eigenes Favicon mit (bei Cassiopeia z. B. unter media/templates/site/cassiopeia/images/), ersetze es durch deine favicon.ico oder entferne die Ausgabe im Template.

Drupal: Unter Design → Einstellungen (beim aktiven Theme) Standard-Favicon verwenden abwählen und deine favicon.ico hochladen. Für das volle Paket die Dateien ins Webroot legen und den Code oben in die html.html.twig deines Themes einfügen.

Diese Anleitung als eigene Seite ↗