Title here
Summary here
Favicon für die Webseite
Zuletzt aktualisiert am 29. Mai 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:
- de.wikipedia.org/wiki/Favicon
- realfavicongenerator.net - Erzeugt Icons für alle relevanten Systemumgebungen, inclusive Webseitencheck, der ganz nützlich sein kann.
- favicon.io - Favicon Generator aus Bild, aus Text oder aus Emoticons. Ich nutze die Textversion . Das schaut dann so aus:
Screenshot: https://favicon.io/favicon-generator/
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