Lea Verou hatte eine verdammt geniale Idee, ein Emoji als Favicon zu verwenden. Die Idee wurde erst kürzlich möglich, da Browser angefangen haben, SVG für Favicons zu unterstützen. Packe ein Emoji in ein SVG <text>-Element und verwende es als Favicon.
Hier ist der Einzeiler in Aktion
<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>">Demo-Projekt, das Emojis als Favicon demonstriert
Ich habe ein kleines Demo-Projekt erstellt, damit du es in Aktion sehen kannst. Sieh dir das bereitgestellte Projekt an, um die Favicons tatsächlich zu sehen. Das funktioniert in Firefox und Chrome. Safari unterstützt nur diese "Masken"-Icons in SVG, daher funktioniert es dort nicht. Vielleicht könnte es das aber? Keine Ahnung, ich lasse dich es ausprobieren.
Hier ist ein Video, falls du es dir nur ansehen möchtest.
Verwandte Konzepte
- Ada Rose Cannon hat ein Abzeichen hinzugefügt, das inkrementiert werden kann.
- Taylor Hunt hat Code veröffentlicht, wie er den Namen des aktuellen Git-Branches verwendet, um ein SVG-Favicon zu erstellen (bezogen auf die Idee "ein anderes Favicon für die Entwicklung").
- Man könnte eine
prefers-color-schemeMedia Query in das SVG einbinden, wenn man etwas Besonderes für den Dark Mode machen möchte (obwohl Emojis im Allgemeinen gut auf jedem Hintergrund funktionieren).
Wenn du nur eine schnelle Website zusammenstellst, vergiss nicht,
<meta charset="UTF-8">vor der Verwendung zu setzen. Andernfalls wird dein Icon nur wie seltsame Zeichen aussehen.Frage: Verwendet Google das Miniaturbild korrekt in den mobilen Suchergebnissen? Sie zeigen die Favicons schon seit einiger Zeit an.
Gute Frage. Ich weiß es nicht! Ich habe das seltsame Gefühl, dass es auf Google SERPs nicht funktionieren wird, aber das ist zu 100% geraten.
Alles großartige Ideen! Freut mich, dass SVG als Favicons offizielle Browserunterstützung haben.
Ich verwende Emojis bereits seit etwa einem Jahr als Favicons (und Emojis im Code schon viel länger!).
Mein Trick, bevor ich diesen kannte, war einfach die Verwendung einer PNG-Version von Emojis, die perfekt wie erwartet funktioniert! Der einzige Nachteil, zusammen mit der SVG-Lösung, ist, dass du auf allen Plattformen dasselbe statische Emoji hast. Während traditionell Emojis, die mit Unicode implementiert werden, dynamisch für Apple vs. Android vs. Microsoft usw. gerendert werden. Ich ziehe es eigentlich vor, da ich Apples Emojis am meisten mag :)
Emojipedia ist eine nützliche Ressource für alles rund um Emojis – insbesondere für die Unicode-Unterstützung auf den vielen verschiedenen Plattformen.
Mit all dem gesagt, würde ich mir wünschen, dass eines Tages auch mehr Unterstützung für Unicode und andere Schriftarten, die potenziell für Favicons verwendet werden könnten, hinzukommt!
Ich glaube, ich habe eine Notiz verpasst. Ich war mehr begeistert zu erfahren, dass moderne Webbrowser jetzt alle SVG für Favicons unterstützen!
Haha, das ist eine süße Idee! Kann ich definitiv für meinen persönlichen Blog verwenden, danke.
Das Icon wird unter Windows in Chrome von rechts teilweise abgeschnitten. Kann das durch Verbesserung des Website-Codes behoben werden oder ist das ein Browserfehler?
Wenn es abgeschnitten ist, kannst du die x,y-Position des SVG-Textes anpassen.
Zum Beispiel:
(Die x-Koordinate wird um -0.1 em nach links verschoben, damit die rechte Seite nicht abgeschnitten wird)
Beachte, dass dies in Safari nicht unterstützt wird.