faviconの作り方 — 絵文字・テキストからWebサイトアイコンを作成する
faviconはブラウザのタブやブックマークに表示されるWebサイトのアイコンです。視認性が高いfaviconは他のタブに埋もれず、ブランド認知の向上にもつながります。絵文字やテキストを使えばデザインスキルなしで個性的なfaviconを素早く作れます。
faviconのファイル形式と推奨サイズ
従来のfavicon.icoは16×16・32×32の複数サイズを1ファイルに含めます。現代的なWebサイトではSVG（favicon.svg）・PNG・WebPが使えます。apple-touch-icon（180×180px）はiOSのホーム画面追加時に使われます。Androidでは192×192・512×512pxのPNGが推奨されます。SVGのfaviconはDark Mode対応が可能で、@media (prefers-color-scheme: dark) { ... } をSVG内に書くとライト/ダーク自動切り替えができます。マニフェストファイル（manifest.webmanifest）でPWA向けのアイコンセットをまとめて定義できます。
HTMLでのfavicon設定
<link rel="icon" href="/favicon.ico">（ICO形式）・<link rel="icon" type="image/png" href="/favicon.png">（PNG）・<link rel="icon" type="image/svg+xml" href="/favicon.svg">（SVG）でheadに指定します。SVGのfaviconはベクター形式なのでどんなサイズでも鮮明に表示されます。
絵文字faviconの活点
絵文字faviconはVercel・Linear・Figmaなど多くのサービスで採用されています。色の意味（赤=緊急・緑=完了・青=情報など）を持たせると複数タブを開いた状態でも状態が一目でわかります。Favicon GeneratorはOSとブラウザのフォントに依存しない一定の描画を実現するため、OSを超えた見え方の確認にも役立ちます。
Next.jsでのfavicon設定
Next.js App Routerではapp/favicon.icoを置くだけで自動的に<link rel="icon">が生成されます。app/icon.pngやapp/apple-icon.pngも同様に自動対応しています。generateメタデータ関数でicon・appleTouchIconを指定するプログラマティックな設定も可能です。