#97 Das Favicon - unterschätzter Bilderzwerg mit SEO Kraft

Frank [00:00:04]:

Frank [00:00:04]:

Frank [00:00:04]: Heute dreht sich alles ein kleines, aber sehr mächtiges Element auf deiner Webseite, das Favicon. Du erfährst, dass das Favicon nicht nur ein dekoratives Bildchen ist, sondern auch, wie wichtig es für deine Markenbildung ist. Nach der Folge weißt Du, dass das Favicon ein kleines Teil mit richtig großer Wirkung ist. Und nun lass uns mal direkt starten, was ist dieses Favicon überhaupt?

Frank [00:00:04]:

Simone [00:00:35]:

Simone [00:00:35]:

Simone [00:00:35]: Du hast bestimmt dieses Favicon schon mal gesehen, vielleicht auch ohne es zu bemerken. Dieses kleine Icon, also dieses kleine Bildchen, steht zum Beispiel in der Tableiste vor deinem Seitentitel. Das dient dazu, dass Du eine bestimmte, eine geöffnete Seite schnell wiederfinden kannst. Und da sind wir natürlich auch schon beim Stichwort finden Und suchen und natürlich hat dieses kleine Favicon auch Bedeutung für deinen SEO. Schaust Du dir nämlich einmal die Suchergebnisliste von Google an, dann siehst Du auch hier die Darstellung des Favicon. Und zwar erscheint die Anzeige des Favicon vor der URL, also dem Link, der dann auf die entsprechende Landingpage, auf die entsprechende eine Webseite führt. Und wenn Du dir eben in der Suchergebnisliste so ein Suchergebnis anschaust, dann kommt zuerst das Favicon, dann kommt die URL, dann kommt der Seitentitel und dann kommt die Seitenbeschreibung. Also das Favicon steht ganz, ganz vorne und hilft dem Nutzer, bestimmte Ressourcen sofort wiederzuerkennen.

Simone [00:00:35]:

Simone [00:01:47]:

Simone [00:01:47]:

Simone [00:01:47]: Webseiten, die jetzt kein Favicon hinterlegt haben, Da erscheint dann auch kein Favicon, sondern dieser Platzhalter wird durch Google mit einer Weltkugel besetzt, die in so hellblau/dunkelblauen Farben gehalten ist. Aber mir geht es so, dass ich sofort sehe, Dass hier kein Icon hinterlegt wurde. Und das ist für mich son kleiner im Unterbewusstsein son kleiner Zug an Professionalität. Also da sag ich mir, okay, der Webdesigner hat hier nicht sauber gearbeitet, hat er kein Augenmerk draufgelegt, obwohl es so ein wichtiges Element ist und im Unterbewusstsein klick ich dann so ein Suchergebnis unter Umständen seltener, als vielleicht eins, was darunter oder darüber steht. Und deshalb finde ich, dass dieser kleine Bilderzwerg so eine hohe Bedeutung für die Suchmaschinenoptimierung hat. Denn er gibt dir die Möglichkeit, eine Webseite wiederzuerkennen, eine Marke zu erkennen und wenn Du diese Ressource auch kennst, dann klickst Du natürlich da schneller drauf, als wenn Du die ganze Suchergebnisliste durchscrollst und dann nach irgendeinem Ergebnis suchst.

Simone [00:01:47]:

Frank [00:03:03]:

Frank [00:03:03]:

Frank [00:03:03]: In der Vorbereitung auf diese Podcastfolge hatten wir uns ja über das Favicon unterhalten und da hattest Du mir gesagt, dass das links steht, in den Suchergebnislisten. Und ich muss ganz ehrlich sagen, ich habe das dort bewusst noch gar nicht so richtig wahrgenommen, so hundertprozentig. Aber im Unterbewusstsein schon. Da erkennt man das, da sieht man das, aber bewusst hab ich es nicht wahrgenommen. Ich sehe das Favicon eher sehr bewusst und nutze es auch sehr, sehr viel in meiner Browserleiste. Ich hab halt im Browser sehr viele Tabs oftmals offen und da gibt's dann halt bestimmte Programme oder bestimmte Webseiten, die ein sehr markantes Favicon haben Und ich sortier mir das oben dann halt sehr schnell danach und kann auch sehr schnell dann wiederfinden, wo ich hinwill und klick letztendlich dort oben dann das Favicon an. Gerade wenn ich mehrere Tabs offen habe, verringert sich ja auch die Schrift. Ich sehe ja oben gar nicht mehr, wie viel Schrift dort ist.

Frank [00:03:03]:

Frank [00:04:00]:

Frank [00:04:00]:

Frank [00:04:00]: Und dann ist das Favicon natürlich extrem wichtig. Aber ich wollte noch mal ganz kurz sagen, das Favicon, wo das überhaupt herkommt, der Begriff. Der Begriff kommt aus dem Englischen und heißt "favorite icon". So und abgekürzt heißt das halt Favicon. Manchmal, wenn man das so liest und dann einfach so im Deutschen sich so schnell über drüber liest, dann liest man manchmal auch Favi-Con. Das ist dann halt nicht richtig, also es ist das Favicon. Gut, das wollte ich dazu nur noch mal kurz gesagt haben.

Frank [00:04:00]:

Simone [00:04:35]:

Simone [00:04:35]:

Simone [00:04:35]: Ja, interessant, wie Du erzählst, dass Du das kaum wahrgenommen hast. Für mich ist dieses Favicon immer präsent, wenn ich einen SEO Check mache. Denn dort hab ich es in Einzelfällen so, dass dieses Favicon in einem sehr großen Bildformat eingebunden ist Und sich dann natürlich negativ auf die Ladezeit einer Webseite auswirkt. Und deshalb check ich immer, ist ein Favicon eingebunden Und wenn ja, wie wurde es eingebunden? Es wird ja auch empfohlen, da bestimmte Größen zu verwenden. Vielleicht kannst Du dazu mal was sagen, Frank.

Simone [00:04:35]:

Frank [00:05:12]:

Frank [00:05:12]:

Frank [00:05:12]: Also die empfohlene Größe für ein Favicon ist immer quadratisch und in der Regel hat man sechzehn mal sechzehn Pixel, zweiunddreißig mal zweiunddreißigoOder aber, wenn man's halt ganz besonders noch machen will, achtundvierzig mal achtundvierzig, wobei die letzte Größe auch nicht von jedem Bildschirm überhaupt darstellbar ist. Die Bildgröße, die Du gerade angesprochen hast, die sollte halt unter einem Kilobyte sein. Also das ist wichtig, damit das sehr sehr schnell geladen wird und weil es ja auch überall geladen wird, muss es einfach extrem klein sein und am besten unter einem Kilobyte. Das ist dann schon die Vorgabe, die man da hat. Das ist aber auch nicht weiter schwierig, weil die Größe sind ja auch nur sechzehn mal sechzehn Pixel. Das funktioniert schon. Früher gab es für die für diese Icons ein direktes Format, ICO hieß das. Das ist ein Format, was ja schon vor über fünfundzwanzig Jahren eingeführt wurde und heute nimmt man das nicht mehr, weil das ist halt für ältere Browser.

Frank [00:05:12]:

Frank [00:06:15]:

Frank [00:06:15]:

Frank [00:06:15]: Heute und ganz pragmatisch nimmt man dafür das PNG Format, indem man eben diese dieses Icon sozusagen erstellt und dann auch abspeichert und mit einem PNG oder PNG Format kommt man eben doch auf die Bildgröße von unter einem Kilobyte. Man muss nur wissen, dass man da hinkommen soll und dann funktioniert das eben auch. Genau, es muss klein sein, damit sich's schnell lädt. Das ist die Empfehlung.

Frank [00:06:15]:

Simone [00:06:42]:

Simone [00:06:42]:

Simone [00:06:42]: Jetzt ist ja noch die Frage, welches Design wähle ich für solch ein Favicon aus. Wir haben's bei uns einfach gemacht, wir haben ja unser Firmenlogo, "ALSA digitall" und wir haben da einfach das a ausgeschnitten, was dann halt auch wunderbar quadratisch dargestellt werden kann. Und das ist bei uns das Favicon. Wenn man sich jetzt zum Beispiel Wikipedia anguckt, die haben als Favicon das "W" dargestellt. So weiß ich auch, Wikipedia steht ganz oft an der ersten Stelle in der Suchergebnisliste, also sehe ich dieses Ich häufig und erkenne das natürlich sofort wieder. Wir sind ja auch visuelle Menschen. Also wir brauchen gar nicht lesen, welche Ressource es sich handelt, wenn da dieses Kleine Logo oder dieses reduzierte Logo in Form des Favicon angezeigt wird, dann kann ich schon auf die Ressource klicken und bin bei der gewünschten Seite. Bei YouTube ist es zum Beispiel auch ganz prägnant, die haben natürlich dieses rote, dieses knallrote Rechteck Eck mit dem kleinen Dreieck drin für für Play, da kenn ich das auch sofort. Und natürlich auch bei Den Social Media Ressourcen LinkedIn, Facebook, da kann ich's gut sehen.

Simone [00:06:42]:

Simone [00:08:01]:

Simone [00:08:01]:

Simone [00:08:01]: Wo kein Favicon hinterlegt ist, Zum Beispiel ist bei der Webseite Wer liefert was? Auch eine große Noch. Sehr bekannte Seite. Aber im Vorfeld der Recherche jetzt zu unserem Podcast ist mir aufgefallen, die haben zum Beispiel kein Favicon hinterlegt. Dort ist nur diese Weltkugel angezeigt. Also von daher, vom von der designerischen Gestaltung solltest Du dir natürlich 'n bisschen Gedanken machen. Das Design sollte halt einfach Und klar sein und aufgrund dieser minimalen Größe, die Du da ja für diesen Bildswerg zur Verfügung hast, Du solltest trotzdem 'n guten Wiedererkennungswert haben. Und vielleicht schaust Du dir mal so verschiedene Suchergebnislisten bei Google an. Das ist schon interessant, wie unterschiedlich so diese kleinen Bildchen auf einen wirken.

Simone [00:08:01]:

Simone [00:08:50]:

Simone [00:08:50]:

Simone [00:08:50]: Also ich hatte dann mal Hundefriseur Düsseldorf eingegeben Und da gibt's halt die verschiedensten Icons, die unterschiedlich erkennbar sind. Und ich hab eigentlich bei manchen einen Hund erwartet, also ich hätte da 'n Hund in das Favicon gepackt, aber das ist gar nicht umgesetzt worden. Also finde ich so ein kleines Thema, so ein kleines Element und man kann da ganz viel, ja, draus machen und erzählen und philosophieren. Und wir werden auch im Anschluss an unseren Podcast, den werden wir ja auch wieder in Social Media bewerben und Euch dazu auffordern, uns eure Favicon mal zu schicken. Also wenn ihr jetzt hier bis zu Ende gehört habt, dann schaut mal bei eurer Webseite nach, welche welches Favicon verwendet denn deine Webseite? Und kannst Du dann gerne posten unter unsere Beiträge.

Simone [00:08:50]:

Frank [00:09:43]:

Frank [00:09:43]:

Frank [00:09:43]: Ich finde das, was Du grad zum Design gesagt hast, das extrem wichtig, ja? Also das ist wirklich hervorsticht und wenn man sich gute Favicon anschaut, dann fallen die ja auch sofort ins Auge und Du weißt sofort, wer es ist. Das hat natürlich auch mit Markenbildung tun, ganz klar, aber es ist eben auch eine Designfrage. Du kannst noch so eine bekannte Marke sein, wenn dein Favicon einfach nicht lesbar ist, oder zu viele Strukturen drin hat, oder zu blasse Farben, dann wird es einem auch keiner sehen. Ich find dieses Zusammenspiel zwischen Markenbildung, Suchmaschinenoptimierung, Design, das find ich echt faszinierend und so wie Du grad gesagt hast, ein ganz ganz kleines sechzehn mal sechzehn Pixel großes Bild hat so eine Auswirkung auf viele Sachen. Weil das ganze Thema zu dem Favicon so spannend ist, wie man so aus kleinen Sachen große Wirkungen erzielt, werden annimmt ist, wie man so aus kleinen Sachen große Wirkung erzielt, werden wir das natürlich auch innerhalb unserer Community einmal diskutieren und besprechen. Wenn Du auch einmal in die Community kommen möchtest, dann kannst Du dich einfach anmelden. Der Link zur Community ist Unten in den Shownotes und wir würden uns freuen, wenn Du einmal bei uns in der Community vorbeischaust. Und damit bin auch für heute schon am Schluss der Podcastfolge angelangt und sage Tschüs und auf Wiedersehen bis zur nächsten Woche.

Frank [00:09:43]:

Simone [00:11:05]:

Simone [00:11:05]:

Simone [00:11:05]: Und ich verabschiede mich auch und sage Tschüs.