Zum Inhalt springen

Favicon-Loader im Jitterbit App Builder

Beschreibung

Das Favicon Loader Widget fügt einer Site ein Symbol als Favicon hinzu und erscheint im Browser-Tab für eine bestimmte Site. Das Symbol wird auch auf dem Startbildschirm eines Mobilgeräts (iOS und Android) angezeigt, wenn die Site zum Startbildschirm des Mobilgeräts hinzugefügt wird.

  • Schöpfer: Andrew Connor
  • Typ: Site-Widget
  • Parameter:
    • FaviconRel: Symbol
    • FaviconGrößen: 16x16
    • Favicon-Typ: image/png
    • FaviconUrl: URL für das Symbol, das Sie auswählen möchten. Für Vinyl-Server--> " https://{{servername}}.zudy.com/vinyl/service/image/{{imageID}}"

imageID finden Sie in den Bildinformationen in IDE-->Design Your Look and Feel-->Bilder-->{{Your Image}}

Videobeispiel für die Implementierung eines Favicon-Loader-Widgets

Problemumgehung zum Anpassen eines Favicons

In einigen Fällen kann die Verwendung des empfohlenen Favicon Loader Widget nicht die richtigen Symbolergebnisse für alle Ansichtsfenstergrößen liefern (z. B. mobil). Als Ersatz können Sie das folgende Verfahren verwenden. Als Vorsichtshinweis: Erstellen Sie vor und nach Änderungen unbedingt eine Kopie der Datei Index.html, da diese durch Upgrades ersetzt wird!

  1. Der erste Schritt besteht darin, ein Symbol zu generieren, das Sie für Ihr Favicon verwenden möchten. Verwenden Sie beispielsweise ein Standardbild mit 400 x 400 Pixeln wie das folgende Bild:

    Favicon

  2. Verwenden Sie ein Online-Tool, um das Favicon-Bild für alle kompatiblen Formate zu generieren. Eine gute kostenlose Ressource ist beispielsweise https://www.favicon-generator.org

    Dadurch wird eine Zip-Datei erstellt, die viele verschiedene Darstellungen der Bilder enthält, wie unten:

    Zip

  3. Kopieren Sie das generierte HTML, das in den Header der App Builder Site-Datei. Der Inhalt sollte ungefähr so aussehen:

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

  4. Sobald Sie den Favicon-Ordner und das erforderliche HTML gesammelt haben, navigieren Sie zu Ihrem App Builder App Server mit Remote Desktop lokalisieren Sie Ihre App Builder App Pool-Ordner. Dieser befindet sich normalerweise im folgenden Pfad: C:\inetpub\wwwroot\App Builder

    App Builder Wurzel

  5. Sobald Sie zu Ihrem App Builder Suchen Sie im Ordner den Ordner Content und legen Sie dort den Ordner ab, der alle Ihre Favicon-Symbole enthält. Wir empfehlen, den Ordner in Favicon umzubenennen, damit sich der Pfad dafür leichter festlegen lässt.

    Img

  6. Sobald Sie Ihren Favicon-Ordner zum Inhaltsordner hinzugefügt haben, App Builder Sie können fortfahren und auf den Ordner Views klicken und die Datei Index.html suchen.

  7. Öffnen Sie die Datei Index.html mit Ihrem bevorzugten Text- oder Code-Editor und fügen Sie die Referenzen für Ihren Favicon-Ordner hinzu. Achten Sie darauf, /content/ in Ihren Dateipfad aufzunehmen:

    Index

  8. Denken Sie daran, die Datei zu speichern. Navigieren Sie anschließend zu IIS, gehen Sie zu Ihrem Anwendungs-App-Pool und klicken Sie auf Neustart für die Website

    IIS

  9. Sobald IIS die Aktualisierung abgeschlossen hat, können Sie dies testen, indem Sie von Ihrem Browser aus zu Ihrer Site navigieren und diese entweder als Lesezeichen speichern oder auf dem Startbildschirm speichern. Sie sollten jetzt Ihr benutzerdefiniertes Favicon sehen!

    Sieben