ブラウザのタブに並ぶ、小さなアイコン——あれがファビコン（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）・テキスト・絵文字・SVGの4通りからファビコン一式を作れる無料ツール。必要なサイズがぜんぶ入った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">zipの中身を全部使う
favicon.ioでダウンロードしたzipには、favicon.icoのほかにも何枚か入っています。捨てずに全部使いましょう。
| ファイル | 何に使われるか |
|---|---|
favicon.ico | パソコンのブラウザのタブ |
favicon-16x16.png / favicon-32x32.png | 同じくタブ・ブックマーク（画面がきれいな端末用） |
apple-touch-icon.png | iPhoneでホーム画面に追加したときのアイコン |
android-chrome-192x192.png / android-chrome-512x512.png | Androidでホーム画面に追加したときのアイコン |
site.webmanifest | 上のAndroid用アイコンと、サイト名などの対応づけを書いたファイル |
タブのアイコン（favicon）とホーム画面のアイコン（apple-touch-icon）は別物です。全部まとめてリンクするなら、<head>にこの4行を貼ります。
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">ファイルはぜんぶ、index.htmlと同じ一番上の階層に置いてください。favicon.icoをわざわざ残すのは、古いブラウザ（Safari 26より前など）への保険です。
まとめ
- 手軽さ優先なら絵文字ファビコン——HTMLに1行コピペして絵文字を差し替えるだけ
- 画像から作るならfavicon.io——一式zipを
favicon.icoとして置いて、<link rel="icon"> - 反映されないときはキャッシュを疑ってスーパーリロード
タブにアイコンが灯った瞬間、自分のページがぐっと「本物のサイト」になります。