Weiter zum Hauptinhalt

Die richtige Favicon‑Größe

Favicons erscheinen als Browsersymbole und an anderen Stellen. Lies diesen Post, um mehr über die Best Practices beim Dimensionieren von Favicons zu erfahren.

Favicons sind eine Web-Fläche, die jeder Geschäftsinhaber nutzen sollte. Sieh dir die Websites an, die du verwendest – gibt es ein Symbol in der Registerkarte neben dem Namen? Das ist ein Favicon und es ist wichtig. Es gibt zwar viele Unternehmen, die sich nicht wirklich darum kümmern, aber ein Favicon macht eine Aussage über dich und deine Marke.

Lies weiter, um mehr über Favicons, einschließlich ihrer Bedeutung und Best Practices für die Größe zu erfahren.

Was ist ein Favicon?

Ein Favicon ist ein Browsersymbol, das deine Marke repräsentiert. Die meisten Menschen achten auf diejenigen, die in der Registerkarte neben dem Namen eines Unternehmens angezeigt werden, aber sie sind auch auf Suchergebnisseiten, in Symbolleisten, Lesezeichenlisten, Adressleisten und anderen Bereichen im Internet zu finden. Sie sind so entscheidend für die Markenidentität und den Handlungsaufruf geworden, dass sie auch in mobilen Suchergebnissen enthalten sind.

Favicons sind ein großartiges Designelement, das einen sehr interessanten Start hatte. Früher, als es noch den Internet Explorer 5 gab, waren sie im Stammverzeichnis von Websites vergraben. Sie dienten auch dazu, die Anzahl der Besuche einer Website zu verfolgen.

Wenn du eine Website hast, brauchst du ein Favicon für deine Landingpage. Auch eigenständige Landingpages brauchen Favicons, um die Markenbekanntheit zu erhöhen. Es erhöht das Maß an Professionalität, das du der Öffentlichkeit präsentierst, und wenn die Leute dein Favicon sehen, sollten sie es sich merken.

Wo erscheinen Favicons?

Hier sind nur einige Beispiele für Favicons:

  • Browser-Registerkarten
  • Browser-Verlauf
  • Suchleiste
  • Symbolleisten-Apps
  • Dropdown-Liste Browserverlauf
  • Empfehlungen für die Suchleiste
  • Dropdown-Menü Lesezeichen

Wo immer du online präsent bist, solltest du ein Favicon an diesem Touchpoint haben.

Ein Favicon ist zwar nur eine kleine Darstellung deiner Marke, aber es ist wichtig. Eines der Hauptziele eines Unternehmens und einer Marke ist es, Vertrauen und Kundentreue zu gewinnen. Je mehr Gelegenheiten sie bekommen, einen Eindruck von dir zu bekommen, desto eher werden sie dich erkennen und erwarten, dich zu sehen.

Jeder Website-Builder sollte ein Favicon in das Website-Design integrieren, und wenn du einen Drag-and-Drop-Website-Builder verwendest, sollte er einen Bereich haben, in dem du ein Favicon selbst hochladen kannst. Hier sind weitere Gründe, warum Favicons ein wichtiges Element für deine Marke sind:

Stärke deine Markenidentität

Eine kohärente Marke wirkt Wunder bei deiner Zielgruppe. Benutzer deiner Website oder deines Onlineshops sehen sich alles an. Ein Favicon wirkt zu deinem Vorteil, da es die Stimme deiner Marke wiedergibt, ohne ein Wort zu sagen oder eine Anzeige zu benötigen. Standardmäßig ist das Favicon eine Erweiterung deiner Marke.

Verbessere das Benutzererlebnis

Mit dem Favicon können Benutzer deine Website problemlos in einer Vielzahl anderer Registerkarten oder Anwendungen finden. So können sie immer wiederkommen. Auf einem mobilen Gerät hat das Favicon eine definitive, langanhaltende Wirkung. Favicons können dir dabei helfen, deine SEO auf subtile Weise zu verbessern. Wenn du ein Favicon in den Registerkarten deines Browsers, in den Verlaufsarchiven und in deinen Lesezeichen hast, werden die Benutzer kontinuierlich mit deiner Website interagieren. Das erhöht die Interaktionen, was deine Gesamt-SEO verbessern kann.

Außerdem wird deine SEO verbessert, da das Favicon einen Wettbewerbsvorteil bietet, wenn er in Lesezeichen angezeigt wird. Wenn deine Website kein Favicon hat, wird sie in einem Browser wie Chrome möglicherweise nicht mit einem Lesezeichen versehen, da sie bestimmte Suchranking-Signale von Websites extrahiert, die im Internet mit einem Lesezeichen versehen sind.

Sorge für Glaubwürdigkeit und Professionalität

Wie schon gesagt zeigt das Favicon, dass du dich um deine Marke kümmerst, wie deine Zielgruppe deine Marke sieht und wie professionell dein Unternehmen ist. Es gibt den Benutzern das Gefühl, dass sie eine Marke haben, der sie vertrauen können.

Abonniere für weitere Marketingtipps, die direkt in deine Inbox gesendet werden.

Was ist die beste Favicon-Größe?

Die Maße von Favicons variieren je nachdem, wo sie verwendet werden. Die häufigste Favicon-Größe ist 16 x 16 Pixel. Es gibt jedoch Orte, an denen Favicons etwas größer sein müssen. Hier findest du eine gute Aufschlüsselung der Favicon-Maße und ihrer Verwendung in Pixeln:

  • Browser-Favicons – 16x16
  • Verknüpfungssymbole für die Taskleiste – 32x32
  • Verknüpfungssymbole für den Desktop – 96x96
  • Apple-Touch-Symbole – 180x180
  • WordPress-Größe – 512x512

Es mag seltsam erscheinen, dass so viele verschiedene Favicon-Größen benötigt werden, aber es gibt viele Möglichkeiten, wie sich die Größe eines Favicons basierend auf der Plattform und seiner Benutzeroberfläche ändern kann.

Eines der wichtigsten Dinge, die du bei der Erstellung eines Favicons beachten solltest, ist, dass es sichtbar und scharf sein muss. Es ist wichtig, eine hochwertige Version deines Logos zu verwenden. Es ist wichtig, die Größe eines Favicons zu berücksichtigen, um die beste Repräsentation deiner Marke zu erzielen.

Was also bedeutet die Erstellung eines Favicons? Denke darüber nach, wie dein Favicon aussehen soll. Viele Marken haben ein Logo, das für bestimmte Dinge verwendet wird. Ein spezielles Favicon zu erstellen, das zu deiner Marke passt, ist eine großartige Idee. Auch wenn die Leute glauben, dass ein Favicon nur eine kleinere Version deines Hauptlogos ist, kann es viel mehr sein als das. Wenn du dies in deine kreativen Bemühungen um deine Marke einbeziehst, bleiben die Dinge kohärent und du erzielst gleichzeitig eine große Wirkung.

Favicon-Dateitypen

Eines der wichtigsten Dinge, die du bei der Erstellung eines Favicons für deine Website und die Verwendung im Web beachten musst, ist die Größe der Favicon-Fläche, mit der du arbeiten musst. Je nachdem, wo dein Favicon erscheinen soll, ist das Format wichtig. Diese Dateitypen werden verwendet, um dauerhafte Favicons zu erstellen, die hell und gestochen scharf sind:

  • SVG: SVG war früher eher zweite Wahl, ist aber inzwischen in der Kreativbranche sehr beliebt geworden. Es wurde bisher von Browsern nicht umfassend unterstützt, aber die Entwicklung geht in die richtige Richtung. Browser können auch GIFs als Favicons anzeigen, aber sie sind schwer zu erkennen. SVG-Dateien sind dafür bekannt, dass sie qualitativ hochwertige Bilder liefern, ohne das Erscheinungsbild, die Geschwindigkeit oder die Leistung der Website zu beeinträchtigen.
  • PNG: PNG-Dateien sind sehr beliebt bei der Erstellung von Favicons, da sie ein weit verbreitetes Dateiformat sind, das von Inhaltserstellern verwendet wird. Sie sind leicht und laden schnell. Wenn du Designs mit transparenten Hintergründen verwendest, ist dies das ideale Format.
  • JPG: JPG-Dateien werden normalerweise nicht für Favicons verwendet, da sie nicht die gleiche hohe Qualität wie ein PNG haben.
  • Windows ICO: Dies war der ursprüngliche Dateityp, der immer noch von Designern verwendet wird. Dieser Dateityp kann verschiedene Bittiefen und Auflösungen haben.

Wenn du ein Favicon erstellst, solltest du einige Regeln befolgen, um die besten Ergebnisse zu erzielen. Eventuell solltest du auch einen Favicon-Generator verwenden. Mit diesen Tools wird dein Bild in das richtige Format zum Herunterladen umgewandelt. Hier sind einige beliebte Favicon-Generatoren:

  • Favicon.ico und App Icon Generator: Ein PNG oder JPG kann hochgeladen werden, um als ICO oder PNG in verschiedenen Größen wiedergegeben zu werden. Dies ist eine einfache Möglichkeit, Favicons für eine Reihe verschiedener Plattformen zu generieren.
  • Favikon: Dieser Generator ist sehr einfach zu bedienen. Lade dein Bild hoch, schneide es zu und lade es zur Verwendung in ein PNG- oder ICO-Format herunter. Leider erzeugt dieser Generator nur 16 x 16 Pixel. Wenn du etwas Größeres brauchst, funktioniert das nicht.
  • Favicon.io: Mit diesem Tool kannst du ein völlig neues Favicon von Grund auf oder aus einem Emoji, Logo oder Bild erstellen. Nutzer können die Favicon-Vorschau in drei verschiedenen Größen zum Herunterladen anzeigen.

Hier sind zusätzliche Tipps, die du bei der Festlegen des Designs und der Größe eines Favicons beachten solltest:

Schreibe einfach, nicht kompliziert

Wenn du ein Favicon erstellst, solltest du es als eine Art Erweiterung deines Logos betrachten. Es muss dein Markenimage widerspiegeln. Das bedeutet, dass du Platz bedenken musst. Du möchtest sicherstellen, dass es hell und attraktiv ist. Wenn du ein wortbasiertes Logo für deine Marke hast und dabei absolut authentisch bleiben möchtest, solltest du am besten mit dem ersten Buchstaben des Wortes einen Favicon erstellen. Es ist auch wichtig, die Kernelemente intakt zu halten, um dasselbe Erscheinungsbild, dieselbe Haptik und dieselbe Kohärenz zu gewährleisten.

Wenn du ein Markenlogo hast, ist auch der Abstand ein Problem. Dies sind die besten Darstellungen, da du vielleicht nicht viel tun musst. Ein ikonisches Logo hat sowohl ein Markenzeichen als auch eine Wortmarke. In diesen Fällen wird für das Favicon in der Regel nur das Brandmark verwendet. Browser-Kompatibilität ist ebenfalls ein Faktor, da sie alle unterschiedliche Anforderungen haben. Denk immer daran, die Größe des Favicons zu berücksichtigen.

Repräsentiere deine Marke

Dies ist eine Darstellung deiner Marke und sollte kohärent mit deinen Farben und deiner Strategie abgestimmt sein. Die Abbildung sollte als Teil der Website mit deiner Markenstimme und deiner visuellen Sprache weitergeführt werden. Das Farbschema sollte sich mühelos in das Design einfügen. Dein Favicon kann auf verschiedenen Hintergründen angezeigt werden, die von dem abweichen können, was du gewohnt bist. Das Testen des Favicons auf schwarzem, grauem und weißem Hintergrund ist wichtig, bevor du das Design fertigstellst. Dadurch wird zusätzlicher Arbeitsaufwand vermieden.

Vermeide Text

Text sollte unbedingt vermieden werden. Da das Favicon so klein ist, wird es sehr schwierig sein, den Text zu lesen. Die Verwendung des ersten Buchstabens des Markennamens in einem Wortlogo ist clever und kann so gestaltet werden, dass sie der Marke zusätzliches Flair verleiht. Wenn Text verwendet werden muss, sollte er nur ein bis drei Zeichen lang sein. Wenn du mit Initialen den gleichen Effekt erzielen kannst, ist dies auch eine gute Idee. Ziel ist es, die Marke zu stärken – nicht zu mindern.

Schlussbemerkungen

Jetzt solltest du verstehen, warum Favicons ein so wichtiger Bestandteil deiner Marke sind und wie sie dazu beitragen können, deine Marke langfristig mit einem professionellen Erscheinungsbild zu positionieren. Achte darauf, wo Favicons erscheinen und wie sich die Größe auf ihr Aussehen auswirken kann. Das Gesamtdesign des Favicon sollte Einfachheit und Markenrepräsentation berücksichtigen.

Mit dem Content-Studio von Mailchimp kannst du eine Website, einen Onlineshop und mehr erstellen. Sieh dir die vielen Funktionen von Mailchimp an, die zusammenarbeiten, um deine Marke zu optimieren und gleichzeitig einen kohärenten und professionellen Auftritt für alle deine Web-Flächen zu vermitteln.

Artikel teilen