SEO-Wiki — SEO-Fach­be­grif­fe ver­ständ­lich erklärt!

Was ist ein Favicon?

Defi­ni­ti­on und Her­kunft des Begriffs “Favicon”

Ein Favicon (kurz für “favo­ri­te icon”) ist ein klei­nes Sym­bol, das in Brow­ser-Tabs, Lese­zei­chen und Adress­leis­ten ange­zeigt wird, um eine Web­sei­te zu reprä­sen­tie­ren. Der Begriff wur­de erst­mals in den spä­ten 1990er Jah­ren von Micro­soft ein­ge­führt, als der Inter­net Explo­rer 5.0 die Mög­lich­keit bot, klei­ne Icons an Lese­zei­chen anzu­hän­gen. Der Name “Favicon” lei­tet sich von “Favo­ri­tes” ab, da es ursprüng­lich nur in der Favo­ri­ten­lis­te ange­zeigt wurde.

Zweck und Nut­zen von Favicons auf Webseiten

Favicons die­nen als visu­el­le Iden­ti­fi­ka­to­ren für eine Web­site. Sie hel­fen Benut­zern, eine geöff­ne­te Sei­te schnel­ler wie­der­zu­fin­den, ins­be­son­de­re wenn meh­re­re Tabs im Brow­ser geöff­net sind. Außer­dem unter­stüt­zen sie die Mar­ken­bil­dung, da sie sofort Wie­der­erken­nungs­wert schaf­fen und Ver­trau­en bei den Nut­zern aufbauen.

Vor­tei­le eines Favicons:

  • Bes­se­re Benut­zer­freund­lich­keit: Ein Favicon erleich­tert die Navi­ga­ti­on, beson­ders bei vie­len geöff­ne­ten Tabs.
  • Stei­ge­rung der Mar­ken­be­kannt­heit: Die Prä­senz eines Favicons trägt zur Wie­der­erken­nung einer Mar­ke bei.
  • Ver­bes­se­rung der Klick­ra­te (CTR): Sei­ten mit einem Favicon kön­nen in Such­ergeb­nis­sen optisch anspre­chen­der wir­ken, was poten­zi­ell die Klick­ra­te erhöht.

Bei­spie­le für den Ein­satz von Favicons und deren Wir­kung auf die User Expe­ri­ence (UX)

Stel­len Sie sich vor, ein Benut­zer hat 20 Tabs in sei­nem Brow­ser geöff­net. Ein Favicon hilft dabei, Ihre Web­sei­te in der Mas­se her­vor­zu­he­ben. So könn­ten z.B. fol­gen­de Mar­ken ihre Logos als Favicons verwenden:

  • Ama­zon: Ein klei­nes “a” auf oran­gem Hintergrund.
  • Face­book: Das bekann­te wei­ße “f” auf blau­em Hintergrund.
  • You­Tube: Eine sti­li­sier­te Wiedergabetaste.

Ein gut gestal­te­tes Favicon ver­bes­sert nicht nur die Benut­zer­er­fah­rung, son­dern stei­gert auch die Benutz­er­bin­dung, da die Sei­te sofort visu­ell erkannt wird.

Erklä­rung der häu­figs­ten For­ma­te (.ico, .png, .svg)

Favicons kön­nen in ver­schie­de­nen Datei­for­ma­ten vor­lie­gen. Jedes For­mat hat sei­ne eige­nen Vor- und Nach­tei­le, abhän­gig von der Art der Web­sei­te und den unter­stütz­ten Browsern:

For­mat Beschrei­bung Vor­tei­le Nach­tei­le
.ico Klas­si­sches For­mat für Favicons, unter­stützt von allen Browsern. Uni­ver­sell kom­pa­ti­bel, ide­al für älte­re Browser. Grö­ße­re Datei­grö­ße, begrenz­te Farbtiefe.
.png Hoch­auf­lö­sen­des For­mat mit Transparenz-Unterstützung. Gute Qua­li­tät, Trans­pa­renz, klei­ne Dateigröße. Nicht von allen älte­ren Brow­sern unterstützt.
.svg Vek­tor­ba­sier­tes For­mat für ska­lier­ba­re Icons. Ska­lier­bar ohne Qua­li­täts­ver­lust, ide­al für Retina-Displays. Nicht alle Brow­ser unter­stüt­zen .svg als Favicon.

 

HTML-Code zur Ein­bin­dung von Favicons:

<!-- Standard .ico-Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- .png-Favicon für moderne Browser -->
<link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">

<!-- .svg-Favicon für skalierbare Icons -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

War­um sind Favicons wich­tig für SEO und Branding?

Ein­fluss von Favicons auf die Markenwahrnehmung

Favicons spie­len eine ent­schei­den­de Rol­le in der Mar­ken­wahr­neh­mung. Auch wenn sie klein sind, tra­gen sie erheb­lich zur Wie­der­erken­nung einer Mar­ke bei. Ein Favicon wird oft mit dem Logo einer Mar­ke asso­zi­iert und hin­ter­lässt beim Nut­zer einen blei­ben­den visu­el­len Ein­druck. Das kon­ti­nu­ier­li­che Sehen des Favicons in Brow­ser-Tabs oder Lese­zei­chen ver­an­kert die Mar­ke unbe­wusst im Gedächt­nis der Nutzer.

Bei­spie­le, wie Favicons zur Stär­kung der Mar­ken­iden­ti­tät beitragen:

  • Star­ke Mar­ken­bin­dung: Bekann­te Unter­neh­men wie Apple, Goog­le oder Lin­ke­dIn set­zen ihre Logos als Favicons ein, was dazu führt, dass Nut­zer ihre Sei­ten leicht wiedererkennen.
  • Kon­sis­ten­tes Bran­ding: Ein kon­sis­ten­tes Favicon auf allen digi­ta­len Platt­for­men ver­mit­telt Pro­fes­sio­na­li­tät und Vertrauen.

Wie Favicons zur Wie­der­erken­nung und Ver­trau­ens­bil­dung beitragen

Favicons schaf­fen eine visu­el­le Ver­bin­dung zwi­schen einer Web­sei­te und ihrem Inhalt. Nut­zer asso­zi­ie­ren das Favicon mit der Qua­li­tät und Ver­läss­lich­keit der Web­site. Ein feh­len­des oder schlecht gestal­te­tes Favicon kann hin­ge­gen unse­ri­ös wir­ken und das Ver­trau­en der Besu­cher mindern.

Vor­tei­le eines anspre­chen­den Favicons:

  • Stei­ge­rung der Wie­der­erken­nung: Nut­zer kön­nen Ihre Web­sei­te schnel­ler iden­ti­fi­zie­ren, wenn sie auf sie zurück­keh­ren möchten.
  • Erhö­hung des Ver­trau­ens: Eine Web­sei­te mit einem gut gestal­te­ten Favicon wirkt ver­trau­ens­wür­di­ger und professioneller.
  • Ver­bes­se­rung der User Expe­ri­ence: Favicons erleich­tern die Ori­en­tie­rung in Brow­ser-Tabs und Lesezeichen.

Bedeu­tung für SEO: Kön­nen Favicons die Klick­ra­te (CTR) in den Such­ergeb­nis­sen beeinflussen?

Favicons haben zwar kei­nen direk­ten Ein­fluss auf das Ran­king in den Such­ma­schi­nen, kön­nen aber indi­rekt die Klick­ra­te (Click-Through-Rate, CTR) ver­bes­sern. Seit Goog­le Favicons in den mobi­len Such­ergeb­nis­sen inte­griert hat, kön­nen sie dazu bei­tra­gen, dass Nut­zer eine Web­sei­te schnel­ler erken­nen und dar­auf kli­cken. Ein auf­fäl­li­ges und pas­sen­des Favicon kann Ihre Web­site visu­ell her­vor­he­ben und somit die Klick­ra­te steigern.

Vor­tei­le für die SEO-Strategie:

  • Höhe­re CTR: Nut­zer kli­cken eher auf Such­ergeb­nis­se, die ein anspre­chen­des Favicon zeigen.
  • Ver­stär­kung der Mar­ken­prä­senz: Wenn Ihre Mar­ke auch in den Such­ergeb­nis­sen visu­ell prä­sent ist, stärkt das das Ver­trau­en und die Klickrate.
  • Mobi­le SEO: Auf mobi­len Gerä­ten spielt das Favicon eine noch grö­ße­re Rol­le, da Goog­le es pro­mi­nent in den Such­ergeb­nis­sen anzeigt.

Rele­vanz für Brow­ser-Tabs, Lese­zei­chen und Mobile-Geräte

Favicons sind nicht nur für Such­ma­schi­nen rele­vant, son­dern auch für die Benut­zer­freund­lich­keit auf ver­schie­de­nen Platt­for­men. Hier sind eini­ge Einsatzbereiche:

  • Brow­ser-Tabs: Bei vie­len geöff­ne­ten Tabs hilft ein ein­deu­ti­ges Favicon dem Nut­zer, die gesuch­te Sei­te schnel­ler zu finden.
  • Lese­zei­chen: In der Lese­zei­chen­leis­te ermög­licht ein Favicon eine schnel­le visu­el­le Iden­ti­fi­ka­ti­on der gespei­cher­ten Seiten.
  • Mobi­le-Gerä­te: Auf Smart­phones und Tablets wer­den Favicons auch als App-Sym­bo­le ver­wen­det, wenn Nut­zer Ihre Web­site zu ihrem Start­bild­schirm hinzufügen.

 

Platt­formBedeu­tung des Favicons
Brow­ser-TabsSchnel­le Iden­ti­fi­ka­ti­on und Navi­ga­ti­on bei vie­len Tabs.
Lese­zei­chenVisu­el­le Unter­stüt­zung bei der Suche nach gespei­cher­ten Seiten.
Mobi­le SuchergebnisseStei­ge­rung der Sicht­bar­keit und der CTR in den Suchergebnissen.
Start­bild­schirm (Mobi­le)Ver­wen­dung als App-Sym­bol bei iOS und Android-Geräten.

 

HTML-Code zur Opti­mie­rung für mobi­le Geräte:

<!-- Favicon für Apple-Geräte -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

<!-- Favicon für Android -->
<link rel="icon" href="/android-icon.png" type="image/png" sizes="192x192">

Die bes­ten Favicon-Grö­ßen und ‑For­ma­te

Emp­foh­le­ne Grö­ßen für ver­schie­de­ne Gerä­te und Browser

Favicons sind nicht auf eine ein­zi­ge Grö­ße beschränkt, son­dern wer­den in ver­schie­de­nen Grö­ßen benö­tigt, um auf unter­schied­li­chen Gerä­ten und Platt­for­men kor­rekt dar­ge­stellt zu wer­den. Hier ist eine Über­sicht der emp­foh­le­nen Größen:

Grö­ßeVer­wen­dung
16x16Brow­ser-Tabs und Lesezeichen
32x32Desk­top-Icons und hoch­auf­lö­sen­de Displays
48x48Win­dows-Ver­knüp­fun­gen und spe­zi­el­le Browser
64x64Social Media Thumbnails
180x180Apple Touch Icons für iOS (Start­bild­schirm)
192x192Android Chro­me (Start­bild­schirm-Sym­bol)
512x512Goog­le Web App Mani­fest für Pro­gres­si­ve Web Apps (PWA)

 

Eine Tabel­le wie die oben ste­hen­de hilft Ihnen, die rich­ti­ge Grö­ße für ver­schie­de­ne Platt­for­men zu wäh­len, um eine opti­ma­le Dar­stel­lung zu gewährleisten.

War­um meh­re­re Größen?

Moder­ne Brow­ser und Gerä­te ver­wen­den unter­schied­li­che Grö­ßen, abhän­gig davon, wo das Favicon ange­zeigt wird. Wenn Ihre Web­sei­te nur ein ein­zi­ges 16x16-Pixel-Favicon ver­wen­det, könn­te dies auf hoch­auf­lö­sen­den Dis­plays unscharf wir­ken. Daher ist es emp­feh­lens­wert, meh­re­re Grö­ßen bereitzustellen.

Wel­che For­ma­te (.ico, .png) am bes­ten geeig­net sind und warum

Favicons kön­nen in ver­schie­de­nen Datei­for­ma­ten erstellt wer­den. Jedes For­mat hat sei­ne eige­nen Vor- und Nach­tei­le, abhän­gig von der Art der Nutzung:

.ico (Icon Format)

  • Vor­tei­le: Das .ico-For­mat ist das am häu­figs­ten ver­wen­de­te Favicon-For­mat, da es von allen Brow­sern unter­stützt wird, ein­schließ­lich älte­rer Ver­sio­nen. Es kann meh­re­re Auf­lö­sun­gen in einer ein­zi­gen Datei speichern.
  • Nach­tei­le: Grö­ße­re Datei­grö­ße im Ver­gleich zu .png und weni­ger Farboptionen.
  • Ver­wen­dung: Ide­al als Stan­dard-Favicon für maxi­ma­le Browser-Kompatibilität.

.png (Por­ta­ble Net­work Graphics)

  • Vor­tei­le: Bie­tet bes­se­re Qua­li­tät, Trans­pa­renz und eine klei­ne­re Datei­grö­ße als .ico. Beson­ders nütz­lich für mobi­le Gerä­te und Retina-Displays.
  • Nach­tei­le: Nicht alle älte­ren Brow­ser unter­stüt­zen .png als Favicon.
  • Ver­wen­dung: Opti­mal für moder­ne Brow­ser und mobi­le Endgeräte.

.svg (Sca­lable Vec­tor Graphics)

  • Vor­tei­le: Ska­lier­bar ohne Qua­li­täts­ver­lust, per­fekt für hoch­auf­lö­sen­de Dis­plays und respon­si­ve Webseiten.
  • Nach­tei­le: Nicht alle Brow­ser unter­stüt­zen .svg als Favicon (z.B. älte­re Ver­sio­nen des Inter­net Explorers).
  • Ver­wen­dung: Emp­feh­lens­wert für zukunfts­si­che­re Web­sites, die auf hohe Auf­lö­sun­gen abzielen.

HTML-Code zur Ein­bin­dung ver­schie­de­ner Formate:

<!-- Standard .ico-Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- .png-Favicon für moderne Browser -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">

<!-- .svg-Favicon für skalierbare Icons -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Hin­wei­se zu Reti­na- und hoch­auf­lö­sen­den Displays

In Zei­ten von Reti­na-Dis­plays und hoch­auf­lö­sen­den Bild­schir­men ist es wich­tig, Favicons in ver­schie­de­nen Auf­lö­sun­gen bereit­zu­stel­len, um sicher­zu­stel­len, dass sie auf allen Gerä­ten scharf und klar ange­zeigt wer­den. Beson­ders .png- und .svg-For­ma­te sind hier­für geeig­net, da sie eine bes­se­re Qua­li­tät und Ska­lier­bar­keit bieten.

Tipps zur Opti­mie­rung für Retina-Displays:

  • Ver­wen­den Sie eine Auf­lö­sung von 192x192 Pixeln oder höher, um sicher­zu­stel­len, dass das Favicon auf Reti­na-Dis­plays gesto­chen scharf aussieht.
  • Stel­len Sie meh­re­re Grö­ßen im .png-For­mat bereit, damit der Brow­ser die bes­te ver­füg­ba­re Grö­ße aus­wäh­len kann.
  • Für voll­stän­dig ska­lier­ba­re Lösun­gen emp­fiehlt sich das .svg-For­mat.

Wie erstel­le ich ein Favicon?

Schritt-für-Schritt-Anlei­tung zur Erstel­lung eines Favicons mit Tools wie Pho­to­shop, GIMP oder Online-Generatoren

Das Erstel­len eines Favicons kann auf ver­schie­de­ne Wei­se erfol­gen, abhän­gig von den ver­wen­de­ten Tools und den Anfor­de­run­gen an die Web­sei­te. Hier ist eine Schritt-für-Schritt-Anlei­tung, wie Sie Ihr eige­nes Favicon erstel­len können:

Design des Favicons

  • Öff­nen Sie ein Bild­be­ar­bei­tungs­pro­gramm wie Pho­to­shop, GIMP oder einen Online-Favicon-Gene­ra­tor (z.B. RealFaviconGenerator.net).
  • Erstel­len Sie ein neu­es Doku­ment mit einer qua­dra­ti­schen Auf­lö­sung, z.B. 512x512 Pixel. Die­se hohe Auf­lö­sung ermög­licht es, das Favicon auch auf Reti­na-Dis­plays scharf darzustellen.
  • Wäh­len Sie eine ein­fa­che, aber prä­gnan­te Gra­fik oder Sym­bol aus, die Ihre Mar­ke wider­spie­gelt. Das Favicon soll­te klar erkenn­bar sein, auch in sehr klei­nen Größen.

Erstel­lung des Icons

  • Ver­wen­den Sie Text, Sym­bo­le oder Logos, um ein erkenn­ba­res Design zu gestalten.
  • Ver­wen­den Sie kla­re Lini­en und kon­trast­rei­che Far­ben, um sicher­zu­stel­len, dass das Icon auch bei gerin­ger Grö­ße gut sicht­bar bleibt.
  • Stel­len Sie sicher, dass das Favicon kei­nen Text ent­hält, da die­ser in klei­nen Grö­ßen unle­ser­lich wird.

Expor­tie­ren in ver­schie­de­ne Formate

  • Spei­chern Sie die Datei in den benö­tig­ten Formaten:
      • .ico: Für Browser-Kompatibilität.
      • .png: Für moder­ne Brow­ser und Retina-Displays.
      • .svg: Für ska­lier­ba­re, hoch­auf­lö­sen­de Icons.
    Ach­ten Sie dar­auf, meh­re­re Grö­ßen zu expor­tie­ren, wie z.B. 16x16, 32x32, 64x64 und 192x192 Pixel, um ver­schie­de­ne Platt­for­men zu unterstützen.

Bei­spiel für die Export-Ein­stel­lun­gen in Photoshop:

Dateiformat: PNG
Größe: 512x512 px
Transparenz: Ja
Hintergrund: Transparent

Ver­wen­dung eines Online-Favicon-Gene­ra­tors (Opti­on)

  • Wenn Sie kein Bild­be­ar­bei­tungs­pro­gramm nut­zen möch­ten, kön­nen Sie Tools wie RealFaviconGenerator.net oder Favicon.io verwenden.
  • Die­se Gene­ra­to­ren erstel­len auto­ma­tisch alle benö­tig­ten Grö­ßen und For­ma­te und gene­rie­ren den HTML-Code zur Einbindung.

Tipps zur Wahl der rich­ti­gen Auf­lö­sung und des Dateiformats

Die Wahl der rich­ti­gen Auf­lö­sung ist ent­schei­dend, um sicher­zu­stel­len, dass das Favicon auf allen Gerä­ten scharf aus­sieht. Beach­ten Sie dabei die fol­gen­den Empfehlungen:

  • Für Brow­ser-Tabs: 16x16 und 32x32 Pixel.
  • Für hoch­auf­lö­sen­de Dis­plays (Reti­na): 192x192 und 512x512 Pixel.
  • Für Apple Touch Icons: 180x180 Pixel.

Opti­mie­rungs­tipps:

  • Ver­mei­den Sie zu kom­ple­xe Designs: Ein Favicon soll­te auch in sehr klei­nen Grö­ßen erkenn­bar sein.
  • Ver­wen­den Sie trans­pa­ren­te Hin­ter­grün­de (wenn mög­lich im .png-For­mat), um das Icon auf ver­schie­de­nen Hin­ter­grün­den gut aus­se­hen zu lassen.
  • Kom­pri­mie­ren Sie die Datei, um die Lade­zei­ten zu optimieren.

Ver­mei­dung typi­scher Feh­ler bei der Favicon-Erstellung

Vie­le Web­sei­ten­be­trei­ber machen häu­fig Feh­ler, wenn sie ihre Favicons erstel­len. Hier sind eini­ge häu­fi­ge Feh­ler und Tipps, wie Sie sie ver­mei­den können:

Feh­ler: Ver­wen­den einer zu nied­ri­gen Auflösung.

  • Lösung: Erstel­len Sie Favicons in min­des­tens 512x512 Pixeln und ska­lie­ren Sie sie für klei­ne­re Grö­ßen herunter.

Feh­ler: Kei­ne Trans­pa­renz verwenden.

  • Lösung: Ver­wen­den Sie das .png-For­mat mit einem trans­pa­ren­ten Hin­ter­grund, um eine bes­se­re Dar­stel­lung zu ermöglichen.

Feh­ler: Favicon nicht kor­rekt einbinden.

  • Lösung: Nut­zen Sie den kor­rek­ten <link>-Tag, um sicher­zu­stel­len, dass das Favicon in allen Brow­sern erkannt wird.

Bei­spiel für die kor­rek­te Ein­bin­dung:

<!-- Favicon für alle Browser -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Feh­ler: Kein Favicon bereitstellen.

  • Lösung: Stel­len Sie sicher, dass Ihre Web­sei­te ein Favicon hat, da feh­len­de Favicons oft als unpro­fes­sio­nell wahr­ge­nom­men werden.

Favicon in HTML einbinden

Anlei­tung zur Inte­gra­ti­on von Favicons in den HTML-Code mit dem -Tag

Das Ein­bin­den eines Favicons in Ihre Web­sei­te ist ent­schei­dend, um sicher­zu­stel­len, dass es auf allen Brow­sern und Gerä­ten kor­rekt ange­zeigt wird. Dazu wird das Favicon über den <link>-Tag in den HTML-Code eingebunden.

Hier ist eine Schritt-für-Schritt-Anlei­tung, wie Sie dies kor­rekt umset­zen können.

Favicon-Datei im Root-Ver­zeich­nis ablegen

  • Spei­chern Sie die Datei als favicon.ico im Root-Ver­zeich­nis Ihrer Web­sei­te (/public_html), damit sie auto­ma­tisch von den meis­ten Brow­sern erkannt wird.
  • Alter­na­tiv kön­nen Sie das Favicon auch in ande­ren For­ma­ten (z.B. .png oder .svg) bereit­stel­len und im HTML-Code referenzieren.

Ein­bin­dung in den head-Bereich Ihrer HTML-Datei

Fügen Sie den fol­gen­den Code in den <head>-Bereich Ihrer HTML-Sei­te ein, um das Favicon auf allen Brow­sern und Gerä­ten zu unterstützen:

<!-- Standard Favicon (für ältere Browser) -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- .png-Favicon für moderne Browser -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">

<!-- Apple Touch Icon für iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

<!-- .svg-Favicon für skalierbare Icons -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Bei­spie­le für ver­schie­de­ne Anwendungsfälle

Je nach Platt­form und Gerät kann es sinn­voll sein, unter­schied­li­che Favicons bereit­zu­stel­len. Hier sind eini­ge Anwendungsfälle:

Stan­dard-Inte­gra­ti­on (favicon.ico)

Der ein­fachs­te Weg, ein Favicon hin­zu­zu­fü­gen, ist die Ver­wen­dung der .ico-Datei:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
  • Vor­teil: Wird von allen Brow­sern unter­stützt, ein­schließ­lich älte­rer Versionen.
  • Nach­teil: Ein­ge­schränk­te Unter­stüt­zung für hoch­auf­lö­sen­de Displays.

Moder­ne Brow­ser und Retina-Displays

Um eine bes­se­re Dar­stel­lung auf moder­nen Gerä­ten zu gewähr­leis­ten, soll­ten Sie .png-Favicons mit unter­schied­li­chen Grö­ßen einbinden:

<!-- Favicon für Browser-Tabs -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">

<!-- Favicon für hochauflösende Displays -->
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">

Apple Touch Icons für iOS-Geräte

Apple ver­wen­det spe­zi­el­le Touch Icons, wenn Nut­zer Ihre Web­site zum Start­bild­schirm hinzufügen:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  • Vor­teil: Opti­miert für iPho­nes und iPads.
  • Hin­weis: Ver­wen­den Sie eine Auf­lö­sung von 180x180 Pixeln, um sicher­zu­stel­len, dass das Icon auf Reti­na-Dis­plays scharf aussieht.

Android und Pro­gres­si­ve Web Apps (PWA)

Für Android-Gerä­te und PWAs wird oft ein 192x192-Pixel-Icon verwendet:

<link rel="icon" href="/android-icon-192x192.png" type="image/png" sizes="192x192">

Sca­lable Vec­tor Gra­phics (.svg)

Wenn Ihre Web­sei­te für respon­si­ve Designs und Reti­na-Dis­plays opti­miert ist, kön­nen Sie .svg-Favicons ver­wen­den:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
  • Vor­teil: Ska­lier­bar ohne Qualitätsverlust.
  • Nach­teil: Nicht von allen älte­ren Brow­sern unterstützt.

Feh­ler­be­he­bung: Häu­fi­ge Pro­ble­me bei Favicons

Was tun, wenn das Favicon im Brow­ser nicht ange­zeigt wird?

Es kommt häu­fig vor, dass Favicons nicht wie erwar­tet in Brow­ser-Tabs, Lese­zei­chen oder mobi­len Gerä­ten ange­zeigt wer­den. Das kann ver­schie­de­ne Ursa­chen haben. Hier sind die häu­figs­ten Grün­de und wie Sie sie behe­ben können:

Mög­li­che Ursachen:

Fal­scher Dateipfad

  • Das Favicon wird mög­li­cher­wei­se nicht gefun­den, weil der Pfad in Ihrem <link>-Tag falsch ist.
  • Lösung: Über­prü­fen Sie, ob die Datei im rich­ti­gen Ver­zeich­nis liegt und der Pfad kor­rekt ange­ge­ben ist.
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Fal­sches Dateiformat

  • Eini­ge Brow­ser unter­stüt­zen bestimm­te For­ma­te wie .svg nicht vollständig.
  • Lösung: Ver­wen­den Sie das .ico-For­mat als Fall­back und ergän­zen Sie .png und .svg für moder­ne Browser.
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Brow­ser-Cache 

  • Wenn Sie das Favicon aktua­li­sie­ren, kann es pas­sie­ren, dass der Brow­ser das alte Icon aus dem Cache anzeigt.
  • Lösung: Lee­ren Sie den Brow­ser-Cache oder fügen Sie einen Cache-Bus­ting-Para­me­ter hinzu.
<link rel="icon" href="/favicon.ico?v=2">

Feh­len­de <head>-Tags

  • Wenn der <link>-Tag außer­halb des <head>-Bereichs plat­ziert wird, erkennt der Brow­ser das Favicon mög­li­cher­wei­se nicht.
  • Lösung: Stel­len Sie sicher, dass der Code im <head>-Abschnitt Ihrer HTML-Datei ein­ge­fügt ist.

Tipps zur Dia­gno­se und Behe­bung von Favicon-Problemen

Wenn Ihr Favicon nicht wie gewünscht ange­zeigt wird, kön­nen Sie die fol­gen­den Schrit­te zur Feh­ler­be­he­bung durchführen:

Schritt 1: Brow­ser-Ent­wick­ler­werk­zeu­ge verwenden

  • Öff­nen Sie die Ent­wick­ler­kon­so­le (z.B. in Chro­me: Rechts­klick → “Unter­su­chen” → “Kon­so­le”).
  • Suchen Sie nach Feh­ler­mel­dun­gen, die auf ein Pro­blem mit der Favicon-Datei hin­wei­sen könnten.

Schritt 2: Über­prü­fung mit Online-Tools

  • Nut­zen Sie Tools wie Real­Fa­vicon­Ge­ne­ra­tor Che­cker oder Favicon Che­cker, um zu über­prü­fen, ob Ihr Favicon kor­rekt ein­ge­bun­den ist..

Schritt 3: Favicon direkt im Brow­ser aufrufen

  • Geben Sie die URL des Favicons direkt in die Adress­leis­te ein (https://www.ihredomain.de/favicon.ico), um zu prü­fen, ob die Datei kor­rekt gela­den wird.

Schritt 4: Über­prü­fung auf Server-Ebene

  • Stel­len Sie sicher, dass die Favicon-Datei auf dem Ser­ver kor­rekt hoch­ge­la­den ist und dass kei­ne Zugriffs­rech­te (Per­mis­si­ons) fehlen.

Häu­fi­ge Pro­ble­me und Lösungen

Pro­blem Mög­li­che Ursache Lösung
Favicon wird nicht angezeigt Fal­scher Dateipfad Pfad im <link>-Tag über­prü­fen
Favicon wird nach einer Aktua­li­sie­rung nicht geändert Brow­ser-Cache Cache lee­ren oder Cache-Bus­ting-Para­me­ter verwenden
Favicon wird auf mobi­len Gerä­ten nicht angezeigt Feh­len­de Apple Touch Icons <link rel="apple-touch-icon"> hinzufügen
Favicon wird in bestimm­ten Brow­sern nicht unterstützt Fal­sches Datei­for­mat (z.B. .svg in älte­ren Browsern) .ico als Fall­back verwenden

 

HTML-Bei­spiel zur Fehlerbehebung:

<!-- Favicon mit Cache-Busting-Parameter -->
<link rel="icon" href="/favicon.ico?v=3" type="image/x-icon">

<!-- Apple Touch Icon für mobile Geräte -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Best Prac­ti­ces und Tipps für Favicons

Opti­mie­rung für Geschwin­dig­keit und Ladezeit

Die Lade­zeit einer Web­sei­te spielt eine ent­schei­den­de Rol­le für die Benut­zer­er­fah­rung und die SEO-Per­for­mance. Auch wenn ein Favicon eine rela­tiv klei­ne Datei ist, kann sei­ne Opti­mie­rung den­noch zur Geschwin­dig­keit Ihrer Web­sei­te beitragen.

Tipps zur Optimierung:

Kom­pri­mie­rung der Favicon-Datei

  • Ver­wen­den Sie Tools wie TinyPNG oder Image­Op­tim, um .png-Datei­en zu komprimieren.
  • Für .ico-Datei­en kön­nen Sie den Favicon Gene­ra­tor (z.B. RealFaviconGenerator.net) nut­zen, um die Datei­grö­ße zu reduzieren.

Meh­re­re For­ma­te bereitstellen

  • Stel­len Sie Favicons in ver­schie­de­nen For­ma­ten (.ico, .png, .svg) zur Ver­fü­gung, um die Kom­pa­ti­bi­li­tät und Per­for­mance auf ver­schie­de­nen Gerä­ten zu verbessern.
  • Tipp: Das .ico-For­mat ist oft grö­ßer, daher soll­ten .png und .svg bevor­zugt ver­wen­det wer­den, wenn die­se unter­stützt werden.

Datei­grö­ße optimieren

  • Hal­ten Sie die Grö­ße Ihrer Favicon-Datei unter 100 KB, idea­ler­wei­se sogar unter 50 KB.
  • Ver­wen­den Sie mini­ma­lis­ti­sche Designs, um die Datei­grö­ße gering zu halten.

Sicher­heit: Favicons über HTTPS bereitstellen

In Zei­ten von HTTPS-Ver­schlüs­se­lung ist es wich­tig, auch Ihr Favicon über eine siche­re Ver­bin­dung bereit­zu­stel­len. Ein Favicon, das über HTTP ein­ge­bun­den wird, kann dazu füh­ren, dass Brow­ser Ihre Sei­te als unsi­cher einstufen.

Vor­tei­le der Bereit­stel­lung über HTTPS:

  • Ver­mei­dung von Sicher­heits­war­nun­gen in moder­nen Browsern.
  • Ver­trau­ens­auf­bau bei den Nut­zern, da die gesam­te Web­sei­te als sicher ein­ge­stuft wird.
  • SEO-Vor­tei­le: Goog­le bevor­zugt HTTPS-gesi­cher­te Web­sei­ten, was Ihr Ran­king ver­bes­sern kann.

Bei­spiel für die Ein­bin­dung über HTTPS:

 
<link rel="icon" href="https://www.ihredomain.de/favicon.ico" type="image/x-icon">

Zugäng­lich­keit: Alt-Attri­bu­te und Barrierefreiheit

Obwohl Favicons in der Regel kei­ne Alt-Attri­bu­te benö­ti­gen, gibt es eini­ge Best Prac­ti­ces, die Sie berück­sich­ti­gen soll­ten, um die Zugäng­lich­keit Ihrer Web­sei­te zu verbessern.

Tipps zur Ver­bes­se­rung der Barrierefreiheit:

Ver­wen­dung von beschrei­ben­den Dateinamen

  • Anstel­le von gene­ri­schen Namen wie favicon.ico kön­nen Sie spe­zi­fi­sche­re Namen wie markenfavicon.ico ver­wen­den, um die Zugäng­lich­keit zu verbessern.

Berück­sich­ti­gung von Kon­tras­ten und Farben

  • Stel­len Sie sicher, dass das Favicon auch für Far­ben­blin­de gut sicht­bar ist, indem Sie hohe Kon­tras­te verwenden.
  • Tes­ten Sie Ihr Favicon auf unter­schied­li­chen Hin­ter­grün­den, um sicher­zu­stel­len, dass es immer gut erkenn­bar ist.

Ver­wen­dung ska­lier­ba­rer Formate

  • .svg-Datei­en bie­ten eine ska­lier­ba­re Lösung ohne Qua­li­täts­ver­lust, was für Benut­zer mit ver­schie­de­nen Bild­schirm­grö­ßen und ‑auf­lö­sun­gen wich­tig ist.

Wei­te­re Best Prac­ti­ces zur Opti­mie­rung und Performance

  • Caching opti­mie­ren: Fügen Sie einen Cache-Con­trol-Hea­der hin­zu, um sicher­zu­stel­len, dass das Favicon vom Brow­ser zwi­schen­ge­spei­chert wird und die Lade­zeit verkürzt.
  • Ver­wen­dung von Lazy Loa­ding: Auch wenn Favicons klein sind, kön­nen Sie bei grö­ße­ren Icons (wie z.B. Apple Touch Icons) Lazy Loa­ding ver­wen­den, um die Lade­ge­schwin­dig­keit zu optimieren.

HTML-Bei­spiel zur Ver­bes­se­rung der Performance:

<!-- Favicon mit Cache-Control -->
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" sizes="32x32">

SEO-Check­lis­te für Favicons

Favicons spie­len eine oft unter­schätz­te Rol­le in der SEO-Stra­te­gie und der Benut­zer­er­fah­rung Ihrer Web­sei­te. Eine kor­rek­te Imple­men­tie­rung kann nicht nur die Mar­ken­wahr­neh­mung ver­bes­sern, son­dern auch die Lade­ge­schwin­dig­keit und Sicht­bar­keit Ihrer Sei­te posi­tiv beein­flus­sen. In die­sem Abschnitt fin­den Sie eine umfas­sen­de Check­lis­te, die Ihnen dabei hilft, Ihre Favicons opti­mal zu nutzen.

Schritt-für-Schritt-Über­prü­fung: Was bei der Imple­men­tie­rung beach­tet wer­den sollte

Das Favicon in ver­schie­de­nen For­ma­ten bereitstellen

  • Ver­wen­den Sie .ico, .png und .svg-Datei­en, um eine maxi­ma­le Kom­pa­ti­bi­li­tät mit ver­schie­de­nen Brow­sern und Gerä­ten sicherzustellen.
  • Tipp: Stel­len Sie sicher, dass die .ico-Datei im Root-Ver­zeich­nis Ihrer Web­site (/favicon.ico) liegt.

Ver­schie­de­ne Grö­ßen für unter­schied­li­che Gerä­te und Auf­lö­sun­gen bereitstellen

  • Fügen Sie die fol­gen­den Zei­len in den <head>-Bereich Ihrer HTML-Sei­te ein:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Über HTTPS bereitstellen

  • Stel­len Sie sicher, dass alle Favicons über HTTPS ein­ge­bun­den wer­den, um Sicher­heits­war­nun­gen zu vermeiden.

Brow­ser-Cache berücksichtigen

  • Ver­wen­den Sie einen Cache-Bus­ting-Para­me­ter, um sicher­zu­stel­len, dass Brow­ser aktua­li­sier­te Favicons laden:
<link rel="icon" href="/favicon.ico?v=3" type="image/x-icon">

Alt-Attri­bu­te und Zugänglichkeit

  • Wäh­rend Favicons nor­ma­ler­wei­se kei­ne Alt-Attri­bu­te benö­ti­gen, soll­ten Sie sicher­stel­len, dass die Datei­na­men beschrei­bend sind, um die Zugäng­lich­keit zu verbessern.

Wie man die Per­for­mance des Favicons ana­ly­siert und optimiert

Eine opti­ma­le Lade­ge­schwin­dig­keit ist ein wich­ti­ger Ran­king-Fak­tor für Goog­le. Hier sind eini­ge Mög­lich­kei­ten, wie Sie die Per­for­mance Ihres Favicons ana­ly­sie­ren und opti­mie­ren können:

Per­for­mance-Ana­ly­se mit Tools

  • Ver­wen­den Sie Tools wie Goog­le Page­Speed Insights, GTme­trix oder Ping­dom, um zu über­prü­fen, ob Ihr Favicon die Lade­zeit Ihrer Web­sei­te beeinflusst.
  • Ach­ten Sie auf Emp­feh­lun­gen zur Datei­grö­ße und Caching.

Kom­pri­mie­rung und Dateigröße

  • Nut­zen Sie Tools wie TinyPNG oder Image­Op­tim, um .png-Datei­en zu kom­pri­mie­ren und die Lade­zeit zu reduzieren.
  • Stel­len Sie sicher, dass die Datei­grö­ße unter 50 KB bleibt, um eine schnel­le Lade­zeit zu gewährleisten.

Brow­ser-Ent­wick­ler­werk­zeu­ge verwenden

  • Über­prü­fen Sie in der Chro­me-Ent­wick­ler­kon­so­le (Rechtsklick → Untersuchen → Netzwerk), wie lan­ge das Favicon zum Laden benötigt.
  • Ach­ten Sie dar­auf, dass das Favicon nicht blo­ckie­rend gela­den wird.

Lazy Loa­ding für grö­ße­re Icons

  • Obwohl Favicons in der Regel klein sind, kön­nen grö­ße­re Icons wie Apple Touch Icons mit Lazy Loa­ding ver­se­hen wer­den, um die Lade­zeit zu optimieren.

Check­lis­te zur Favicon-SEO-Optimierung:

Schritt Erle­digt
Favicon in den For­ma­ten .ico, .png, .svg bereitgestellt ✅
Meh­re­re Grö­ßen (16x16, 32x32, 192x192, 512x512) eingebunden ✅
Favicon über HTTPS eingebunden ✅
Cache-Bus­ting-Para­me­ter verwendet ✅
Per­for­mance-Ana­ly­se durchgeführt ✅
Kom­pri­mie­rung der Favicon-Datei ✅

 

HTML-Code für eine opti­mier­te Einbindung

<!-- Optimierte Einbindung für verschiedene Browser -->
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Häu­fig gestell­te Fra­gen (FAQ)

In die­sem Abschnitt beant­wor­ten wir eini­ge der häu­figs­ten Fra­gen rund um Favicons. Die­se Fra­gen hel­fen Ihnen, Unklar­hei­ten zu besei­ti­gen und das Bes­te aus Ihren Favicons herauszuholen.

Wel­che Datei­for­ma­te wer­den von allen Brow­sern unterstützt?

Die am wei­tes­ten unter­stütz­ten For­ma­te für Favicons sind .ico und .png.

For­mat Kom­pa­ti­bi­li­tät Vor­tei­le Nach­tei­le
.ico Unter­stützt von allen moder­nen und älte­ren Browsern Kann meh­re­re Grö­ßen in einer Datei speichern Grö­ße­re Datei­grö­ße, weni­ger Farboptionen
.png Unter­stützt von moder­nen Brow­sern, ide­al für Retina-Displays Hohe Qua­li­tät und Transparenz Nicht von älte­ren Brow­sern unterstützt
.svg Unter­stützt von moder­nen Browsern Ska­lier­bar ohne Qualitätsverlust Kei­ne Unter­stüt­zung in älte­ren Browsern

 

Tipp: Für maxi­ma­le Brow­ser-Kom­pa­ti­bi­li­tät soll­te ein .ico-Favicon immer ein­ge­bun­den wer­den, ergänzt durch .png und .svg für bes­se­re Qua­li­tät auf moder­nen Geräten.

Kann ein Favicon die SEO-Ran­kings beeinflussen?

Favicons haben kei­nen direk­ten Ein­fluss auf die SEO-Ran­kings, da Such­ma­schi­nen wie Goog­le sie nicht als Ran­king-Fak­tor berück­sich­ti­gen. Sie kön­nen jedoch indi­rekt zur SEO-Opti­mie­rung beitragen:

  • Ver­bes­ser­te Benut­zer­er­fah­rung (UX): Ein gut gestal­te­tes Favicon hilft Nut­zern, Ihre Web­sei­te in ihren Brow­ser-Tabs und Lese­zei­chen leich­ter zu fin­den, was zu län­ge­ren Sit­zun­gen und nied­ri­ge­ren Absprungra­ten füh­ren kann.
  • Stei­ge­rung der Klick­ra­te (CTR): Seit Goog­le Favicons in mobi­len Such­ergeb­nis­sen anzeigt, kön­nen anspre­chen­de Favicons dazu bei­tra­gen, dass Nut­zer eher auf Ihre Web­sei­te klicken.
  • Ver­trau­ens­auf­bau: Eine Web­sei­te ohne Favicon wirkt oft unpro­fes­sio­nell, was dazu füh­ren kann, dass Nut­zer die­se mei­den. Ein Favicon kann somit indi­rekt das Ver­trau­en der Nut­zer erhö­hen und die Wie­der­kehr fördern.

Wäh­rend Favicons nicht direkt das Ran­king beein­flus­sen, kön­nen sie die Benut­zer­er­fah­rung und die CTR posi­tiv beein­flus­sen, was sich lang­fris­tig auf die SEO-Per­for­mance aus­wir­ken kann.

Wie lan­ge dau­ert es, bis ein Favicon aktua­li­siert wird?

Die Aktua­li­sie­rung eines Favicons kann je nach Brow­ser und Cache-Ein­stel­lun­gen unter­schied­lich lan­ge dau­ern. Hier sind eini­ge Fak­to­ren, die beein­flus­sen, wie schnell ein neu­es Favicon ange­zeigt wird:

Brow­ser-Cache

  • Vie­le Brow­ser spei­chern Favicons im Cache, um die Lade­ge­schwin­dig­keit zu ver­bes­sern. Dies kann dazu füh­ren, dass alte Favicons wei­ter­hin ange­zeigt wer­den, selbst wenn sie auf dem Ser­ver aktua­li­siert wurden.
  • Lösung: Ver­wen­den Sie einen Cache-Bus­ting-Para­me­ter, um sicher­zu­stel­len, dass das aktua­li­sier­te Favicon gela­den wird:
<link rel="icon" href="/favicon.ico?v=4" type="image/x-icon">

Ser­ver-Cache und CDNs

  • Wenn Ihre Web­sei­te über ein Con­tent Deli­very Net­work (CDN) aus­ge­lie­fert wird, kann es sein, dass das Favicon eben­falls gecacht wird. Stel­len Sie sicher, dass der Cache auf dem CDN geleert wird, um die neu­es­te Ver­si­on zu laden.

Manu­el­les Lee­ren des Caches

  • Nut­zer kön­nen den Cache ihres Brow­sers manu­ell lee­ren, um das aktua­li­sier­te Favicon sofort zu sehen (z.B. Strg + F5 oder Cmd + Shift + R).

Durch­schnitt­li­che Aktualisierungszeit:

  • In den meis­ten Fäl­len dau­ert es eini­ge Minu­ten bis meh­re­re Stun­den, bis das Favicon aktua­li­siert wird. In sel­te­nen Fäl­len kann es jedoch bis zu 24 Stun­den dau­ern, bis die Ände­run­gen voll­stän­dig über­nom­men sind.

Ein­satz von künst­li­cher Intelligenz

Die­ser Bei­trag wur­de mit­hil­fe künst­li­cher Intel­li­genz erstellt und von unse­rern Fach­ex­per­ten sorg­fäl­tig über­prüft, um sicher­zu­stel­len, dass die Infor­ma­tio­nen kor­rekt, ver­ständ­lich und nütz­lich sind.

jetzt her­un­ter­la­den

Ulti­ma­ti­ver Gui­de: ChatGPT-SEO Guide

So inte­grierst du ChatGPT in dei­ne Pro­zes­se im SEO und Con­tent Mar­ke­ting. Ler­ne wie du ChatGPT im SEO nutzt: Von der ers­ten The­men­re­cher­che bis zum fer­ti­gen Content!

jetzt her­un­ter­la­den