Fügen Sie ein Favicon hinzu Squarespace

Verbessern Sie die Ästhetik Ihrer Website. Erfahren Sie, wie Sie in den Squarespace-Einstellungen ein Clean-Tab-Favicon konfigurieren.

Das Hinzufügen eines Favicons zu Squarespace dauert nur wenige Minuten. Sie benötigen ein passendes Favicon-Bild, Zugriff auf die richtige Squarespace-Website und die Möglichkeit, deren Favicon-Einstellungen zu öffnen. In dieser Anleitung erfahren Sie, wie Sie ein Favicon vorbereiten, es auf Squarespace hochladen, überprüfen, ob es funktioniert, es ersetzen oder entfernen und wie Sie Fälle beheben, in denen das neue Symbol nicht sofort angezeigt wird.

Was ist ein Squarespace-Favicon?

Ein Favicon, auch Browsersymbol genannt, ist das kleine quadratische Bild, das mit Ihrer Website verknüpft ist. Es erscheint üblicherweise neben dem Titel Ihrer Seite in Browser-Registerkarten und Lesezeichen. Je nach Browser oder Gerät kann es auch in anderen Browseroberflächen und teilweise in Suchergebnissen erscheinen.

Jede Squarespace-Site beginnt mit dem Standard-Cube-Favicon von Squarespace, es sei denn, Sie fügen ein benutzerdefiniertes hinzu. Wenn Sie es durch Ihr eigenes Symbol ersetzen, erhalten Besucher eine erkennbare visuelle Identifizierung Ihrer Website.

Ein Favicon ist vom Logo Ihrer Website getrennt. Ihr Logo erscheint möglicherweise prominent im Header Ihrer Website, während das Favicon so gestaltet ist, dass es bei sehr kleiner Größe erkennbar bleibt.

Was sollten Sie vorbereiten, bevor Sie ein Favicon zu Squarespace hinzufügen?

Bereiten Sie vor dem Öffnen von Squarespace das Bild vor, das Sie als Favicon verwenden möchten. Die aktuelle Favicon-Anleitung von Squarespace empfiehlt Folgendes:

  • PNG verwenden: Squarespace empfiehlt .png-Dateien für Favicons und erlaubt das Hochladen von .ico-Dateien nicht.
  • Verwenden Sie ein quadratisches Bild: Eine quadratische Leinwand funktioniert am besten, da Favoriten als kleine quadratische Symbole angezeigt werden.
  • Streben Sie 100 × 100 Pixel bis 300 × 300 Pixel an: Squarespace empfiehlt diesen Bereich für Favicon-Bilder. Obwohl Favicons in sehr kleinen Abmessungen wie 16 × 16 Pixel angezeigt werden können, funktioniert ein größeres Quellbild in diesem Bereich in allen Browsern besser.
  • Halten Sie die Datei unter 100 KB: Squarespace gibt an, dass Favicon-Dateien 100 KB nicht überschreiten dürfen.
  • Verwenden Sie ein einfaches Design: Ein Favicon ist viel kleiner als ein normales Logo, sodass komplizierte Abbildungen und langer Text möglicherweise nicht mehr erkennbar sind.
  • Verwenden Sie starken Kontrast: Das Symbol sollte auf hellen und dunklen Browseroberflächen unterscheidbar bleiben.
  • Vermeiden Sie übermäßige Details: Feine Linien, kleine Schrift und mehrere visuelle Elemente sind bei Favicon-Größe schwer zu erkennen.
  • Beginnen Sie mit einer qualitativ hochwertigen Quelle: Das Verkleinern einer sauberen, scharfen Quelle führt im Allgemeinen zu einem besseren Ergebnis als das Vergrößern eines winzigen Bildes.

Welches Dateiformat empfiehlt Squarespace?

Speziell für ein Favicon empfiehlt Squarespace PNG und unterstützt das Hochladen einer .ico-Datei über seinen Favicon-Uploader nicht.

Verwechseln Sie die allgemeine Unterstützung für das Hochladen von Bildern durch Squarespace nicht mit Favicon-spezifischen Anforderungen. Squarespace unterstützt mehrere Formate in anderen Bildbereichen, die Favicon-Dokumentation empfiehlt jedoch ausdrücklich PNG.

Wie fügt man Squarespace ein Favicon hinzu?

Der aktuelle Squarespace-Prozess verwendet ein spezielles Favicon-Panel. Der genaue Weg zu diesem Bereich kann je nach verwendeter Squarespace-Benutzeroberfläche variieren. Konzentrieren Sie sich daher darauf, das Favicon oder die Browser-Symboleinstellung der Website zu finden, anstatt sich auf einen alten Menüpfad zu verlassen.

  1. Melden Sie sich bei Squarespace an: Öffnen Sie Squarespace und melden Sie sich bei dem Konto an, das Ihre Website verwaltet. Stellen Sie sicher, dass Sie über Bearbeitungsberechtigungen für die Site verfügen, deren Favicon Sie ändern möchten.
  2. Öffnen Sie die richtige Website: Öffnen Sie in Ihrem Squarespace-Konto-Dashboard die Website, die Sie bearbeiten möchten. Dies ist wichtig, wenn Ihr Konto mehrere Squarespace-Websites verwaltet. Durch das Hochladen eines Favicons auf eine Site wird das Favicon auf einer anderen Site nicht geändert.
  3. Öffnen Sie die Favicon-Einstellungen: Navigieren Sie durch die Einstellungen oder Design-Steuerelemente der Site, bis Sie das Favicon-Bedienfeld erreichen. In der aktuellen Hilfedokumentation von Squarespace wird dieses Ziel speziell als Favicon-Panel bezeichnet. In älteren Tutorials wird die Einstellung möglicherweise mit Bezeichnungen wie „Browser-Symbol“ beschrieben oder in verschiedenen Bereichen der Benutzeroberfläche platziert. Gehen Sie nicht davon aus, dass ein älterer Pfad in Ihrem Konto noch identisch ist.
  4. Laden Sie Ihr Favicon hoch: Ziehen Sie im Favicon-Bedienfeld Ihr Favicon-Bild in den Uploader oder klicken Sie auf den Uploader, um die Datei von Ihrem Computer auszuwählen. Wählen Sie das von Ihnen vorbereitete PNG-Favicon aus. Warten Sie, bis der Upload abgeschlossen ist. Überprüfen Sie, ob das hochgeladene Bild im Favicon-Bereich erscheint. Squarespace unterstützt derzeit ein optionales alternatives Favicon für den Dunkelmodus. Bevor Sie die Dark-Mode-Version hinzufügen können, muss ein Standard-Favicon hinzugefügt werden.
  5. Speichern Sie die Änderungen: Klicken Sie auf Speichern, nachdem das Bild hochgeladen wurde. Das Speichern ist wichtig, da das Hochladen oder Auswählen des Bildes allein das veröffentlichte Favicon nicht ersetzt, bis die Änderung gespeichert wird. Die aktuellen Anweisungen von Squarespace weisen Benutzer ausdrücklich darauf hin, nach dem Hochladen der Bilder auf „Speichern“ zu klicken.
  6. Öffnen Sie Ihre Website und überprüfen Sie die Browser-Registerkarte: Öffnen Sie die veröffentlichte URL Ihrer Website in einem Browser. Schauen Sie sich die Browser-Registerkarte neben dem Seitentitel an. Ihr neues Favicon sollte das Standard-Squarespace-Symbol ersetzen.

Wenn Sie immer noch das vorherige Favicon sehen, gehen Sie nicht sofort davon aus, dass der Upload fehlgeschlagen ist. Browser können Favicons aggressiv zwischenspeichern, sodass das alte Symbol möglicherweise weiterhin angezeigt wird, selbst nachdem das neue Favicon erfolgreich gespeichert wurde.

Wo ist die Favicon-Einstellung in Squarespace?

Die Benutzeroberfläche hat sich im Laufe der Zeit verändert, weshalb verschiedene Squarespace-Tutorials unterschiedliche Navigationspfade anzeigen können. In der aktuellen Squarespace-Dokumentation wird als Ziel das Favicon-Panel identifiziert.

Möglicherweise stoßen Sie auf ältere Anweisungen, die sich auf Folgendes beziehen:

  • Browser-Symbol
  • Logo und Titel
  • Design
  • Eine Browser-Symboleinstellung innerhalb der Design- oder Branding-Steuerelemente der Website

Diese Etiketten sollten nicht als allgemeingültig angesehen werden. Squarespace kann die Position oder Benennung von Steuerelementen zwischen Schnittstellen und Plattformversionen ändern. Die wichtige Einstellung ist speziell für das Favicon oder Browsersymbol der Website vorgesehen. Es handelt sich nicht um dieselbe Einstellung wie das Logo Ihrer Website oder den Seitentitel.

Wie erstellt man ein Favicon für Squarespace?

Sie müssen ein Favicon nicht von Grund auf entwerfen. Der einfachste Ansatz hängt davon ab, über welche Markenwerte Sie bereits verfügen.

Erstellen Sie ein Favicon aus Ihrem Logo

Wenn Sie bereits ein Logo haben, erstellen Sie eine vereinfachte quadratische Version davon. Verwenden Sie nicht automatisch das gesamte horizontale Logo. Ein langer Firmenname kann unleserlich werden, wenn er auf die Größe eines Favicons reduziert wird. Ein besserer Ansatz ist oft die Verwendung eines erkennbaren Symbols aus dem Logo, einer einzelnen Initiale, eines Monogramms oder eines vereinfachten Markenzeichens.

Erstellen Sie ein Favicon aus Text oder Initialen

Verwenden Sie für ein textbasiertes Favicon einen oder zwei prominente Buchstaben anstelle eines gesamten Firmennamens. Beispielsweise könnte ein Unternehmen namens Digital Marketing Solutions DM verwenden, anstatt zu versuchen, den vollständigen Namen in das Symbol einzufügen. Verwenden Sie eine fette, einfache Schriftart und genügend Kontrast, damit die Buchstaben erkennbar bleiben.

Konvertieren Sie ein vorhandenes PNG in ein Favicon

Wenn Sie bereits über ein passendes PNG-Logo oder -Symbol verfügen, können Sie es mit einem Bildkonvertierungstool in Favicon-fähige Grafiken umwandeln. Zum Beispiel, PNGtoFavicon.com kann ein PNG-Bild in ein Favicon umwandeln. Dies ist nützlich, wenn Sie bereits über ein quadratisches PNG verfügen, aber eine Favicon-orientierte Datei für Ihre Website benötigen.

Bevor Sie das Ergebnis auf Squarespace hochladen, überprüfen Sie, ob das endgültige Bild den Favicon-Anforderungen von Squarespace entspricht, insbesondere dem PNG-Format, den quadratischen Abmessungen und einer maximalen Dateigröße von 100 KB.

Halten Sie das Design bei kleinen Größen erkennbar

Der wichtigste Designtest ist einfach: Verkleinern Sie das Symbol erheblich und betrachten Sie es, ohne es zu vergrößern. Wenn Sie das Symbol oder den Buchstaben nicht schnell identifizieren können, vereinfachen Sie es. Ein Favicon funktioniert normalerweise besser als auffälliges visuelles Zeichen als als Miniaturversion Ihres gesamten Logos.

Wie überprüfen Sie, ob Ihr Squarespace-Favicon funktioniert?

Nachdem Sie das Favicon gespeichert haben, überprüfen Sie es auf der tatsächlich veröffentlichten Website.

  • Überprüfen Sie die Browser-Registerkarte: Öffnen Sie Ihre Website und sehen Sie sich das Symbol neben dem Seitentitel im Browser-Tab an. Dies ist der direkteste Test, da Browser-Registerkarten einer der Hauptorte sind, an denen Favicons angezeigt werden.
  • Testen Sie eine neue Browsersitzung: Wenn das alte Symbol weiterhin sichtbar ist, öffnen Sie ein privates oder Inkognito-Fenster, besuchen Sie Ihre Website und überprüfen Sie die Browser-Registerkarte erneut. Dies hilft festzustellen, ob das Problem durch zwischengespeicherte Favicon-Daten in Ihrer normalen Browsersitzung verursacht wird.
  • Überprüfen Sie einen anderen Desktop-Browser: Testen Sie die Website in einem anderen Browser wie Chrome, Edge, Firefox oder Safari. Wenn ein Favicon in einem Browser korrekt angezeigt wird, in einem anderen jedoch nicht, kann dies eher auf ein browserspezifisches Caching- oder Anzeigeverhalten als auf ein Squarespace-Upload-Problem hinweisen. Safari kann Favoriten anders als andere Browser anzeigen. Squarespace weist darauf hin, dass Safari das Favicon möglicherweise anzeigt, wenn Sie auf die Adressleiste klicken oder wenn mehrere Tabs geöffnet sind, und für den Kontrast einen Rahmen oder Hintergrund hinzufügen kann.
  • Auf dem Handy prüfen: Betrachten Sie das Fehlen eines Favicons in einem mobilen Browser nicht als Beweis dafür, dass der Upload fehlgeschlagen ist. Squarespace gibt an, dass die Favicon-Anzeige auf Mobilgeräten vom mobilen Browser abhängt und in einigen Fällen das Favicon überhaupt nicht angezeigt wird.

Warum wird mein Squarespace-Favicon nicht angezeigt?

Ein Favicon, das nicht sofort angezeigt wird, ist in der Regel eher ein Caching- oder Konfigurationsproblem als ein Grund, die gesamte Website neu zu erstellen.

Browser-Cache

Problem: Ihr Browser zeigt immer noch das alte Favicon an.
Fix: Leeren Sie den Browser-Cache, schließen Sie den Browser, öffnen Sie ihn erneut und besuchen Sie dann Ihre Website erneut. Squarespace empfiehlt ausdrücklich, den Browser-Cache zu leeren und den Browser neu zu starten, wenn ein Favicon nicht sofort aktualisiert wird.

Das Favicon wurde nicht gespeichert

Problem: Das Bild wurde hochgeladen, aber die Änderung wurde nicht gespeichert.
Fix: Kehren Sie zum Favicon-Bedienfeld zurück, bestätigen Sie, dass das richtige Bild vorhanden ist, und klicken Sie auf Speichern.

Sie haben die falsche Website bearbeitet

Problem: Das Favicon sieht unverändert aus, da das Bild auf eine andere Squarespace-Site in Ihrem Konto hochgeladen wurde.
Fix: Bestätigen Sie den Namen und die Domain der Website, bevor Sie das Favicon ändern.

Das Bild entspricht nicht den Favicon-Anforderungen

Problem: Die Datei ist zu groß, hat ein ungeeignetes Format oder weist Abmessungen auf, die zu einem schlechten Ergebnis führen.
Fix: Exportieren Sie das Bild erneut als PNG, halten Sie es unter 100 KB und verwenden Sie ein quadratisches Bild zwischen 100 × 100 Pixel und 300 × 300 Pixel, wie von Squarespace empfohlen.

Das Favicon wurde kürzlich geändert

Problem: Squarespace hat das neue Favicon gespeichert, aber Ihr Browser zeigt immer noch eine ältere Version an.
Fix: Testen Sie es in einem Inkognito-/privaten Fenster oder einem anderen Browser, bevor Sie weitere Änderungen vornehmen.

Sie testen die falsche Domain oder Seite

Problem: Sie überprüfen eine Staging-, Vorschau-, integrierte Squarespace-Domain oder eine andere Domain als die, die Sie bearbeitet haben.
Fix: Öffnen Sie die genaue veröffentlichte Website-URL, die mit der von Ihnen geänderten Squarespace-Website verknüpft ist.

Verhalten mobiler Browser

Problem: Das Favicon erscheint auf dem Desktop, aber nicht auf Ihrem Telefon.
Fix: Überprüfen Sie dieselbe Website in einem Desktop-Browser, bevor Sie davon ausgehen, dass der Upload fehlgeschlagen ist. Das Verhalten mobiler Favicons variiert je nach Browser und Squarespace weist darauf hin, dass mobile Browser möglicherweise überhaupt keine Favicons anzeigen.

Wie lange dauert die Aktualisierung eines Squarespace-Favicons?

Es sind drei verschiedene Ereignisse zu unterscheiden:

  1. Squarespace speichert das Favicon: Dies geschieht, wenn Sie das Bild hochladen und die Favicon-Einstellungen speichern.
  2. Ihre Website bedient das neue Favicon: Die gespeicherte Site-Konfiguration muss den Besuchern das aktualisierte Symbol bereitstellen.
  3. Ihr Browser zeigt das neue Favicon an: Der Browser verwendet möglicherweise weiterhin ein zuvor zwischengespeichertes Favicon.

Da Browser Favicon-Daten speichern können, gibt es keinen zuverlässigen universellen Aktualisierungszeitpunkt, der garantiert, dass das neue Symbol sofort angezeigt wird. Squarespace warnt ausdrücklich davor, dass Browser bei zwischengespeicherten Favicons hartnäckig bleiben können. Testen Sie ein privates Browserfenster oder einen anderen Browser, bevor Sie zu dem Schluss kommen, dass die Änderung fehlgeschlagen ist.

Wie ändert oder ersetzt man ein Squarespace-Favicon?

Das Ersetzen eines vorhandenen Favicons erfolgt im Wesentlichen nach dem gleichen Vorgang wie das erstmalige Hinzufügen eines Favicons.

  • Melden Sie sich bei Squarespace an.
  • Öffnen Sie die Website, die Sie ändern möchten.
  • Öffnen Sie das Favicon-Bedienfeld.
  • Wählen Sie den vorhandenen Favicon-Uploader aus.
  • Laden Sie das neue PNG-Bild hoch. (Wenn Sie ein Dark-Mode-Favicon verwenden, aktualisieren Sie diese Version bei Bedarf separat.)
  • Klicken Sie auf Speichern.
  • Öffnen Sie die veröffentlichte Website und überprüfen Sie die Browser-Registerkarte. Testen Sie in einem privaten Fenster, ob das vorherige Favicon weiterhin angezeigt wird.

Squarespace erlaubt ein optionales Dark-Mode-Favicon, aber das Standard-Favicon muss vorhanden sein, bevor eine alternative Dark-Mode-Version hinzugefügt werden kann.

Wie entferne ich ein Squarespace-Favicon?

Wenn Sie Ihr benutzerdefiniertes Favicon nicht mehr verwenden möchten, öffnen Sie die Favicon-Einstellungen und suchen Sie nach der verfügbaren Entfernungs- oder Löschsteuerung neben dem hochgeladenen Bild. Die genaue Steuerung kann je nach aktueller Squarespace-Benutzeroberfläche variieren. Verlassen Sie sich daher nicht auf ein älteres Tutorial, das einen bestimmten Schaltflächennamen angibt.

Nachdem Sie das benutzerdefinierte Favicon entfernt haben, speichern Sie die Einstellungen und testen Sie die Website erneut. Squarespace gibt an, dass Websites ohne benutzerdefiniertes Favicon mit dem Standard-Cube-Favicon beginnen.

Häufige Squarespace-Favicon-Fehler, die Sie vermeiden sollten

  • Verwendung eines komplizierten Bildes: Vereinfachen Sie das Design, damit das Symbol auch bei kleiner Größe erkennbar bleibt.
  • Verwendung eines kleinen Quellbildes: Beginnen Sie mit einer sauberen, ausreichend großen Quelle, anstatt ein Bild mit niedriger Auflösung zu vergrößern.
  • Schlechter Kontrast: Ein Symbol, das mit dem Hintergrund eines Browsers verschmilzt, kann unsichtbar erscheinen.
  • Zu viel Text verwenden: Vollständige Firmennamen bleiben in einem Favicon selten lesbar.
  • Falschen Dateityp hochladen: Squarespace empfiehlt PNG für Favoriten und erlaubt keine .icon-Uploads.
  • Überschreitung der Dateigrößenbeschränkung: Favicon-Dateien dürfen 100 KB nicht überschreiten.
  • Vergessen zu speichern: Speichern Sie immer, nachdem das Bild hochgeladen wurde.
  • Nur einen Browser prüfen: Verwenden Sie beim Testen einen anderen Browser oder ein privates Fenster.
  • Angenommen, ein zwischengespeichertes Symbol bedeutet, dass der Upload fehlgeschlagen ist: Leeren Sie den Cache, bevor Sie unnötige Änderungen vornehmen.
  • Erwarten Sie, dass sich mobile Browser wie Desktop-Browser verhalten: Die Unterstützung und Anzeige mobiler Favicons variiert je nach Browser.

Häufig gestellte Fragen zu Squarespace Favicon

Kann ich Squarespace ein PNG-Favicon hinzufügen?

Ja. Squarespace empfiehlt PNG für Favicon-Uploads. In der aktuellen Squarespace-Favicon-Dokumentation heißt es außerdem, dass .icon-Dateien nicht über die Favicon-Einstellung hochgeladen werden können.

Welche Größe sollte ein Squarespace-Favicon haben?

Squarespace empfiehlt, ein Favicon mit einer Größe zwischen 100 × 100 Pixel und 300 × 300 Pixel hochzuladen. Außerdem heißt es, dass die Favicon-Datei nicht größer als 100 KB sein darf.

Warum wird mein Squarespace-Favicon nicht angezeigt?

Die häufigste Erklärung ist das Browser-Caching. Leeren Sie Ihren Browser-Cache, starten Sie den Browser neu oder testen Sie die Website in einem privaten Fenster oder einem anderen Browser. Bestätigen Sie außerdem, dass Sie das Favicon gespeichert haben und überprüfen Sie die korrekte veröffentlichte Website.

Kann ich mein Squarespace-Favicon ändern?

Ja. Öffnen Sie das Favicon-Bedienfeld, laden Sie das Ersatzbild hoch und speichern Sie die Änderung.

Ändert Squarespace automatisch die Größe eines Favicons?

In der aktuellen Dokumentation von Squarespace wird empfohlen, Favicon-Grafiken zwischen 100 × 100 Pixel und 300 × 300 Pixel hochzuladen. Dabei wird darauf hingewiesen, dass Favicons in sehr kleinen Größen wie 16 × 16 Pixel angezeigt werden. Der sicherste Ansatz besteht darin, das Bild in einer geeigneten Quadratgröße vorzubereiten, anstatt sich auf eine winzige Quelldatei zu verlassen.

Wie erstelle ich ein Favicon für Squarespace?

Erstellen Sie ein einfaches quadratisches Symbol aus Ihrem Logo, Ihren Initialen oder einem erkennbaren Markensymbol. Exportieren Sie es als PNG, halten Sie es unter 100 KB und verwenden Sie Abmessungen zwischen 100 × 100 Pixel und 300 × 300 Pixel. Ein Konvertierungstool wie z PNGtoFavicon.com kann dabei helfen, ein vorhandenes PNG in ein Favicon-fähiges Bildmaterial umzuwandeln.

Wie lange dauert die Aktualisierung eines Squarespace-Favicons?

Es gibt keinen zuverlässigen, universellen Zeitpunkt für die Aktualisierung der Browseranzeige. Squarespace kann die Änderung sofort speichern, der Browser zeigt jedoch möglicherweise weiterhin eine zwischengespeicherte Version des vorherigen Favicons an. Leeren Sie den Cache oder testen Sie es in einem privaten Fenster, wenn Sie das Update überprüfen.

Kann ich mein Logo als Squarespace-Favicon verwenden?

Ja. Ein Logo kann als Favicon verwendet werden, es sollte jedoch bei Bedarf vereinfacht werden, damit es auch bei kleinen Abmessungen erkennbar bleibt. Squarespace weist außerdem darauf hin, dass das eigene Squarespace-Logo-Tool PNG-Logos erstellen kann, die als Favoriten verwendet werden können.

Abschluss

Um ein Favicon zu Squarespace hinzuzufügen, bereiten Sie ein einfaches quadratisches PNG vor, öffnen Sie das Favicon-Bedienfeld der Site, laden Sie das Bild hoch und speichern Sie die Änderung. Überprüfen Sie es dann in einem Browser-Tab. Der wichtigste Punkt zur Fehlerbehebung ist das Caching. Ein erfolgreicher Favicon-Upload wird möglicherweise nicht sofort angezeigt, da Browser das vorherige Favicon beibehalten können. Testen Sie in einem privaten Fenster, leeren Sie den Cache oder überprüfen Sie einen anderen Browser, bevor Sie davon ausgehen, dass der Squarespace-Upload fehlgeschlagen ist.