Logo & Favicon in Avada ändern

In diesem Handbuch Artikel zeigen wir Ihnen, wie Sie das Logo und Favicon in Ihrer Webseite in wenigen Schritten selbständig austauschen können und worauf Sie dabei achten müssen.

Logo

Wurde Ihre Webseite von Hürlimann Homepages erstellt, ist Ihr Logo in den Avada Optionen im Backend Ihrer Webseite hinterlegt. Möchten Sie das Logo ersetzen, gilt es wenige Punkte zu beachten.

Avada kennt drei Logovarianten, die je nach Einsatzort zum Zug kommen. Zudem ist Avada Retina ready und bietet für das Standard Logo zusätzlich den Upload einer Retina Version für hochauflösende Geräte:

• Standard Logo: Dieses Logo wird zwingend für die Webseite benötigt. Es wird auch als Standard verwendet, sollte das Logo für die fixierte Kopfzeile oder das Logo für Mobilgeräte nicht vorhanden sein.
• Fixierter Kopfbereich Logo (Sticky Header Logo): Dieses Logo kann optional hochgeladen werden. Wir empfehlen Ihnen den Upload einer neuen Datei hier ausschliesslich dann, wenn bereits durch Hürlimann Homepages ein Sticky Header Logo implementiert wurde.
• Logo für Mobilgeräte: Dieses kann optional hochgeladen werden. Wir empfehlen Ihnen den Upload einer neuen Datei hier ausschliesslich dann, wenn bereits durch Hürlimann Homepages ein Mobile Logo verwendet wurde.
• Retina Logo: Ein Retina Logo hat eine ca. 2-fach höhere Auflösung als das Standard Logo. Retina Displays haben eine sehr hohe Auflösung. Ein Logo, das für ein normales Display erstellt wurde, wird auf einem Retina Display sehr klein angezeigt. Daher bietet Avada zusätzlich beim Standard Logo die Möglichkeit ein Retina Logo zu hinterlegen. Wir empfehlen Ihnen für ein optimales Ergebnis zwingend auch die Retina Version hochzuladen.

Grösse & Dateiformat

Achten Sie darauf, dass Ihr neues Logo im Endformat, sprich in der Grösse in der es auf der Webseite eingebunden wird, zur Verfügung steht. Das richtige Format sehen Sie anhand des bestehenden Logos in der Mediathek.

Da das Retina Logo in doppelter Auflösung dargestellt wird, müssen Sie darauf achten, dass es im Endformat immer exakt doppelt so gross ist, wie das Ausgangslogo. Ist ihr Standard Logo z. B. 100 × 100 Pixel gross, muss die Retina Version Ihres Logos 200 × 200 Pixel gross sein.

Digitale Endgeräte wie Handy, Notebook etc. stellen Farben im RGB-Modus dar. Daher wird die Logo-Datei Ihrer Webseite in RGB-Umsetzung benötigt, damit die Farben unverfälscht dargestellt werden:

• SVG: In diesem Dateiformat haben Sie ein gestochen scharfes Logo, egal in welcher Skalierung. Der Hintergrund ist bei SVG-Dateien in der Regel transparent angelegt.
• PNG: PNG-Dateien können ebenfalls mit transparentem Hintergrund abgespeichert werden. Sollte Ihnen also keine SVG-Datei vorliegen, bietet sich die PNG-Datei an. Achten Sie bei diesem Dateiformat zwingend auf die Grösse des Endformats , damit es am Ende nicht verpixelt dargestellt wird.
• JPG: Bei diesem Dateiformat ist kein transparenter Hintergrund möglich. Dafür werden die Dateien ohne sichtbaren Qualitätsverlust komprimiert. JPGs weisen also in der Regel eine geringere Dateigrösse als PNG-Dateien auf, die der Ladezeit und somit der SEO zugutekommen (SVG-Dateien haben die geringste Dateigrösse). Doch beachten Sie hier ebenso wie bei PNG-Dateien, dass Ihr Logo im Endformat hochgeladen wird. Sonst könnte es verschwommen aussehen.

Damit Ihr Logo immer gestochen scharf aussieht, empfehlen wir Ihnen die Verwendung einer SVG-Datei. Diese besteht aus Vektoren (Punkten und Linien) und ist unendlich verlustfrei skalierbar. Das ist bei Daten, die aus Pixeln bestehen (JPG und PNG) nicht der Fall.

Logo einbinden

So laden Sie ein Logo hoch:

1. Navigieren Sie im Backend zu Avada by hhomepage > Optionen > Logo
2. Navigieren Sie zur entsprechenden Logo-Sektion (Standard Logo, Fixierter Kopfbereich Logo oder Logo für Mobilgeräte) und klicken Sie auf die Schaltfläche “Hochladen”, um Ihre Bilddatei hochzuladen.
3. Klicken Sie auf “Änderungen Speichern”

Logo Einstellungen

Avada bietet verschiedene Einstellungen, die Ihnen bei der Gestaltung und Ausrichtung Ihres Logos helfen. Diese Optionen befinden sich im Bereich Avada > Optionen > Logo > Logo und wirken sich nur auf das Standard Logo aus, das im Desktop-Modus in der Kopfzeile angezeigt wird. Wurde Ihre Homepage durch Hürlimann Homepages erstellt, sind hier bereits die optimalen Einstellungen für Ihre Webseite eingestellt und Sie brauchen keine Änderungen vorzunehmen.

Favicon

Das Favicon ist das kleine Symbol, das im Browser Tab neben dem Titel der Webseite dargestellt wird. Die Abkürzung Favicon steht für “favorite icon”. Es hilft Besuchern auf den ersten Blick Ihre Seite zu erkennen. Besonders bei vielen geöffneten Tabs erleichtert es den Nutzern, eine bestimmte Seite schnell in der Flut der geöffneten Tabs zu erkennen.

Zusätzlich zum Browser Tab wird das Favicon auch in den Bookmarks angezeigt, sollte jemand Ihre Seite bei sich im Browser speichern, und auch beim Speichern einer Webseite auf dem Homescreen (auf mobilen Geräten) wird das Favicon ersichtlich. Das Favicon ist somit eine sehr unterschätzte Methode, um den Internetauftritt abzurunden.

Favicon einbinden

Die Favicon-Optionen finden Sie unter Avada by hhomepage > Optionen > Logo > Favicons. Avada bietet mehrere Felder zum Hochladen verschiedener Arten von Favicons. Jedes hat seine eigene Grösse, die in der Beschreibung aufgeführt ist.

Um Favicons hinzuzufügen, klicken Sie einfach auf die Schaltfläche “Hochladen” neben dem entsprechenden Feld und wählen dann die Favicon-Datei aus, die Sie verwenden möchten.

• Favicon: Das Haupt-Favicon für Ihre Webseite. Das Bild muss mindestens 32px x 32px besser aber 64px x 64px gross sein. Das Favicon ist zwingend hochzuladen.
• Apple Touch Icon: Favicon für Apple iOS Geräte mit 180px x 180px. Diese Favicon-Variante ist optional. Wenn Sie nicht hochgeladen ist, wird das Haupt-Favicon verwendet.
• Android Geräte Icon: Favicon für Android-basierte Geräte mit 192px x 192px. Diese Favicon-Variante ist optional. Wenn Sie nicht hochgeladen ist, wird das Haupt-Favicon verwendet.
• Microsoft Edge Icon: Favicon für Microsoft Edge-Browser mit einer Grösse von 270px x 270px. Diese Favicon-Variante ist optional. Wenn Sie nicht hochgeladen ist, wird das Haupt-Favicon verwendet.