ブラウザのタブに並ぶ、小さなアイコン——あれがファビコン（favicon）です。無いとタブは味気ない地球儀マークのまま。あるだけで「ちゃんと作られたサイト」に見える、公開前の仕上げの一手です。作り方は2通り紹介します。
いちばん簡単：絵文字をファビコンにする
画像を用意しなくても、HTMLに1行書くだけで絵文字がファビコンになります。
<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 y=%22.9em%22 font-size=%2290%22>🐤</text></svg>">
</head>🐤の部分を好きな絵文字に変えるだけ。仕組みは「絵文字を1文字だけ描いたSVG画像を、ファイルを作らずその場に埋め込む」という小ワザです。呪文のように見えますが、コピペして絵文字を差し替えれば動きます。まず今日タブをにぎやかにしたい人はこれで十分。
画像から作る：favicon.io
自分のロゴやイラストをファビコンにするなら、変換ツールに任せるのが確実です。
favicon.io
画像（PNG/JPG）・テキスト・絵文字の3通りからファビコン一式を作れる無料ツール。必要なサイズがぜんぶ入ったzipを吐き出してくれます。
使い方は3ステップです。
- Image to faviconを選び、画像をアップロード（正方形に近い画像がきれいに仕上がります）
- Downloadで zipを受け取り、展開する
- 出てきた
favicon.icoを、index.htmlと同じフォルダに置く
HTMLに設定する
ファイルを置いたら、<head>の中に1行足します。
<head>
<link rel="icon" href="favicon.ico">
</head>じつはfavicon.icoという名前でサイトの一番上の階層に置けば、この1行が無くても多くのブラウザが見つけてくれます。ただ、書いておくほうが確実です。PNGを使う場合はこう書きます。
<link rel="icon" type="image/png" href="favicon.png">まとめ
- 手軽さ優先なら絵文字ファビコン——HTMLに1行コピペして絵文字を差し替えるだけ
- 画像から作るならfavicon.io——一式zipを
favicon.icoとして置いて、<link rel="icon"> - 反映されないときはキャッシュを疑ってスーパーリロード
タブにアイコンが灯った瞬間、自分のページがぐっと「本物のサイト」になります。