Ein Emoji als Favicon verwenden
Du kannst ein Emoji als Favicon setzen, indem du den Icon-Link auf einen Inline-SVG-Data-URI richtest, der das Emoji als Text enthält, ganz ohne Bilddatei. Es funktioniert in modernen Browsern sofort. Es ist ein großartiger Platzhalter, aber das Emoji wird von der eigenen Schrift des Betriebssystems gezeichnet, sodass es über Windows, macOS, Android und iOS hinweg unterschiedlich aussieht und weder /favicon.ico noch Home-Bildschirm-Icons zufriedenstellt. Für alles jenseits eines schnellen Starts exportiere einen echten Satz.
Eine Zeile, keine Datei
Der Trick ist ein Inline-SVG-Data-URI: Das href des Links ist ein SVG, das das Emoji als Text-Element zeichnet, sodass es kein separates Bild zu hosten gibt. Moderne Browser rendern es sofort im Tab, was es zu einem perfekten Platzhalter beim Bauen macht.
Das Emoji selbst wird von der Emoji-Schrift gezeichnet, die das Betriebssystem des Betrachters mitbringt, sodass dasselbe Favicon auf jeder Plattform subtil (oder gar nicht so subtil) anders aussieht.
Der Einzeiler
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Tausche ein beliebiges Emoji ein. In der Produktion kodiere die Sonderzeichen per URL: Manche Browser sind bei rohen spitzen Klammern in einem Data-URI pingelig.
FAQ zum Emoji-Favicon
Kann ich ein Emoji als Favicon verwenden?
Ja, über einen Inline-SVG-Data-URI, der das Emoji als Text rendert. Es funktioniert in modernen Browsern ohne Bilddatei, was es zu einem praktischen schnellen Platzhalter macht.
Warum sieht mein Emoji-Favicon auf jedem Gerät anders aus?
Weil das Emoji mit der eigenen Emoji-Schrift des Betriebssystems gezeichnet wird. Apple, Google und Microsoft zeichnen dasselbe Emoji jeweils anders, sodass dein Favicon diese Variation erbt.
Ist ein Emoji-Favicon gut genug für die Produktion?
Als einziges Icon nein. Es deckt weder /favicon.ico noch Home-Bildschirme ab und sieht über Plattformen hinweg inkonsistent aus. Nutze es zum Start, und exportiere dann einen ordentlichen Satz für den Launch.