Wie kann ich ein Favicon für die Readonline-Seite eines Newsletters einbinden?

Ein Favicon ist das kleine Symbol, das im Browser-Tab neben dem Seitentitel angezeigt wird. Auch für die Readonline-Version (Webansicht) eines Newsletters kann ein eigenes Favicon hinterlegt werden.

Dazu wird im HTML-Template des Newsletters ein entsprechender HTML-Tag im <head>-Bereich eingefügt.

Favicon nur in der Readonline-Ansicht anzeigen

Mit der kajomi-Templatefunktion kjm.environment() lässt sich unterscheiden, ob ein Newsletter als E-Mail oder als Readonline-Seite ausgegeben wird.

Mit folgender Bedingung wird das Favicon ausschließlich in der Readonline-Ansicht eingebunden:

<!--:[if kjm.environment() == "readonline"]-->
<link rel="icon" type="image/png" href="https://www.deine-domain.de/favicon.png">
<!--[/if]-->

Die URL https://www.deine-domain.de/favicon.png muss durch die öffentlich erreichbare Adresse des eigenen Favicons ersetzt werden.

Wo wird der Code eingefügt?

Der Code wird im HTML-Template des Newsletters innerhalb des <head>-Bereichs eingefügt.

Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Newsletter</title>

  <!--:[if kjm.environment() == "readonline"]-->
  <link rel="icon" type="image/png" href="https://www.deine-domain.de/favicon.png">
  <!--:[/if]-->

</head>
<body>
  <!-- Newsletter-Inhalt -->
</body>
</html>

Was bewirkt die Bedingung?

• Readonline-Ansicht: Der HTML-Tag für das Favicon wird ausgegeben und der Browser kann das Symbol anzeigen.
• E-Mail-Ansicht: Der Favicon-Tag wird nicht ausgegeben, da er für E-Mail-Clients nicht benötigt wird.

Welche Anforderungen muss das Favicon erfüllen?

• Das Favicon sollte vorzugsweise als PNG-Datei vorliegen.
• Empfohlene Abmessungen sind 32 × 32 oder 48 × 48 Pixel.
• Die Bilddatei muss über eine öffentlich erreichbare HTTPS-URL verfügbar sein.
• Alternativ können auch andere gängige Favicon-Formate wie .ico verwendet werden. Der type-Wert muss dann entsprechend angepasst werden.

Hinweis: Nach der Änderung sollte die Readonline-Seite im Browser aufgerufen werden. Da Browser Favicons häufig zwischenspeichern, kann es notwendig sein, den Browser-Cache zu leeren, bevor das neue Symbol angezeigt wird.