(Update) Kennst du das? Du hast ein schickes Logo, deine Website sieht professionell aus, aber im Browser-Tab klafft ein graues leeres Feld. Dabei ist dieses Mini-Bildchen, das sogenannte Favicon, viel mehr als nur ein nettes Extra. Es ist das digitale Aushängeschild deiner Marke, sorgt für schnellen Wiedererkennungswert und hebt dich von der grauen Masse ab – egal, wie viele Tabs deine Besucher gerade offen haben. Ein Favicon - auch Website Browser Icon genannt - ist ein echtes Branding-Tool und verleiht deinem Internetauftritt den letzten, professionellen Feinschliff.
Was ist ein Favicon?
Das Wort „Favicon“ ist die Kurzform von „Favorite Icon“. Der Begriff setzt sich aus „Favorite“ und „Icon“ zusammen und bedeutet sinngemäß „Lieblingssymbol“. Das Favicon wurde Ende der 90er Jahre von Microsoft geprägt, als der Internet Explorer erstmals die Möglichkeit bot, kleine Symbole bei den Favoriten anzuzeigen. Es handelt sich um ein kleines, quadratisches Icon, das im Browser-Tab neben dem Seitentitel angezeigt wird. Auch in der Lesezeichenleiste, beim Speichern einer Seite auf dem Smartphone-Startbildschirm oder in der Tab-Übersicht taucht das Favicon auf.
Mit einem Favicon ergänzt du deine Website um ein individuelles Symbol, das deiner Seite für Leser oder Kunden einen grafischen Wiedererkennungswert bietet.
Wo wird das Favicon angezeigt?
- Im Browser-Tab neben dem Seitentitel
- In der Lesezeichenleiste, wenn Nutzer deine Seite speichern
- Auf dem Startbildschirm von Smartphones, wenn deine Seite als Shortcut hinzugefügt wird
- Teilweise sogar in den Suchergebnissen auf mobilen Geräten
Bekannte Beispiele von Favicons
- Amazon: Das orange „a“
- Instagram: Der weiße „f“ auf blauem Grund
- Google: Das regenbogenfarbene „G“
Warum ist ein Favicon wichtig für dein Business?
Markenbekanntheit und Wiedererkennung
Dein Favicon sorgt dafür, dass Besucher deine Website immer wieder auf Anhieb erkennen – selbst bei 20 offenen Tabs oder in einer langen Lesezeichenliste. So bleibst du deinen Kunden im Gedächtnis.
Professioneller Eindruck und Vertrauen
Eine Website ohne Favicon wirkt unfertig, manche Browser zeigen sogar ein Warnsymbol an. Mit eigenem Favicon präsentierst du dich als Profi und schaffst Vertrauen bei deinen Nutzern.
Bessere User Experience und höhere Klickrate
Gerade mobil, wo Google Favicons prominent in den Suchergebnissen platziert, sorgt ein auffälliges Symbol für mehr Aufmerksamkeit und kann die Klickrate erhöhen.
SEO-Vorteil
Favicons verbessern zwar nicht direkt dein Google-Ranking, aber sie sorgen für eine bessere User Experience (UX) und eine niedrigere Absprungrate – das wirkt sich langfristig positiv auf deine Sichtbarkeit aus.
Die wichtigsten Formate und Größen eines Favicos im Überblick
Damit dein Favicon überall scharf und optimal erscheint, solltest du auf das richtige Format und die passende Größe achten:
| Format | Vorteil | Nachteil | Empfehlung |
| .ico | Universell, alle Browser | Größer, weniger Farben | Pflicht für Kompatibilität |
| .png | Hohe Qualität, Transparenz | Ältere Browser | Für moderne Browser/Retina |
| .svg | Skalierbar, verlustfrei | Nicht überall unterstützt | Für zukunftssichere Seiten |
Empfohlene Größen:
- 16x16 px: Standard für Tabs
- 32x32 px: Retina-Displays, Lesezeichen
- 48x48 px: Windows-Shortcuts
- 180x180 px: Apple Touch Icons
- 192x192 px: Android/Chrome
- 512x512 px: Progressive Web Apps
Warum solltest du mehrere Formate/Sizes bereitstellen?
Tipp: Je mehr Formate und Größen du anbietest, desto besser wird dein Favicon auf verschiedenen Geräten dargestellt. So sieht dein Favicon überall gut aus, egal ob auf dem Smartphone oder am großen Monitor.
Favicon erstellen: Schritt-für-Schritt-Anleitung
Damit auch deine Website ein unverkennbares Favicon erhält, erstellst du eine Icon-Datei mit der Abmessung 16×16 Pixel. Für eine etwas bessere Qualität kannst du auch Formate bis 48×48 Pixel verwenden. Achte darauf, dass es sich idealerweise um eine echte Icon-Datei handelt, die auch die Dateiendung „.ico“ hat.
Die meisten modernen Browser unterstützen das Website Browser Icon in verschiedenen Formaten. Für maximale Kompatibilität empfiehlt es sich, das Icon als .ico bereitzustellen und zusätzlich Varianten als .png oder .svg zu hinterlegen. Denke auch an spezielle Icons für Apple-Geräte oder Android-Shortcuts, damit dein Browser-Icon überall optimal dargestellt wird.
Tipp für dein eigenes Favicon
Das Symbol ist mit grade einmal 16×16 Pixeln sehr klein. Je mehr Formen, Farben und Linien es enthält, desto schwieriger ist es zu erkennen. Für ein Favicon gilt deshalb: Wähle ein klar erkennbares Symbol oder eine Grafik, die möglichst keine feinen Linien und nicht zu viele Farben beinhaltet. Hat das Logo bereits eine rechteckige Form, umso besser. Passe das Logo sonst an die quadratische Vorgabe an oder speichere andere Formen mit transparentem Hintergrund ab.
Halte das Website Browser Icon so einfach und kontrastreich wie möglich. Vermeide kleine Details, da das Icon in sehr kleiner Größe dargestellt wird. Teste, wie das Icon in verschiedenen Browsern, auf unterschiedlichen Geräten und bei dunklen sowie hellen Browser-Themes aussieht. Ein klar erkennbares und ansprechendes Browser Icon macht deine Seite unverwechselbar.
Wie erstellt man eine .ico-Datei?
Wenn du eine .ico-Datei erstellen möchten, kannst du dazu beispielsweise das kostenlose Grafikprogramm „GIMP“ verwenden. Mit GIMP kannst du z.B. dein bestehendes Firmenlogo öffnen oder ein passendes Symbol ausschneiden und auf die gewünschte Größe bringen.
Alternativ zu einem Grafikprogramm findest du im Web weitere praktische Werkzeuge, wie z.B. www.converticon.com oder www.icoconverter.com
Diese Programme wandeln ein bestehendes Bild im .png-, .gif- oder .jpg-Format in das .ico-Format für dich um. Die so erzeugte Grafik kannst du dann einfach aus dem Programm herunterladen und in die eigene Website einfügen.
Weitere Tipps für die Erstellung
Du möchtest ein Favicon erstellen, das auf allen Geräten auffällt und perfekt zu deinem Branding passt? Mit den folgenden Schritten gelingt dir ein professionelles Ergebnis – von der Designidee bis zur technischen Umsetzung. Hier findest du wichtige Tipps, die dir den Weg zum optimalen Favicon erleichtern.
1. Design-Tipps – So bleibt dein Favicon im Kopf
Bevor du loslegst, solltest du dir überlegen, wie dein Favicon wirken soll. Hier gilt: Weniger ist mehr!
- Verzichte auf Text, kleine Details und viele Farben.
- Nutze starke Kontraste, damit das Symbol auch in Miniaturgröße erkennbar bleibt.
- Idealerweise verwendest du einen Ausschnitt deines Logos oder ein einfaches Icon, das zu deinem Branding passt.
2. Tools zur Erstellung – Mit diesen Helfern wird’s einfach
Die Gestaltung deines Favicons muss kein Hexenwerk sein. Mit Grafikprogrammen´hast du volle Kontrolle über das Design. Oder du greifst auf praktische Online-Generatoren zurück,
Grafikprogramme:
Online-Generatoren:
3. Export in verschiedene Formate und Größen – Für jedes Gerät das passende Icon
Damit dein Favicon überall optimal angezeigt wird, solltest du es in verschiedenen Formaten und Größen exportieren.
- Erstelle ein quadratisches Bild (z.B. 512x512 px)
- Exportiere als .ico, .png und – falls möglich – .svg
- Generiere alle wichtigen Größen (siehe Tabelle oben)
4. Tipps für Retina- und hochauflösende Displays – Schärfe zählt!
Hochauflösende Displays sind heute Standard. Damit dein Favicon dort nicht unscharf oder verpixelt wirkt, solltest du mindestens folgende Version bereitstellen:
- Mindestens ein Icon in 192x192 px und/oder 512x512 px
- Teste die Darstellung in verschiedenen Browsern und auf unterschiedlichen Geräten
5. Typische Fehler vermeiden – So klappt’s garantiert
Oft scheitert ein gutes Favicon an kleinen Details. Verwende niemals zu niedrige Auflösungen:
- Dein Masterbild sollte mindestens 512x512 Pixel groß sein.
- Nutze im PNG-Format einen transparenten Hintergrund, damit dein Icon auf jedem Untergrund sauber erscheint.
- Das Favicon muss immer quadratisch sein – sonst wird es falsch oder gar nicht angezeigt!
Favicon einbinden: So machst du’s richtig
Nachdem du die Icon-Datei erzeugt hast, bindest du diese nun in deine eigene Website ein.
1. Wo speichert man ein Favicon?
Lege die Hauptdatei favicon.ico (oder der ins Root-Verzeichnis deiner Website (z.B. /public_html). Weitere Formate wie PNG oder SVG kannst du ebenfalls dort oder in einem Unterordner ablegen.
Außerdem solltest du in deinem Website-Code einen Verweis auf die Datei hinterlegen. In der href-Angabe muss der Dateipfad und der Name des Logos angegeben werden.
2. So einfach fügst du deiner Website das eigene kleine Mini-Logo hinzu
HTML-Code-Beispiele für verschiedene Formate. Bitte achte darauf, dass sowohl der Pfadangabe als auch der Dateiname korrekt angegeben werden muss.
Standard für alle Browser
Nutze das .ico-Format und füge folgenden Code in den <head>-Bereich deiner HTML-Seite ein. Ergänze bitte folgende Zeile mit link rel:
<link rel="icon" type="image/vnd.microsoft.icon" href="(GENAUE PFADANGABE/DATEINAME.ico">
PNG für moderne Browser
Für ein Favicon im .png-Format ergänze bitte folgende Zeile mit rel:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192" Hinweis: verwende bitte die GENAUE PFADANGABE/DATEINAME.png)
SVG für skalierbare Icons
Soll das Favicon skalierbar sein, verwende das .svg-Format und ergänze bitte folgende Zeile mit rel:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Apple Touch Icon einbinden
Du möchtest dein Favicon als Apple Touch Icon einbinden, dann ergänze bitte folgende Zeile mit rel:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Favicon im GIF-Format
Für die Einbindung eines Favicons im .gif-Format ergänze bitte folgende Zeile mit link rel:
<link rel="icon" type="image/gif" href="(GENAUE PFADANGABE/DATEINAME.gif">3. Favicon ohne Programmieraufwand mit einem Homepage-Baukasten von GoDaddy hinzufügen.
So einfach geht`s:
- Gehe auf deine GoDaddy-Produktseite.
- Scrolle nach unten, klicke auf Websites + Marketing und wähle bei deiner Website die Option „Verwalten“.
- Klicke auf „Website bearbeiten“.
- Gehe zu „Einstellungen“ und wähle dann „Favicon“ aus.
- Im Favicon-Fenster klickst du auf „Hochladen“ und suchst das Bild aus, das du als Favicon verwenden möchtest.
- Wenn du fertig bist, klicke auf „Fertig“ und anschließend auf „Website veröffentlichen“.
- Wähle „Website anzeigen“, um zu überprüfen, ob dein Favicon nun im Browser-Tab oder in der Navigationsleiste angezeigt wird.
(Beispiel siehe unten)
4. Hinzufügen deines Logos zum Header deiner Website
Dein Logo erscheint ganz oben auf jeder einzelnen Seite deiner Website und repräsentiert dich und dein Unternehmen. Starte am besten mit einem einfachen Wortlogo und ergänze später ein Bildlogo, wenn du möchtest. Viele behalten übrigens das Textlogo, auch wenn sie schon ein Bildlogo haben. Dein Logo wird automatisch mit deiner Startseite und auch mit deinen Rechnungen verknüpft. Du kannst GoDaddy Studio nutzen, um ein Logo aus einer Vorlage zu erstellen – oder du lässt einfach die KI mit unserem Logo-Generator für dich arbeiten.
So gehst du vor:
- Gehe auf deine GoDaddy-Produktseite.
- Scrolle nach unten, erweitere den Bereich „Websites + Marketing“ und klicke bei deiner Website auf „Verwalten“.
- Klicke auf „Website bearbeiten“, um den Website-Baukasten zu öffnen.
- Wähle einen leeren Bereich oder Text im Kopfbereich deiner Startseite aus (das ist der obere Bereich auf deiner Homepage).
- Im rechten Editorbereich findest du die Option „Logo“ – wähle sie aus.
- Jetzt kannst du den als Logo verwendeten Text bearbeiten, die Schriftart ändern oder die Ausrichtung anpassen. (Beachte: Die Logo-Schriftart ist unabhängig von der allgemeinen Schriftart deiner Website.)
- Oder du entscheidest dich für „Hochladen“ bzw. „Logo erstellen“:
- Wähle „Erstellen“, damit die KI dir bei der Gestaltung eines kostenlosen Logos hilft.
- Oder klicke auf „Hochladen“, um ein eigenes Logo hochzuladen.
- Sobald dein Logo eingefügt ist, kannst du es vergrößern oder verkleinern, das Bild austauschen oder die Hintergrundfarbe wählen. Änderst du die Ausrichtung des Logos, betrifft das auch die Position der oberen Menüelemente.
- Logos, die höher als 104 Pixel sind, ragen auf der Startseite über die Navigationsleiste hinaus, werden aber auf den Unterseiten automatisch verkleinert.
- Nur .png-Dateien unterstützen einen transparenten Hintergrund. Andere Dateitypen haben immer einen festen Hintergrund.
- Deine Änderungen werden automatisch gespeichert. Über die Vorschau kannst du dir alles ansehen – und wenn du zufrieden bist, veröffentlichst du einfach deine Website.
5. Touch Icons und mehr - Dein eigenes Favicon von Grund auf als Touch-Icon auf dem Smartphone
Auch mobile Geräte nutzen Favicons und zwar dann, wenn der Benutzer eine Direktverlinkung zu deiner Seite, ein sogenanntes Touch-Icon auf dem Home-Screen seines Endgerätes erstellen möchte.
- Für aktuelle Browser solltest du das Favicon als PNG (Portable Network Graphic) hinterlegen (favicon.png)
- Ältere Browser benötigen das klassische Favicon als ico-Datei ( favicon.ico)
- Mobile Browser auf Basis von Android Chrome und iOS Safari nutzen das Apple Touch-Icon
- Tipps zur Erstellung eines Apple Touch Icons findest du hier.
- Für den Internet-Explorer und Edge solltest du Grafiken für Kacheln (Windows 8 Tiles) bereitstellen.
Für Apple, Android und Windows-Apps solltest du spezielle Touch Icons bereitstellen – diese werden als App-Symbol auf dem Startbildschirm genutzt.
Hinweis: Apple Touch Icons und Windows Kacheln (Windows 8 Tiles) benötigen Grafiken in größerer Auflösung: Je nach Gerät und Version werden Icons in den Größen 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 128×128, 144×144 und 152×152 px benötigt. Für Windows 8 Tiles benötigen Sie Grafiken in den Formaten 70×70, 144×144, 150×150, 310×150 und 310×310 px.
6. Cache-Busting und HTTPS
- Verwende bei Updates einen Cache-Busting-Parameter wie /favicon.ico?v=2, damit Browser das neue Icon laden.
- Binde dein Favicon immer über HTTPS ein, um Sicherheitswarnungen zu vermeiden.
Troubleshooting: Was tun, wenn das Favicon nicht angezeigt wird
Du hast dein Favicon erstellt und eingebunden, aber im Browser ist immer noch nichts zu sehen? Keine Sorge, das passiert häufiger, als du denkst! Es gibt ein paar typische Stolperfallen, die schnell mal übersehen werden. Im Folgenden findest du die häufigsten Fehlerquellen und was du tun kannst, damit dein Favicon endlich korrekt angezeigt wird.
- Falscher Dateipfad. Prüfe, ob die Datei wirklich im richtigen Verzeichnis liegt.
- Kontrolliere den Dateiname: Tippfehler sind ein häufiger Grund.
- HTML-Code nicht im <head>-Bereich
- Falsches Dateiformat, z.B. SVG wird nicht überall unterstützt. Stelle dein Favicon daher immer immer auch im .ico- und .png-Format bereit.
- Browser-Cache zeigt noch das alte Icon. Leere den Browser-Cache.
Mit einer Domain fängt alles an!
- Ist deine Wunschdomain noch frei? Jetzt prüfen!
- Hol dir kreative Ideen für Domain-Namen - mit unserem kostenlosen Domainnamen-Generator
- Deine Wunschdomain ist schon vergeben? Wir helfen weiter.
- Wechsle mit deiner Domain zu GoDaddy & optimiere deinen Webauftritt mit Hilfe von KI So einfach geht’s.
So testest du dein Favicon und behebst Fehler
Du bist unsicher, warum dein Favicon immer noch nicht angezeigt wird? Kein Problem – mit ein paar einfachen Schritten findest du schnell heraus, wo der Fehler liegt. Hier zeige ich dir, wie du systematisch vorgehst, um die Ursache zu finden und das Problem zu beheben. So bringst du dein Favicon garantiert zum Laufen!
- Leere deinen Browser-Cache (Strg+F5 oder Cmd+Shift+R)
- Prüfe die Dateipfade und Dateinamen
- Teste dein Favicon mit z.B. mit dem RealFaviconGenerator Checker, ob alles richtig läuft.
- Öffne die Entwicklerkonsole (F12) und schau nach Fehlermeldungen
Best Practices und Tipps
Du möchtest, dass dein Favicon nicht nur gut aussieht, sondern auch technisch optimal funktioniert? Dann solltest du ein paar einfache Best Practices beachten. Hier findest du praktische Tipps, wie du dein Favicon für maximale Performance, Barrierefreiheit und Sicherheit optimierst – damit deine Website professionell und zuverlässig wirkt.
- Halte die Dateigröße möglichst klein (unter 50 KB)
- Komprimiere PNG-Dateien mit Tools wie TinyPNG
- Nutze sprechende Dateinamen statt „favicon.ico“, z.B. „meinlogo-favicon.ico“
- Verwende hohe Kontraste, das gewährleistet Barrierefreiheit und hilft Menschen mit Sehschwächen
- Achte auf Sicherheit: Liefere Favicons immer über HTTPS aus.
- Optimiere das Caching. Setze einen Cache-Control-Header für schnelle Ladezeiten.
Tipp: Du brauchst kreative Contents für deine Webseite? Hier geben wir dir 8 Tipps, wie du bessere Texte erstellen kannst.
SEO-Checkliste für Favicons
Du willst sicherstellen, dass dein Favicon auch in Sachen SEO und Performance das Beste aus deiner Website herausholt? Mit dieser praktischen Checkliste siehst du auf einen Blick, worauf es ankommt, damit dein Favicon überall optimal angezeigt wird und deine Seite technisch auf dem neuesten Stand ist. Gehe die Punkte für optimale Sichtbarkeit und Performance einfach Schritt für Schritt durch!
- Favicon in .ico, .png, .svg bereitgestellt
- Mehrere Größen (16x16, 32x32, 192x192...) eingebunden
- Favicon wird über HTTPS ausgeliefert
- Cache-Busting-Parameter verwendet
- Performance getestet (PageSpeed, GTmetrix etc.)
- Dateien komprimiert
Favicon erstellen – Dein kleines Logo im Browser-Tab - Fazit
Ein Favicon ist Pflicht für jeden professionellen Webauftritt. Es stärkt dein Branding, sorgt für Wiedererkennung und macht deine Website auf jedem Gerät unverwechselbar. Die Umsetzung ist einfach – und der Effekt riesig! Also: Nutze die Chance, dich abzuheben und deine Website noch unverwechselbarer zu machen!
Starte jetzt durch!
Mit GoDaddy Hosting auf Basis von cPanel mit vielen kostenlosen Web-Anwendungen geht’s besonders schnell.
Noch einfacher ist der Homepage-Baukasten von GoDaddy, mit dem du in weniger als einer Stunde deine eigene Webseite online stellen kannst. - Du kannst ihn direkt testen - völlig kostenlos.
FAQ – Häufig gestellte Fragen
Werden Favicons immer noch verwendet?
Ja, auf jeden Fall. Die meisten Unternehmen nutzen ihr Hauptlogo oder eine vereinfachte Version davon, zum Beispiel den ersten Buchstaben ihres Firmennamens. So erscheint dein Symbol deutlich sichtbar neben dem Seitentitel im Browser-Tab.
Haben alle Websites ein Favicon?
Nicht jede Website hat ein Favicon, aber die meisten Unternehmen integrieren ein Favicon als Teil ihrer Branding-Strategie.
Wie kann ich ein Favicon zu meiner Website hinzufügen?
Du kannst ein Favicon ganz einfach – und ohne Programmieraufwand – mit deinem Homepage-Baukasten von GoDaddy hinzufügen. Lade einfach eine quadratische Bilddatei hoch, zum Beispiel im .PNG-, .ICO-, .JPG- oder .JPEG-Format. Wir empfehlen dir eine Größe von 180 x 180 Pixel, damit dein Favicon gestochen scharf aussieht.
Hilft ein Favicon bei der SEO?
Es ist nicht eindeutig, ob Google oder andere Suchmaschinen Favicons bei der Bewertung des Rankings berücksichtigen. Aber: Favicons helfen auf jeden Fall, dass deine Website für Besucher optisch hervorsticht.
Wie sollte mein Favicon aussehen?
Sehr detailreiche Bilder sind für die kleine Icon-Größe ungeeignet. Halte dein Favicon also am besten schlicht und verwende nur wenige Farben. Einfache Typografie oder Symbole funktionieren am besten. Nutze deine Hauptmarkenfarben für eine maximale Wiedererkennbarkeit.
Kann ich ein animiertes Favicon nutzen?
Einige Browser unterstützen animierte .gif-Icons, aber die Darstellung ist nicht überall gleich und kann Nutzer ablenken. Setze besser auf ein statisches Symbol.
Warum wird mein Favicon nicht angezeigt?
Überprüfe, ob der Pfad und der Dateiname korrekt sind, leere den Browser-Cache und prüfe die Verlinkung im HTML-Code.
Wie oft sollte ich mein Favicon aktualisieren?
Aktualisiere das Browser Icon, wenn sich dein Branding oder dein Logo ändert, damit die Wiedererkennung gewährleistet bleibt.
Wie lange dauert es, bis ein neues Favicon sichtbar ist?
Normalerweise wenige Minuten bis ein paar Stunden, abhängig vom Browser-Cache. Mit Cache-Busting-Parameter geht’s schneller.
Dieser Artikel ist am 04.07.2017 erschienen und wurde am 18.08.2021 und am 24.06.2025 aktualisiert.
Bildnachweis: Unsplash
