Sonderangebot - Sparen Sie bis zu 80 %

+ KOSTENLOSE Domain für 1 Jahr

Endet in:

06 :

02 :

56 :

45

Zyro Blog

Alle Themen
Design Tipps Die Inspiration E-Commerce Blog Geschäftsideen Kleinunternehmer Tipps Marketing Tipps Wesentliche

Wie erstellt man Favicon

Favicons auf Laptop

Ein winziges Detail, das Ihr Unternehmen in den Köpfen Ihrer Kunden hervorhebt. Sie sollten das bescheidene Favicon beim Aufbau einer Marke nicht vergessen.

Mit einem minimalen Aufwand können Sie heute ein Favicon erstellen.

Es gibt keinen Grund, dass Sie Ihre Website ohne ein Favicon haben.

Was ist eigentlich ein Favicon? 

Favoriten sind die kleinen Symbole, die in Registerkarten und in Favoriten- oder Lesezeichenlisten in Browsern wie Chrome, Mozilla und Safari angezeigt werden.

Das Wort “Favicon” ist eine verkürzte Version vom Englischen “Favorite Icon”, also “Lieblingssymbol”, wird aber auch unter anderen Namen geführt:

  • Schnellzugriffsymbol
  • Website-Symbol
  • Lesezeichen-Symbol

Sie bedeuten jedoch alle dasselbe.

Mit dem Start von Internet Explorer 5 wurden Internetnutzern Favicons bereits 1999 vorgestellt.

Unternehmen verwenden normalerweise eine verkleinerte Version ihres Logos als Favicon, die auf 16 × 16 Pixel verkleinert ist.

Sie werden als hilfreiche visuelle Kennzeichen für Benutzer verwendet, damit sie problemlos mehrere Websites durchsuchen können.

Angenommen, Sie kaufen neue Kleidung. Stellen Sie sich vor, dass die verschiedenen Registerkarten, die Sie in Ihrem Browser geöffnet haben, ein Einkaufszentrum darstellen.

Was Sie sehen können, ist eine Reihe winziger Logos, sodass Sie beim Vergleichen von Artikeln und Preisen problemlos zwischen den Geschäften wechseln können.

Natürlich gibt es neben jedem Favicon Meta Titel, die Sie lesen können, aber wer hat Zeit, dies ständig zu tun?

Wie kann ich ein Favicon erstellen?

ein Mann, der zeichnet

Sie wissen nun, was ein Favicon ist, und möchten nun wahrscheinlich eines für Ihre eigene Website erstellen.

Dies ist eine der einfachsten Möglichkeiten, Ihr Unternehmen für Internetnutzer unvergesslich zu machen, und bietet Ihnen auch einen professionellen Vorteil.

Und wenn Sie wissen möchten, wie man ein Favicon erstellt, steckt nicht viel dahinter.

Sie haben sogar Optionen. Möchten Sie es selbst tun oder einen Favicon-Generator die Arbeit für Sie erledigen lassen?

Lassen Sie uns zunächst die Schritte durchgehen, die Sie ausführen sollten, um Ihrer Website manuell ein Favicon einzubinden.

1. Bild erstellen

Wenn es darum geht, ein geeignetes Symbol für eine Website zu finden, ist das Logo der Marke die naheliegendste Wahl.

Sie können jedoch ein beliebiges Bild auswählen, um Ihre Website darzustellen. Stellen Sie einfach sicher, dass:

  • Dies im Einklang mit Ihrem Branding steht. Verwenden Sie die gleichen Farben, Typografien und Formen.
  • Es heraussteht. Ihre Kunden sollten sich das Bild leicht merken können.
  • Keine anderen Symbole oder Bilder kopiert werden. Verwechseln Sie sich nicht mit einer anderen Marke.

Sie können ein Favicon-Bild mit einem Editor wie Photoshop oder einer Open-Source-Software wie Canva entwerfen. Wenn das Budget keine Rolle spielt, können Sie sogar einen professionellen Designer einstellen.

Es gibt einige Designelemente, die vollständig vermieden werden sollten, wenn Ihr Favicon elegant, professionell und einprägsam aussehen soll.

Stellen Sie sicher, dass Sie nicht gegen diese unausgesprochenen Favicon-Regeln verstoßen:

  • Keine Fotos. Bei der Größe, die Ihr Favicon haben muss, um in eine Browser-Registerkarte zu passen, wird kein Foto klar genug sein, um gut auszusehen oder sich auch nur aus der Ferne zu merken.
  • Keine Worte. Sie könnten definitiv einen, zwei oder sogar drei Buchstaben in Ihrem Favicon enthalten, insbesondere wenn es Teil Ihres Logos ist, aber vollständige Wörter sollten Sie vermeiden.
  • Kein Marketing-Junk. Obwohl es sich hervorragend für das Branding und die Imagekonsistenz eignet, ist ein Favicon nicht der richtige Ort für Werbetools wie “neue” oder “Ausverkaufs” -Banner.

Die richtige Größe verwenden

Während Browser-Registerkarten Favoriten in 16 × 16 Pixel anzeigen, können sie auch auf einer Seite mit bis zu 32 × 32 oder sogar 64 × 64 Pixel angezeigt werden.

Stellen Sie sicher, dass Ihr Favicon auf jeder Website, auf der es sich befindet, optimal aussieht, und erstellen Sie es in einem größeren Format. Es kann dann immer auf 16 × 16 Pixel verkleinert werden.

Das richtige Format verwenden

Obwohl zuvor Favoriten als .ico gespeichert werden mussten, werden jetzt auch .png-Dateien akzeptiert. Sie können Tools wie faviconer.com verwenden, um Dateien in das .ico-Format zu konvertieren.

Wenn Ihr Favicon jedoch als Safari Pinned Tab-Symbol angezeigt werden soll, müssen Sie es als SVG-Datei speichern.

Den richtigen Stil verwenden

Beachten Sie, dass Favoriten nicht nur auf Browser-Registerkarten und in Lesezeichenlisten angezeigt werden. Es wird auch auf drahtlosen Geräten und Kontextmenüs angezeigt.

Erstellen Sie in diesem Sinne zwei Versionen Ihres Favicon-Bildes: eine in fester Füllung und eine in transparenter Form. Auf diese Weise können Sie sicherstellen, dass es überall dort gut aussieht, wo es angezeigt wird.

2. Laden Sie das Bild auf Ihre Website hoch

Mann, der am Laptop arbeitet und ein Hund

Sobald Sie ein Symbol bereit haben, ist der nächste Schritt relativ einfach.

Benennen Sie einfach Ihre .png- oder .ico-Bilddatei in “Favicon” um und laden Sie die Datei in das Stammverzeichnis Ihrer Website hoch.

Wenn Sie eine PNG-Datei erstellt haben, müssen Sie wahrscheinlich mehrere Dateien hochladen, um allen Größenanforderungen gerecht zu werden.

Hier ist die Konvertierung Ihres Favicons in ein .ico-Format von Vorteil. Eine .ico-Datei kann mehr als ein Symbol enthalten, was bedeutet, dass Ihre verschiedenen Größen als eine auf Ihre Site hochgeladen werden können.

3. Einfachen HTML-Code hinzufügen

Möglicherweise müssen Sie keinen Code hinzufügen, damit moderne Browser Ihr Favicon finden. Die meisten von ihnen erkennen favicon.png oder favicon.ico automatisch und legen es als Ihr Symbol fest.

Es lohnt sich jedoch, einen Basiscode hinzuzufügen, um sicherzustellen, dass das Symbol in jedem Browser sichtbar ist.

Sie können einen HTML-Code “link rel = shortcut icon” implementieren, indem Sie die Datei header.php öffnen und diesen unter oder nach dem </head> -Tag eingeben:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Denken Sie daran, den Dateiendung zu ändern, je nachdem, in welchem ​​Format Sie Ihr Favicon gespeichert haben.

4. Wandlungsfähiges Favicon erstellen

Apples Logo auf dem Schild

Eine wachsende Anzahl von E-Commerce-Transaktionen findet über mobile Geräte statt. Wenn Sie also Ihre Website für die drahtlose Nutzung optimieren können, sollten Sie dies auf jeden Fall tun.

Obwohl nicht jeder auf der Welt ein Apple-Gerät besitzt, müssen Sie ein Apple Touch-Symbol erstellen, damit Ihr Favicon für diese Benutzer ordnungsgemäß funktioniert.

Apple Touch-Symbole stehen für Websites, die auf dem Startbildschirm eines Apple-Telefons oder -Tablets gespeichert wurden.

Nicht jede Site hat ihre Favoriten für die Verwendung mit Apple Touch optimiert. In diesen Fällen wird eine Miniaturversion der Zielseite angezeigt, wenn ein Benutzer die Site-URL auf seinem Startbildschirm speichert.

Wenn Sie jedoch super schick aussehen möchten, können Sie eine Symboldatei erstellen und hochladen, die speziell auf die Verwendung auf einem Apple Touch-Gerät zugeschnitten ist.

Für den Anfang muss die Datei in einem PNG-Format bereitgestellt werden. Es ist auch am besten, das Symbol mit bis zu 180 × 180 Pixel zu erstellen, um sicherzustellen, dass es auf einer beliebigen Anzahl von Bildschirmgrößen gut aussieht.

Schließlich lohnt es sich, Ihrer Website einen separaten HTML-Code für Ihre Apple Touch-Symbole hinzuzufügen. Die Codierung würde ungefähr so ​​aussehen:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Es geht noch einfacher

Sicherlich erinnern Sie sich an den Teil dieses Artikels, in dem es zwei Möglichkeiten gab, Favicon für Ihre eigene Seite zu erstellen.

Und vielleicht fragen Sie sich: Gibt es einen einfachen Weg, um das Favicon zu erstellen und dieses in die Website einbinden?

Natürlich gibt es das, und es wird Homepage-Baukasten genannt.

Website-Builder wurden entwickelt, um Ihnen das Leben in jeder Hinsicht zu erleichtern, zumindest wenn es darum geht, eine erfolgreiche Website zu erstellen. Ein anständiger Website-Builder verfügt auch über einen Favicon-Generator.

Zyro zum Beispiel hat ein Tool mit dem Sie alle Informationen erhalten, die Sie benötigen, ohne die zusätzlichen Schritte des Codierens, Konvertierens und Findens eines Designers, der den unterhaltsamsten Teil der Arbeit erledigt.

Wir erklären Schritt für Schritt wie Sie das Favicon erstellen und es in Ihre Website einfügen können. 

Screenshot von Zyro Favicon-Generator Tool

1. Vorlage auswählen

Sie können aus einer der voreingestellten Vorlagen von Zyro auswählen oder Ihr eigenes benutzerdefiniertes Bild hochladen.

2. Bis zur Perfektion anpassen

Verwenden Sie die zur Verfügung stehenden Werkzeuge, um die Farbe, das Layout und den Text des Bilds oder der Vorlage zu bearbeiten.

3. Herunterladen und loslegen

Sie sind fertig – es ist Zeit, Ihr Favicon als PNG- oder ICO-Datei herunterzuladen und in Ihrer Website einzubinden.

Wenn Sie Ihr generiertes Favicon auf Ihre Zyro-Site einfügen, ist keine Codierung erforderlich, es ist keine Konvertierung erforderlich und es sind nur wenige Klicks erforderlich.

Gehen Sie einfach zum Zyro-Editor. Wenn Sie mehrere Websites haben, wählen Sie die Website aus, auf die Sie ein Favicon hochladen möchten.

Wählen Sie im Dropdown-Menü die Option General Settings (Allgemeine Einstellungen), suchen Sie Favicon und erweitern Sie die verfügbaren Optionen.

Klicken Sie auf Browse files (Dateien durchsuchen), um das mit dem Zyro-Tool erstellte Favicon-Bild zu finden, und laden Sie es per Doppelklick hoch.

Schauen Sie sich als Nächstes die Vorschau an, wie Ihr Symbol in Browsern angezeigt wird.

Wenn Sie damit zufrieden sind, klicken Sie auf Save Changes (Änderungen speichern) und Ihr Favicon wird geladen.

Geschrieben von

Autor Avatar

Marina

Marina ist ein leidenschaftliche Digital Marketing- und E-Commerce-Liebhaberin. Ihr großes Anliegen ist es, kleinen Unternehmen dabei zu helfen, eine Online-Präsenz aufzubauen, zu wachsen und Erfolg zu haben. Zudem informiert sie ihre Leser über die neuesten Tools und Trends und gibt wertvolle Tipps. Ihre Freizeit verbringt sie gerne Zeit auf ihrem Fahrrad in der Natur.

Treten Sie der Unterhaltung bei

Ihre E-Mail-Adresse wird nicht veröffentlicht. Alle Felder sind erforderlich.