Ein Website-Logo hinzufügen

Zeige ein für deine Marke einzigartiges Logo in deinem Website-Header an.

Zuletzt aktualisiert: 17. Dezember 2024

Du kannst ein Logo-Bild hochladen, das anstelle deines Seitentitels angezeigt wird. Dies ist eine großartige Möglichkeit, auf deiner Website für deine Marke zu werben.

Durch Klicken auf Ihr Logo-Bild gelangt man immer auf Ihre Startseite.

Ein Video anschauen

Einen Seiten-Titel hinzufügen

Vergewissere dich, dass du den standardmäßigen Platzhalter-Text Dein Seiten-Titel durch den Namen deiner Website ersetzt hast, bevor du ein Logo hinzufügst. Dies hat folgende Gründe:

  • Der Seitentitel erstellt den Alternativtext des Logos.
  • Suchmaschinen indexieren den Seitentitel und können ihn in den Suchergebnissen anzeigen. Das Festlegen eines Seitentitels ist also eine bewährte Methode für die SEO.
  • Der Seitentitel kann in den Browser-Registerkarten angezeigt werden, abhängig von Ihrem SEO-Titelformat.

Näheres erfahren Sie hier: Einen Website-Titel hinzufügen.

Dein Logo-Bild vorbereiten

Für bestmögliche Ergebnisse empfehlen wir Folgendes:

  • Stelle vor dem Hochladen deines Logos sicher, dass es ungefähr die Höhe hat, in der es angezeigt werden soll. Wir benötigen keine genauen Abmessungen für Website-Logos. In Version 7.0 haben einige Templates jedoch eine maximale Höhe oder Breite des Logos. Weitere template-spezifische Details findest du unter Ändern der Größe eines Logos in Version 7.0.
  • Im Zweifelsfall ist es immer besser, mit einem größeren Bild zu beginnen. Kleinere Bilder können nach Anpassung der Bildgröße Pixel aufweisen.
  • Dein Logo kann folgende Formate haben: .jpg, .gif oder .png. Nähere Informationen findest du in den Anforderungen für Bilder.
  • Das Logo ersetzt den Website-Titel. Wie Sie Text in Ihr Logo einfügen, erfahren Sie in unseren Tipps weiter unten.

Wenn du noch kein Logo hast, kannst du eines mit Squarespace Logoerstellen. Es ist nicht möglich, Stockbilder für dein Logo zu verwenden.

Füge ein Logo-Bild hinzu

Wie du ein Logo-Bild auf einem Computer hinzufügst, hängt von der Version deiner Website ab. Du kannst auch ein Logo in der Squarespace App hinzufügen.

So fügst du ein Logo-Bild hinzu:

  1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
  2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
  3. Klicke auf den Titel oder das Logo deiner Website und dann auf das Bleistiftsymbol.
  4. Klicke in den Abschnitten Logo-Bild oder Logo-Bild auf Mobilgeräten auf +, um ein neues Bild hinzuzufügen:
    • Um ein Bild von deinem Gerät hochzuladen, wähle Datei hochladen aus.
    • Um ein Bild wiederzuverwenden, klicke auf Aus Bibliothek auswählen.
  5. Verwende die Schieberegler, um die Logo-Höhe auf reaktionsfähigen Bildschirmen oder auf Mobilgeräten zu ändern.
  6. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

So fügst du ein Logo-Bild hinzu:

  1. Fahre mit dem Mauszeiger auf einer beliebigen Seite über den Titel und klicke auf Bearbeiten. Dadurch wird das Menü Logo & Titel geöffnet. (Du kannst auch das Design-Menü öffnen und dann auf Logo & Titel klicken.)
  2. Scrolle zum Unterpunkt Logo-Bild. Ziehe dein Bild in den Bild-Uploader. Du kannst auch auf einen beliebigen Bereich innerhalb des Bild-Uploaders klicken, um eine Datei auf deinem Computer auszuwählen.
  3. Klicken Sie auf Speichern und aktualisieren Sie die Seite.

So fügst du ein Logo-Bild hinzu:

  1. Tippe auf Mehr, dann auf Design und dann auf Logo & Titel.
  2. Tippen Sie auf Logo.
  3. Tippe auf Bild hinzufügen.
  4. Wählen Sie ein Bild aus:
    • Ein neues Foto aufnehmen – Tippen Sie auf Foto aufnehmen oder Kamera.
    • Wählen Sie ein Bild von Ihrem Gerät aus – Tippen Sie auf Fotobibliothek oder Dateien.
    • Ein Bild von iCloud auswählen – Tippen Sie auf Einfügen von ....
  5. Tippen Sie auf Zurück, um zu den „Logo & Titel“-Einstellungen zurückzukehren, und tippen Sie dann auf Speichern, um Ihre Änderungen zu veröffentlichen.

Nachdem du ein Bild hinzugefügt hast, kannst du:

Anzeige des Logos

Normalerweise wird das Logo oben auf der Website angezeigt. Wie du dein Logo gestalten kannst, hängt von der Version deiner Website ab. Die Gestaltung des Logos wird nur auf einem Computer unterstützt.

Du kannst die Position und Größe des Logos sowohl für die Computer- als auch für die mobile Ansicht ändern:

  1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
  2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
  3. Wähle in der oberen rechten Ecke deines Bildschirms das Computer-Symbol für die Desktop-Ansicht aus.
  4. Klicke auf Design bearbeiten
  5. Klicke auf das aktuelle Layout, um alle Optionen zu überprüfen, und klicke dann auf das gewünschte Layout.
  6. Klicke in der oberen rechten Ecke deines Bildschirms auf das Mobil-Symbol und folge den gleichen Schritten, um die Position deines Logos für die mobile Ansicht festzulegen.  
  7. Klicke auf das Computer-Symbol, um zum Haupt-Header-Editor zurückzukehren.
  8. Klicke auf dein Logo und dann auf das Bleistiftsymbol.
  9. Verwende die Schieberegler, um die Logohöhe und die maximale Höhe deines Logos auf Mobilgeräten zu ändern. Dein gewähltes Header-Layout für den Computer kann die Höhe deines Logos einschränken.
  10. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Die Standardposition und die Optionen zum Verschieben deines Logos variieren je nach Vorlage und können auf Mobilgeräten unterschiedlich angezeigt werden. Weitere Informationen findest du unter Seitentitel und Logo-Anzeige.

Weitere Einzelheiten zu den Einstellungen Ihres Website-Logos finden Sie in den Stil-Optionen Ihres Templates oder in unseren Template-Anleitungen.

In den meisten Templates ist es möglich, die Größe des Logos anzupassen. In einigen Templates bestehen Beschränkungen hinsichtlich der maximalen Höhe oder Breite.

Ein Logo entfernen

Wie du ein Logo-Bild auf einem Computer entfernst, hängt von der Version deiner Website ab. Du kannst auch das Logo in der Squarespace-App entfernen. Wenn du ein Logo entfernst, wird dein Seitentitel wieder angezeigt.

Um das Seitenlogo zu entfernen, musst du die Kopfzeile bearbeiten:

  1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
  2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
  3. Klicke auf dein Logo und dann auf das Bleistiftsymbol.
  4. Klicke unter deinem Logo-Bild auf Ersetzen, um ein neues Logo auszuwählen. Um dein Logo zu löschen, klicke auf die drei Punkte und wähle Entfernen aus.
  5. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

So entfernst du das Seitenlogo:

  1. Öffne das Design-Menü und klicke dann auf Logo & Titel..
  2. Scrollen Sie nach unten und fahren Sie mit der Maus über das Logo-Bild. Klicken Sie auf das Papierkorb-Symbol, um das Bild zu löschen.
  3. Klicken Sie auf Speichern.
  1. Tippe auf Mehr, dann auf Design und dann auf Logo & Titel.
  2. Tippen Sie auf Logo.
  3. Tippen Sie unter dem Bild auf Entfernen.
  4. Tippen Sie auf Zurück, um zu den „Logo & Titel“-Einstellungen zurückzukehren, und tippen Sie dann auf Speichern, um Ihre Änderungen zu veröffentlichen.

Ein Logo mit Text verwenden

Es ist nicht möglich, ein Logo und einen Seitentitel gleichzeitig anzuzeigen. Verwende stattdessen ein Logo-Bild, das den Text des Seitentitels enthält.

Da Text in der Logo-Bilddatei von Suchmaschinen nicht indexierbar ist, empfehlen wir, den Text des Seitentitels bei Verwendung eines Logos im Feld Seitentitel beizubehalten.

Transparente Hintergründe

Um ein Logo ohne Hintergrundfarbe zu erstellen, stelle sicher, dass es sich bei deinem Logo um eine PNG-Datei mit transparentem Hintergrund handelt. Du kannst diese Software von Drittanbietern erstellen oder das Squarespace-Logo verwenden, um automatisch transparente Hintergründe zu erstellen.

Hinweis

Wenn du dein Bild mit unserem integrierten Bild-Editor bearbeitest, wird die Datei als JPG gespeichert und sämtliche Transparenzeffekte gehen verloren. Um das PNG- -Format beizubehalten, verwende stattdessen Drittanbieter-Software.

Durch Klicken auf Ihr Logo-Bild gelangt man immer auf Ihre Startseite. Der Logo-Hyperlink kann nicht mit einer anderen Seite Ihrer Website verknüpft werden, ohne benutzerdefinierten Code zu verwenden.

Bitte beachte, dass das Hinzufügen von Code zu deiner Website eine erweiterte Modifizierung ist und wir keine zusätzliche Hilfe zu diesem Thema anbieten können.

Ändern der Größe eines Logos auf Version 7.0

Tipp

Wenn deine Website auf Version 7.1 basiert, verwende die Header-Einstellungen, um die Logo-Größe zu ändern.

Wie du die Größe deines Logos änderst, hängt von deiner Template-Gruppe ab. Öffne das Design-Menü und verwende die folgenden Anpassungen, um dein Logo zu vergrößern oder zu verkleinern. 

Template-Gruppe Computer Mobilgeräte

Adirondack

Höhe des Logos. Maximale Höhe: 125 Pixel. Der Website-Titel wird immer angezeigt.

Avenue

Max. Größe des Logos. Maximale Größe: 300 Pixel. Logo-Größe auf Mobilgeräten. Maximale Größe: 300 Pixel.

Aviator

Logo-Größe und Logo-Größe der Info-SeiteMaximale Größe für beide Logos: 100 %. Logo-Größe auf Mobilgeräten und Logo-Größe der Info-Seite. Maximale Größe: 100 %.

Bedford

Logo Container Width (Logo-Containerbreite). Maximale Höhe: 100 Pixel.

Logo-Containerbreite. Maximale Höhe: 65 Pixel.

Brine

Logo-Breite im Abschnitt Kopfzeile: Markenführung. Maximale Breite: 320 Pixel. Logo-Breite im Abschnitt Mobilgerät: Markenführung. Maximale Breite: 240 Pixel (wird jedoch durch den Mobil-Breakpoint eingeschränkt).

Farro

Logo-Breite im Abschnitt Kopfzeile: Markenführung. Maximale Breite: 320 Pixel. Logo-Breite im Abschnitt Mobilgerät: Markenführung. Maximale Breite: 240 Pixel.

Five

Logo-Höhe (Banner) und Logo-Höhe (Navigation). Beide haben eine maximale Höhe von 480 Pixel.

Siehe Desktop-Computer. Wird nur angezeigt, wenn Banner-Inhalt: Logo-Slogan im Website-Titel ausgewählt ist.

Flatiron

Höhe des Logo-Bildes. Maximale Höhe: 200 Pixel. Siehe Desktop-Computer.

Forte

Max. Höhe des Logo-Bildes. Maximale Höhe: 200 Pixel. Siehe Desktop-Computer.

Galapagos

Breite des Website-Logos Maximale Breite: 100 %. Für Mobilgeräte-Logos: Navigationshöhe.

Ishimoto

Größe des Logo-Bildes. Maximale Größe: 240 Pixel. Siehe Desktop-Computer.

Momentum

Höhe des Logo-Bildes. Maximale Höhe: 100 Pixel. Feste Höhe.

Montauk

Max. Größe des Logos. Maximale Größe: 300 Pixel. Siehe Desktop-Computer.

Native

Logo-Breite. Maximale Breite: 1.280 Pixel. Siehe Desktop-Computer. Maximale Höhe: 300 Pixel.

Pacific

Logo-Breite. Maximale Breite: 300 Pixel. Siehe Desktop-Computer. Maximale Höhe: 70 Pixel.

Skye

Höhe des Logos. Maximale Höhe: 120 Pixel. Siehe Desktop-Computer.

Supply

Größe des Logos. Maximale Größe: 160 Pixel. Feste Höhe. Aktiviere die Option Website-Titel in mobiler Kopfzeile anzeigen, um stattdessen den Website-Titel einzublenden.

Tremont

Höhe des Logos. Maximale Höhe: 150 Pixel. Tablet: Logo-Höhe und Mobilgeräte: Logo-HöheMaximale Höhe für beide: 150 Pixel.

Wells

Breite des Logo-Bildes. Maximale Breite: 600 Pixel. Größe des Logo-Bilds auf Mobilgeräten. Maximale Größe: 255 Pixel.
Wexley Max. Größe des Logo-Bildes. Maximale Größe: 200 Pixel. Siehe Desktop-Computer.

York

Max. Logo-Höhe. Maximale Höhe: 300 Pixel. Logo-Breite im Abschnitt Mobilgerät: Leiste. Maximale Breite: 240 Pixel.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.