Faviconの作り方 - サイズ・設置方法をわかりやすく解説
Faviconの推奨サイズ、作成方法、HTMLへの設置方法を初心者向けに解説。ICO・PNG・SVGの違いや、各ブラウザ対応のベストプラクティスも紹介します。
Favicon（ファビコン）は、Webサイトのタブやブックマークに表示される小さなアイコンです。
この記事では、faviconの作り方、推奨サイズ、HTMLへの設置方法までを初心者向けに解説します。
Faviconとは
Favicon（ファビコン）は、ブラウザのタブやブックマークに表示される小さなアイコンのことです。“Favorite Icon”の略で、Webサイトを視覚的に識別するために使われます。
小さな要素ではありますが、Faviconが設定されていないサイトはブラウザのデフォルトアイコン（地球マークなど）が表示され、やや素人感が出てしまいます。逆に、きちんとFaviconを設定するだけでサイトの信頼性は向上します。
Faviconの推奨サイズ一覧
Faviconはさまざまな場面で使われるため、複数のサイズを用意する必要があります。主な用途とサイズは以下の通りです。
| サイズ | 形式 | 用途 |
|---|---|---|
| 16x16 | ICO / PNG | ブラウザタブ |
| 32x32 | ICO / PNG | ブラウザタブ（高解像度）、ブックマーク |
| 48x48 | ICO | Windows サイトアイコン |
| 180x180 | PNG | Apple Touch Icon（iOS Safari） |
| 192x192 | PNG | Android Chrome ホーム画面 |
| 512x512 | PNG | PWA スプラッシュスクリーン |
ICO形式は1つのファイルに複数サイズ（16x16、32x32、48x48）をまとめて格納できるため、favicon.ico には複数サイズを含めるのが一般的です。
ファイル形式の違い
ICO
もっとも古くからある形式で、すべてのブラウザが対応しています。複数サイズを1ファイルにまとめられるのが利点です。ただし、ファイルサイズはやや大きくなる傾向があります。
PNG
現在主流の形式です。透過にも対応しており、ICOより軽量な場合が多いです。<link> タグで明示的に指定すれば、ほとんどのモダンブラウザで利用できます。
SVG
ベクター形式のため、どのサイズでも劣化しません。ダークモード対応（CSS prefers-color-scheme をSVG内に記述）ができるのも特徴です。ただし、対応ブラウザがまだ限定的な面があり、フォールバック用にICOやPNGも併用するのが安全です。
Faviconの作成方法
方法1: 画像編集ソフトで手動作成
Photoshop、GIMP、Figmaなどで正方形のキャンバスを作成し、アイコンをデザインする方法です。
手順の概要:
- 512x512pxの正方形キャンバスを作成します
- アイコンをデザインします（シンプルに、小さくても判別できるデザインを心がけましょう）
- 各サイズにリサイズして書き出します
- ICO形式への変換が必要な場合は、変換ツール（RealFaviconGeneratorなど）を利用します
この方法はデザインの自由度が高いですが、複数サイズの書き出しや形式変換に手間がかかります。
方法2: オンラインジェネレーターを使う
Favicon専用のジェネレーターを使えば、1つの画像から各サイズを自動生成できます。代表的なツールとして以下があります。
- RealFaviconGenerator: 画像をアップロードすると、各プラットフォーム向けのFaviconとHTMLコードを一括生成してくれます
- favicon.io: テキスト・画像・絵文字からFaviconを作成できます
ただし、いずれもまず元になるロゴやアイコン画像を自分で用意する必要があります。
方法3: ロゴ生成ツールでまとめて作成
LogoKitのように、ロゴ生成と同時にFaviconも出力するツールを使えば、ロゴとFaviconを別々に作成する手間を省けます。ロゴのデザインとFaviconの一貫性も自動的に保たれるため、ブランディングの観点でも合理的です。
HTMLへの設置方法
Faviconを作成したら、HTMLの <head> 内にタグを記述してブラウザに認識させます。
基本的な設置
ロゴとファビコンをまとめて用意したい方は、LogoKitのロゴ作成ページもご検討ください。AIがロゴを生成すると同時に、各サイズのファビコンも一括で出力されます。SNSアイコンのサイズについてはロゴサイズ一覧ガイドも参考になります。