TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

9

Favicon (Kurzform des Favoritensymbols) ist ein kleines Symbol, das im Browser angezeigt wird und Besuchern hilft, sich an Ihre Marke zu erinnern. Einige Browser zeigen das Favicon in der Adressleiste näher an der URL an und einige zeigen auf der Registerkarte näher am Titel Ihrer Seite an. Dies ist eine Pro-Funktion in Weebly. Befolgen Sie die folgenden Schritte, um ein Favicon auf einfache Weise zur kostenlosen Weebly-Site hinzuzufügen, ohne auf ein Pro-Konto zu aktualisieren.

Wie füge ich ein Favicon in Weebly hinzu?

Wir werden die folgenden Themen in diesem Artikel besprechen:

  • Verwenden der .ico-Datei für das Favicon, ohne eine zusätzliche Seite zu erstellen.
  • Verwenden Sie PNG oder JPEG oder eine beliebige Bilddatei mit einer zusätzlichen Seite.
  • Favicon für Weebly-Pro-Benutzer.

Angebot: Hosten Sie Ihre Weebly- und WordPress-Sites auf Bluehost für 2,95 USD pro Monat.

1 Verwenden der ICO-Datei

Schritt 1: Bereiten Sie Ihr Favicon vor

Sie benötigen ein Logo-Bild, bevor Sie ein Favicon zu Ihrer Site hinzufügen können. Ihr Logo kann in jedem Standardbildformat wie JPEG und PNG vorliegen. Sobald Ihr Logo fertig ist, können Sie es mit einem der im Internet verfügbaren kostenlosen Favicon-Generatoren in eine .ico-Datei konvertieren.

Ein solcher Favicon-Generator ist „ freefavicon.com “. Gehen Sie zur Site und wählen Sie Ihr Bild aus, um es in eine ICO-Datei zu konvertieren. Sie können auch eine animierte Version erstellen, indem Sie dem Favicon einen Lauftext hinzufügen. Wenn Sie mit Ihrer Favicon-Vorschau zufrieden sind, laden Sie die Datei „favicon.ico” auf Ihren lokalen Computer herunter.

Schritt 2: Favicon auf Ihre Weebly-Site hochladen

Nachdem Sie Ihre .ico-Datei haben, gehen Sie zu Ihrem Weebly-Konto und bearbeiten Sie die Site, der Sie ein Favicon hinzufügen möchten. Wählen Sie im Weebly-Editor auf der Registerkarte „Theme” die Option „ HTML/CSS bearbeiten “.

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

HTML-CSS in Weebly bearbeiten

Klicken Sie auf das „+”-Symbol neben „Assets”, wählen Sie die Option „Datei(en) hochladen” aus der Dropdown-Liste und laden Sie Ihre favicon.ico-Datei hoch.

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

Favicon auf der kostenlosen Weebly-Site hochladen

Sie können sehen, dass Ihr Dateiname unter "Assets" aufgeführt ist, nachdem Sie ihn hochgeladen haben.

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

Hochgeladene Favicon-Datei im Weebly Theme Editor anzeigen

Beachten Sie, dass das Bild der Favicon-Datei möglicherweise nicht wie andere Bilder sichtbar ist, was kein Problem darstellen sollte. Sie können es anzeigen, wenn Sie die veröffentlichte Site im Browser anzeigen. Speichern Sie Ihre Änderungen und Sie müssen einen Designnamen zum Speichern angeben, wenn Sie das Design zum ersten Mal bearbeiten. Der Standardlink einer Bilddatei in Weebly lautet wie folgt:

http://.weebly.com/files/theme/.ico

Ersetzen Sie „Ihr Site-Name” und „Image Name” durch die URL Ihrer Site und den Namen Ihrer Favicon-Datei. Stellen Sie sicher, dass Sie diese Favicon-URL in einem Browser öffnen können. Wenn diese URL nicht funktioniert, klicken Sie mit der rechten Maustaste auf das Bild und kopieren Sie die URL. Es sollte wie folgt aussehen:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/xxxxx/files/favicon.ico

Schritt 3: Verknüpfen Sie Ihr Favicon

Gehen Sie zum Abschnitt „Einstellungen > SEO > Header-Code ” und fügen Sie den folgenden Code ein:

<link rel=”Verknüpfungssymbol” href=”Ihr Favicon-Link”/>

Ersetzen Sie „Ihr Favicon-Link” durch die URL Ihres Favicons.

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

Favicon-Link im Weebly-Header-Code-Abschnitt hinzufügen

Speichern Sie Ihre Einstellungen und veröffentlichen Sie Ihre Site.

Hinweis: Anstatt den Code auf Site-Ebene hinzuzufügen, können Sie den Code auch in den Abschnitt „Header-Code” jeder Seite unter „Seiten > Seite auswählen > SEO-Einstellungen > Header-Code” einfügen. Auf diese Weise können Sie mehrere Favicons hochladen und verschiedene Symbole mit verschiedenen Seiten Ihrer Weebly-Site verknüpfen.

Schritt 4: Testen Sie es in verschiedenen Browsern

Der letzte Schritt besteht darin, Ihr Favicon zu testen, indem Sie Ihre Website in verschiedenen Webbrowsern wie Firefox, Chrome und Edge öffnen. Überprüfen Sie die Übersichtlichkeit und schauen Sie in verschiedenen Browsern und passen Sie bei Bedarf Ihre Favicon-Größe an.

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

Favicon im Browser prüfen

Manchmal kann es länger dauern, bis das Favicon im Browser angezeigt wird. Sie können versuchen, den Cache zu aktualisieren, den Cache zu leeren oder den Browser zu schließen und zu öffnen.

2 Verwenden einer PNG- oder JPEG-Bilddatei

Heutzutage überschreibt Weebly die .ico-Datei mit ihrem Favicon-Image. Daher funktioniert die obige Methode möglicherweise nicht in allen Fällen. Versuchen Sie in einem solchen Fall diese Methode. Auch wenn Sie keine .ico-Datei erstellen können oder nicht daran interessiert sind, das Design zu ändern, ist diese Methode nützlich.

Befolgen Sie die folgenden Anweisungen:

  • Erstellen Sie eine neue Seite unter der Registerkarte "Seiten" und benennen Sie sie nach Belieben, z. B. als "Favicon".
  • Ziehen Sie das Element „Bild” per Drag & Drop auf diese Seite und laden Sie Ihr Favicon-Bild hoch. Das Bild sollte .png oder .jpg oder ein anderes Standardbildformat sein.
  • Denken Sie daran, dass Sie keine .ICO-Datei mit einem Bildelement hochladen können. Sie sehen eine Fehlermeldung mit einem ungültigen Dateityp und die Datei muss eine JPEG-, GIF- oder PNG-Datei sein.
  • Veröffentlichen Sie Ihre Website und kopieren Sie den Bildlink, der so aussehen sollte:

http://.weebly.com/uploads/1/3/4/0/13404245/541135_orig.png

  • Gehen Sie zu „Einstellungen > SEO > Header-Code” und fügen Sie den folgenden Code ein:

<link rel=”Verknüpfungssymbol” href=”Ihr Bild-Link”/>

  • Veröffentlichen Sie Ihre Site und das Favicon wird jetzt im Browser angezeigt!!!

2.1. Favicon-Seite ausblenden

Jeder kann Ihre Favicon-Seite sehen, die ein winziges Bild enthält. Daher ist es notwendig, diese Seite vor Benutzern und Suchmaschinen zu verbergen.

  • Gehen Sie zur Registerkarte "Seiten" und aktivieren Sie "In der Navigation ausblenden", um die Favicon-Seite aus dem Menü zu entfernen.
  • Gehen Sie zu „SEO-Einstellungen” der Seite und wählen Sie „Diese Seite vor Suchmaschinen ausblenden”, um die Seite vor Suchmaschinen-Crawlern auszublenden.
  • Legen Sie die "Sichtbarkeit" der Seite mit dem Site-Passwort fest, damit selbst Benutzer die URL kennen, auf die sie nicht zugreifen können.

3 Weebly Favicon-Option für Premium-Benutzer

Benutzer des Premium-Plans können das Favicon hochladen, um ihre Website professionell aussehen zu lassen. Weebly stellt Ihnen kein Tool zum Erstellen Ihres Favicons zur Verfügung und schlägt auch keine Bilder für Ihr Favicon vor. Sie müssen Ihre eigene .ico-Favicon-Bilddatei mit der entsprechenden Größe vorbereiten.

3.1. Wie wird hochgeladen?

  • Melden Sie sich bei Ihrem Weebly Pro-Konto an und bearbeiten Sie die Site, die Sie als Favicon hochladen möchten.
  • Gehen Sie zum Abschnitt "Allgemein ", der auf der Registerkarte " Einstellungen " der Website verfügbar ist .
  • Laden Sie Ihr Favicon wie im Bild unten gezeigt hoch.
  • Veröffentlichen Sie Ihre Site und checken Sie sie im Browser ein (Es kann einige Zeit dauern, bis das Favicon im Browser angezeigt wird)

Wie füge ich Favicon zu einer kostenlosen Weebly-Site hinzu?

Favicon für Weebly Pro-Benutzer

Angebot: Hosten Sie Ihre Weebly-Sites auf SiteGround mit 60% Rabatt.

3.2. Funktionen der Weebly Favicon-Option

  • Laden Sie einfach Ihre Favicon-Bilddatei hoch.
  • Weebly aktiviert das Favicon für Ihre Site in kurzer Zeit automatisch.
  • Unterstützt in allen Browsern wie Chrome, Firefox, Edge und Safari.

Wichtig: Wenn Sie den Code kopieren, sind die Anführungszeichen möglicherweise geschweift. Stellen Sie sicher, dass Sie beim Einfügen der Codes in den Weebly-Code-Editor gerade Anführungszeichen verwenden.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen