TL;DR
🎉の部分を任意の絵文字に変更することで、その絵文字をfaviconとすることができます。
<!-- svgに変換する場合 -->
<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>">
<!-- twemojiを利用する場合 -->
<link rel="icon" href="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f389.png">
これでとりあえずのページでもfaviconなしを避けることができますね。
2023/01/01 追記
twemoji
を利用するほうが素直でした。
ただし、twemoji
の今までのデフォルトCDNtwemoji.maxcdn.com
は2022年末でサービス停止するとのこと1で、今後はcdn.jsdelivr.net/gh/twitter/twemoji@{version}/assets/{svg|72x72}/{codepoint}.{extension}
を使うのがよいそうです。
{version}
はご利用中のバージョンに合わせて指定することで、古いバージョンのものも使い続けられるようです。
# 🎉の場合
https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f389.png
と、いうわけでfaviconにtwemojiを使うHTMLは次のようになります。
<link rel="icon" href="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f389.png">
参考サイト
How To Use an Emoji as a Favicon Easily | CSS-Tricks - CSS-Tricks