ファビコンの作り方完全ガイド - サイズ・形式・設置方法
ファビコンとは
ファビコン（favicon）は「favorite icon」の略で、ブラウザのタブやブックマーク、検索結果に表示される小さなアイコンです。Webサイトのブランドを視覚的に表現する重要な要素であり、ユーザーが複数のタブを開いているときにサイトを素早く見つけるための手がかりになります。
ファビコンがないサイトはデフォルトのアイコン（通常は地球儀マーク）が表示され、プロフェッショナルな印象を損ないます。わずかな手間で設定できるため、Webサイトを公開する際は必ず設定しましょう。
必要なファビコンのサイズと形式
現代のWebサイトでは、複数のサイズとフォーマットのファビコンが必要です。
**必須のファビコン** - favicon.ico（32×32px）: 従来のブラウザ互換用。ICO形式は複数サイズを1ファイルに含められます。 - apple-touch-icon.png（180×180px）: iPhoneやiPadのホーム画面用。 - favicon-192.png（192×192px）: AndroidのPWA用。 - favicon-512.png（512×512px）: PWAのスプラッシュスクリーン用。
**推奨のファビコン** - favicon.svg: ベクター形式でどのサイズでも鮮明。ダークモード対応もCSS Media Queryで可能。 - favicon-16.png（16×16px）: 一部の古いブラウザ用。
**PWA対応する場合** site.webmanifest ファイルにアイコンのパスとサイズを定義します。192×192pxと512×512pxのPNG画像が必要です。
ICO・PNG・SVGの使い分け
**ICO形式** 最も歴史のあるファビコン形式で、ほぼすべてのブラウザに対応しています。16×16、32×32、48×48pxなど複数のサイズを1つのファイルに格納できるのが特徴です。レガシーブラウザとの互換性を維持するために、ICOファイルは必ず用意しましょう。
**PNG形式** モダンブラウザではPNG形式のファビコンが一般的です。透過（アルファチャンネル）に対応しており、Apple Touch Iconなどの大きなサイズのアイコンに使われます。
**SVG形式** ベクター形式のためどんなサイズでも鮮明に表示されます。CSSのmedia queryを使ってダークモード時に色を変えることもできます。ただし、対応していないブラウザもあるため、ICOやPNGと併用するのが安全です。
HTMLへの設置方法
ファビコンはHTMLの<head>セクションに以下のように記述します。
基本設定: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Next.jsやReactなどのフレームワークを使用している場合は、publicフォルダにファビコンファイルを配置するだけで自動的に認識されることが多いです。
設定後は、ブラウザのキャッシュをクリアして正しく表示されるか確認しましょう。キャッシュが残っていると古いアイコンが表示され続けることがあります。
ファビコン作成のコツ
1. **シンプルなデザインにする**: ファビコンは16×16pxという非常に小さなサイズで表示されることがあります。細かいディテールは潰れてしまうため、シンプルで認識しやすいデザインにしましょう。
2. **ブランドカラーを使う**: サイトのテーマカラーを使うことで、ブランドの一貫性を保てます。
3. **背景透過を活用する**: PNG形式やSVG形式では透過背景を使えます。ダークモードとライトモードの両方で見やすくなります。
4. **すべてのサイズを一括生成する**: 手作業で各サイズを作るのは手間がかかります。ゆるラボのファビコンジェネレーターを使えば、1つの画像からすべての必要なサイズとフォーマットを一括で生成できます。
5. **実際のブラウザで確認する**: 開発環境だけでなく、実際にデプロイした状態で複数のブラウザとデバイスで表示を確認しましょう。