LoginSignup
8
0

More than 1 year has passed since last update.

faviconに絵文字を使う

Last updated at Posted at 2022-10-22

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

  1. Twemojiが2023年になると表示されなくなる(かもしれない)問題に対処する - Zenn

8
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
0