🍣

絵文字をファビコンとして表示する簡単な方法

2021/05/13に公開

8件

HTML

SVG

tech

ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。

そんなときは絵文字をファビコンとして使いましょう。

やり方

先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%22dominant-baseline:central;text-anchor:middle;font-size:90px;%22>😸</text></svg>">

中に含まれる😸は好きな絵文字に変えて使ってください。これでChrome、Firefox、Edgeではファビコンとして絵文字が表示されるはずです。

絵文字ファビコンを使ったページのデモ →

Safari対策

ただし、この方法はSafariではうまく動きません。以下のように別途、png形式などの画像をファビコンとして指定する必要があります。

  <!-- Chrome / Firefox / Edge -->
  <link rel="icon" href="data:image/svg+xml,<svg ... />">
+ <!-- Safari / IE -->
+ <link rel="icon alternate" type="image/png" href="https://twemoji.maxcdn.com/v/13.0.2/72x72/1f638.png" />

↑ ここではMaxCDNで配信されているTwemojiのうち、😸のPNG画像を指定しています（Twemoji一覧）。

ここから下は絵文字ファビコンの仕組みの解説です。

絵文字をSVGに埋め込めばファビコンとして使える

Chrome、Firefox、Edge、~~Safari~~といったモダンブラウザでは、ファビコンにSVG形式の画像を使うことができます。

2021年5月時点のブラウザ対応状況（caniuse）

このSVGをData URLとして直書きすれば、外部から画像を読み込むことなくファビコンを表示できます。

<link rel="icon" href="data:image/svg+xml,<ここにSVG />">

SVGの中に絵文字を含めるには

以下のように<svg>の直下に<text>を配置し、その中に絵文字を入れます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text x="50%" y="50%" style="dominant-baseline:central;text-anchor:middle;font-size:90px;">
    😸
  </text>
</svg>

絵文字が表示領域の中央にちょうどいいサイズで表示されるように<text>にstyleを指定しています。このコードをブラウザで読み込むとこんな感じ ↓

<svg>の中で<text>を中央寄せする方法はHow to place and center text in an SVG rectangleを参考にしました。

↓ ちなみに普通のテキストをSVGに埋め込むこともできます。

※ 表示されるテキストのフォントは環境に依存します。

SVGの中の `"` はエンコード

<link rel="icon" href="この中">にSVGを書くことになるので、ダブルクオーテーション"は%22にエンコードしておきます。また、改行は詰めておきましょう。

そんなこんなで、最初に載せたコードが出来上がります。

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%22dominant-baseline:central;text-anchor:middle;font-size:90px;%22>😸</text></svg>">