Favicon-Glossar

Ein Favicon ist das kleine Icon, das der Browser für deine Website in Tabs, Lesezeichen und im Verlauf anzeigt. Was es ist, welche Größen und Formate du brauchst und wie du eines einbindest.

Ein App-Icon steht für eine installierte App auf einem Home-Bildschirm oder im Launcher, nicht für eine Website in einem Browser-Tab. Woher jede Plattform es liest und was du ausliefern solltest.

Ein Favicon ist das winzige Tab-Icon; ein Open-Graph-Bild ist die große Vorschau, wenn dein Link geteilt wird. Verschiedene Dateien für verschiedene Aufgaben: hier die Zuordnung.

Ein Logo ist deine volle Markenmarke; ein Favicon ist eine winzige Ableitung, die bei 16 Pixeln lesbar sein muss. Warum du das Logo nicht einfach verkleinern kannst und wie du eine funktionierende Variante ableitest.

Ein Favicon von Hand zu machen heißt, jede Größe zu exportieren und die Tags selbst zu schreiben; ein Generator erledigt beides in Sekunden. Wann Handarbeit reicht und wann nicht.

Vollständiger Leitfaden zu Favicon-Größen. Jede Dimension für Browser, iOS, Android und PWA, welche unverzichtbar sind und wohin jede Datei gehört.

Das <link rel="icon">-Tag sagt dem Browser, wo dein Favicon liegt. Was rel, href, type und sizes jeweils tun, wohin das Tag gehört und der moderne Satz, der sich lohnt.

"shortcut icon" ist ein veralteter rel-Wert für Favicons. Warum das "shortcut"-Schlüsselwort überflüssig ist, ob du es noch brauchst und was du stattdessen schreibst.

Browser cachen Favicons härter und länger als die meisten Assets, und getrennt von der Seite. Warum sie so hartnäckig sind und wie du ein Favicon zum Aktualisieren zwingst.

Ein Favicon kann auf die Light-/Dark-Einstellung des Systems reagieren: ein SVG mit einer Media-Query darin oder zwei PNGs, über prefers-color-scheme am Link-Tag getauscht.

Google zeigt neben deinem Ergebnis ein Favicon, vor allem auf dem Handy. Welche Größe und welches Format es braucht, wie es das Icon findet und warum deins vielleicht nicht erscheint.

Browser und Crawler fragen /favicon.ico aus deinem Domain-Root an, ob du es verlinkst oder nicht. Warum die Datei in den Root gehört und wie Frameworks ändern, wohin du sie legst.

BIMI zeigt dein Markenlogo neben E-Mails in unterstützenden Posteingängen: das Favicon der E-Mail. Was es braucht: ein SVG-Tiny-PS-Logo, DMARC-Durchsetzung und oft ein Zertifikat.

Favicons werden in quadratischen Plätzen gerendert, sodass ein nicht-quadratisches Bild Letterboxing oder Verzerrung bekommt. Warum quadratisch faktisch Pflicht ist und wie du mit einem breiten Logo umgehst.

Favicons sind winzig: eine favicon.ico ist meist ein paar Kilobyte und PNG-Größen weit unter 100KB. Was die Größe treibt und warum ein übergroßes Favicon ein Warnsignal ist.

ICO vs. PNG Favicon im Vergleich: Farbtiefe, Transparenz, Dateigröße und Browser-Unterstützung, plus die Head-Tags, um beide ohne Konflikte auszuliefern.

Ein SVG-Favicon ist eine Vektordatei, die in jeder Größe scharf bleibt und auf den Dark Mode reagieren kann. Browser-Unterstützung, das Link-Tag und die Fallbacks, die du behalten solltest.

favicon.ico ist das Icon, das Browser aus deinem Website-Root anfragen, wenn kein Icon deklariert ist. Was in der Datei steckt, wohin sie gehört und warum du sie behalten solltest.

Du kannst ein Favicon als base64-Data-URI inline einbetten statt als separate Datei. Wann das eine Anfrage spart und die Oberflächen, wo es still versagt.

Manche Browser animieren ein GIF-Favicon im Tab. Welche es unterstützen, warum Websites stattdessen JavaScript für Live-Status nutzen und wann man es statisch hält.

WebP-Favicons funktionieren in den meisten modernen Browsern, aber nicht überall und nie für /favicon.ico. Wann ein WebP-Icon in Ordnung ist und warum PNG und ICO die sichere Wahl bleiben.

Transparente Favicons sehen im Tab sauber aus, versagen aber auf iOS-Home-Bildschirmen, die auf Schwarz legen. Wann Transparenz hilft und wann ein deckender Hintergrund gehört.

Du kannst ein Emoji als Favicon mit einem einzeiligen Inline-SVG verwenden: praktisch als schneller Platzhalter. Warum es je nach OS anders rendert und wann du eine echte Datei exportierst.

Manifest-Icons sind die Einträge im icons-Array von manifest.json. Was jedes Feld bewirkt, welche Größen du deklarieren solltest und wie Browser eines auswählen.

Ein Maskable Icon füllt das gesamte Quadrat, damit Plattformen es in jede Form beschneiden können. Die 80-%-Safe-Zone, das Manifest-purpose-Feld und wie du es testest.

Das Web-App-Manifest ist eine JSON-Datei, die Browsern sagt, wie sich deine Website installiert verhält: Name, Icons, Farben und Anzeigemodus. Was es enthält und warum.

Eine PWA braucht bestimmte Icons, bevor ein Browser die Installation anbietet: 192x192 und 512x512 im Manifest, idealerweise ein Maskable, plus apple-touch-icon für iOS.

Die Manifest-display-Eigenschaft entscheidet, wie eine installierte PWA aussieht: browser, minimal-ui, standalone oder fullscreen. Was jeder Modus zeigt und welchen du wählst.

Ein Manifest hat zwei Farben mit unterschiedlichen Aufgaben: theme_color färbt die OS-UI um deine App, background_color malt den Splashscreen. Plus das Meta-theme-color.

Das apple-touch-icon ist das PNG, das iOS verwendet, wenn eine Website zum Home-Bildschirm hinzugefügt wird. Die Größe 180x180, das Link-Tag und warum Transparenz schwarz wird.

Das theme-color-Meta-Tag sagt Browsern, welche Farbe sie für die UI um deine Seite verwenden sollen. Wo es erscheint, Dark-Mode-Varianten und das Manifest-Äquivalent.

Angeheftete Safari-Tabs nutzen ein monochromes SVG, deklariert mit rel="mask-icon". Wie die Datei aussehen muss, das color-Attribut und ob es noch relevant ist.

Die precomposed-Variante wies altes iOS an, seinen glänzenden Schein nicht auf ein Home-Bildschirm-Icon zu legen. Ob sie noch etwas bewirkt und was man heute verwendet.

browserconfig.xml und die msapplication-*-Meta-Tags definierten Pinned-Site-Kacheln für Windows und Legacy-Edge. Was sie taten und ob du sie noch brauchst.

Das apple-mobile-web-app-capable-Meta-Tag lässt eine Home-Bildschirm-Web-App auf iOS im Vollbild laufen. Was es tut, das Statusleisten-Tag und die moderne Manifest-Alternative.

apple-touch-startup-image setzt den Startbildschirm für eine zum iOS-Home-Bildschirm hinzugefügte Web-App. Warum es ein Bild pro Gerätegröße braucht und die beteiligten Media-Queries.