Logo / Icons

Sie haben die Möglichkeit im Ordner icons die Anpassungen für Ihre eigenen Logos und Icons durchzuführen.

Maskierbares Icon mit Abstand nach außen

Achten Sie bitte darauf, dass Ihre Logos über das richtige Format verfügen und genügend Abstand zum Rand haben. Das ist besonders wichtig im Hinblick auf die Darstellung und die PWA.

Nähere Informationen dazu finden Sie hier (opens in a new tab)

Favicon & Logos

Das Favicon und die Logos sind teil der manifest.json. Falls Sie noch über keine Logos mit diesem Format oder kein favicon verfügen können Sie diese bspw. gemeinsam auf dieser Seite erstellen: favicon.io (opens in a new tab)

Favicon

Die Datei favicon.ico können Sie direkt durch Ihre eigene Datei mit dem selben Namen ersetzen.

Logos

Die Logos mit den Namen logo192.png und logo512.png können Sie auch direkt durch Ihre eigenen Logos im selben Format ersetzen.

Apple Touch Icons

Um die Apple Touch Icons zu erstellen benötigen Sie einen Konverter. Das können Sie relativ einfach mit dem pwa-asset-generator durchführen. Nähere Informationen finden Sie auch hier: pwa-asset-generator (opens in a new tab)

Hierfür müssen Sie folgende Schritte durchführen:

1. Installieren Sie Node.js (opens in a new tab).

2. Erstellen Sie einen Ordner, in dem sich das Logo (z. B. logo.png) befindet, das Sie konvertieren möchten.

3. Navigieren Sie über Powershell, CMD oder Ihren Code-Editor (z. B. VSCode (opens in a new tab)) zu Ihrem erstellten Ordner.

4. Führen Sie den folgenden Befehl aus, um die Dependency zu installieren:

   npm install pwa-asset-generator

5. Nach der Installation können Sie mit dem folgenden Befehl Ihre Apple Touch Icons erstellen:

   npx pwa-asset-generator [source-file]
   • [source-file] steht hierbei für den Namen des Logos, also in diesem Beispiel logo.png.
   • Der vollständige Befehl wäre in diesem Fall:

   npx pwa-asset-generator logo.png

Custom Logos

Innerhalb des Ordners custom könnne Sie Ihre eigenen Logos sowie die Bilder für die Links innerhalb des Menus hinterlegen. Legen Sie darüber hinaus auch hier die Bilder für die Tabs innerhalb der Themen ab.

Beachten Sie bitte die Namensgebung sowie das Dateiformat.

Primäres und Sekundäres Logo

Das Primäre Logo logo_primary.png wird an jeder Stelle, der CI eingebunden und sollte in einem quadratischen Format sein. Das sekundäre Logo logo_secondary.png ist aktuell auf der rechten Seite am oberen Rand des Splashscreens zu finden.

Sollten sich die Namen oder Dateiformate Ihre Logos zu den Standard Logos unterscheiden, müssen Sie dies innerhalb des appConfig.json-Files anpassen. Weitere Informationen zur Anpassung finden Sie hier: Anwendung

Bilder für die Links im Menü

Diese sollten auch ein quadratisches Format haben und zudem eine möglichst geringe Dateigröße. Weitere Informationen zur Einbundung finden Sie hier: Menu