Favicon für die Webseite

Zuletzt aktualisiert am 17. Januar 2024 1 Minute

Meine Webseiten haben alle das selbe Webdesign. Um die Seiten in den Browser-Tabs besser unterscheiden zu können haben sie unterschiedliche Favicons. Die kann man sich recht einfach erzeugen lassen:

Screenshot: https://favicon.io/favicon-generator/external link

Das heruntergeladene ZIP-Archiv hat folgenden Inhalt:

Die von meiner Webseite benötigten Varianten 64x64 und 114x114 sind blöderweise nicht dabei. Die erzeuge ich flott aus einer der höhere aufgelösten Variante durch Kopie, Umbenennen und dann Verkleinern auf das gewünschte Maß - Das geht beim OS-X bequem über die Vorschau.

Die manuelle Einbindung im <head> der Webseite könnte dann so aussehen, je nach dem was man für Icons unterstützen möchte:

<link rel="apple-touch-icon" sizes="180x180" href="/path/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/path/icon/favicon-16x16.png">
<link rel="manifest" href="/path/icon/site.webmanifest">
<link rel="mask-icon" href="/path/icon/safari-pinned-tab.svg" color="#00aba9">
<link rel="shortcut icon" href="/path/icon/favicon.ico">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-config" content="/path/icon/browserconfig.xml">
<meta name="theme-color" content="#ff0000">

Eingebunden werden die Favicons bei meinem eingesetzten Standard-Theme nicht manuell, sondern über:

Dashboard > Laborator > Theme-Options > Branding > Other Settings