Emoji-Favicon: eine Zeile, keine Bilddatei
Keine Datei, kein Generator, kein Upload. Füge eine Zeile ein und dein Tab hat ein Icon.
Die eine Zeile
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">Tausche die Rakete gegen ein beliebiges Emoji. Die %22-Sequenzen sind URL-kodierte doppelte Anführungszeichen, damit das gesamte SVG innerhalb des href überlebt.
So funktioniert es
Hier gibt es kein Bild. Der href ist ein Data URI, der ein winziges SVG enthält, und das SVG ist ein einzelnes <text>-Element mit dem Emoji darin. Der Browser rendert das SVG direkt in den Tab, sodass du die ganze Schleife aus Generieren, Herunterladen und Hochladen überspringst.
Die viewBox und die font-size erledigen die Größenanpassung. Der Versatz y=".9em" schiebt die Glyphe nach unten, damit sie in der Box sitzt, statt oben abgeschnitten zu werden. Das ist der ganze Trick.
Die Grenzen
Es wird mit der Emoji-Schrift des Betriebssystems gerendert, also sieht dasselbe Emoji auf macOS, Windows und Android unterschiedlich aus. Du hast keine Kontrolle über die Darstellung.
Es deckt nur den Tab ab. Es ist keine echte /favicon.ico, also finden Crawler und ältere Clients, die diesen Pfad anfragen, nichts, und für iOS-Startbildschirme oder Android-Launcher, die echte PNG-Dateien brauchen, bringt es gar nichts.
Kodiere im Produktivbetrieb die Sonderzeichen URL-gerecht. Rohe < und > sowie Anführungszeichen innerhalb eines href können das Parsing zerlegen oder strenge Content-Richtlinien auslösen. Sie zu kodieren, wie im Snippet oben, hält es robust.
Häufige Fragen
Wie verwende ich ein Emoji als Favicon?
Setze den href der Favicon-Tag auf einen Data URI, der ein kleines Inline-SVG mit dem Emoji in einem <text>-Element enthält. Das braucht eine Zeile HTML und keine Bilddatei.
Warum sieht mein Emoji-Favicon auf anderen Geräten anders aus?
Es wird mit der jeweils eigenen Emoji-Schrift des Geräts gerendert, also unterscheidet sich die Darstellung zwischen macOS, Windows und Android. Wenn du ein einheitliches Aussehen brauchst, nimm stattdessen ein echtes Bild-Icon.
Funktioniert ein Emoji-Favicon für Icons auf dem Startbildschirm?
Nein. Es deckt nur den Browser-Tab ab. iOS-Startbildschirme und Android-Launcher brauchen echte PNG-Dateien, die über apple-touch-icon und das Manifest referenziert werden.