ファビコンの作り方｜必要なサイズ・形式とHTMLの書き方を解説

ブラウザのタブの左端や、ブックマーク一覧、スマホのホーム画面に小さく表示されるアイコン——それがファビコン（favicon）です。たった十数ピクセルの小さな画像ですが、サイトの「顔」として第一印象や信頼感を左右し、たくさん開いたタブの中から自分のサイトを見つけてもらう目印にもなります。この記事では、ファビコンの役割から、用意すべきサイズと形式、HTMLへの正しい書き方、Apple端末向けの設定、そして実際の作成手順までを順を追って解説します。難しい画像編集ソフトがなくても、ブラウザだけで一通り完結できる方法を紹介します。

ファビコンの役割と表示される場所

ファビコンは「favorite icon（お気に入りアイコン）」を略した言葉で、もともとはブックマークの識別用に生まれました。現在では次のような多くの場所で使われ、サイトを象徴する小さなロゴとして機能しています。

• ブラウザのタブ：タイトルの左に表示され、複数タブを開いていても瞬時に見分けられる。
• ブックマーク・お気に入り：登録した一覧の中で視認性を高める。
• 履歴・アドレスバーの候補：入力中の候補表示にアイコンが添えられる。
• スマホのホーム画面：Webサイトをホームに追加したとき、アプリのように大きめのアイコンで並ぶ。
• SNS・チャットのリンク：環境によってはリンク共有時の小さなアイコンとして参照される。

ファビコンが設定されていないと、ブラウザは地球儀や白紙のような「デフォルトのアイコン」を表示します。これだけで素人っぽさやメンテナンス不足の印象を与えかねません。逆に、ロゴやイニシャルを使った分かりやすいファビコンがあるだけで、サイト全体の完成度がぐっと引き上がります。

用意すべきサイズと形式

ファビコンは1枚で済ませることもできますが、表示先ごとに最適な大きさが異なるため、複数のサイズを用意しておくのが現在の標準です。代表的なサイズと用途を整理します。

形式については、用途に応じて次のように使い分けます。

• ICO形式（.ico）：1つのファイルに16×16や32×32など複数サイズを内包できる、ファビコン専用の伝統的な形式。古い環境も含め幅広く対応します。サイトのルートに favicon.ico として置いておくと、HTMLに書かなくてもブラウザが自動で探しに来ます。
• PNG形式（.png）：透過に対応し、高解像度でもくっきり表示できます。32×32や180×180、192×192などはPNGで用意するのが一般的です。
• SVG形式（.svg）：ベクター形式でどんな拡大率でも鮮明。近年の主要ブラウザが対応し、ダークモード対応なども可能ですが、単体だと未対応環境のために別形式も併せて用意すると安心です。

16×16や32×32のような極小サイズでは、細かいロゴや文字はつぶれて読めなくなりがちです。ファビコンは「シンボルマークだけ」「頭文字1〜2文字だけ」のように大胆に簡略化したデザインが向いています。背景はベタ塗りか透過にし、要素を詰め込みすぎないのがコツです。

HTMLへの記述方法

用意した画像ファイルは、HTMLの <head> 内に <link> タグで指定して初めてブラウザに認識されます。最低限おさえておきたい基本の書き方は次のとおりです。

• 標準ファビコン：rel="icon" を使い、href で画像パス、type で形式、sizes でサイズを指定します。PNGなら type="image/png" のように記述します。
• ICOの自動読み込み：サイトのルートに favicon.ico を置けば <link> を書かなくても多くのブラウザが読み込みますが、確実を期すなら rel="icon" で明示する方が安全です。
• Apple端末向け：rel="apple-touch-icon" で180×180のPNGを指定すると、iPhoneでホーム画面に追加した際のアイコンになります。
• Android・PWA向け：192×192や512×512のアイコンは、manifest（マニフェストファイル）の中で参照させるのが標準的な方法です。

記述の順番として、<head>内のなるべく早い位置にまとめて書いておくと、ブラウザがページ読み込みの早い段階でアイコンを認識できます。パスはサイトのルートからの絶対パス（先頭が「/」のパス）で書いておくと、どの階層のページからでも同じアイコンが正しく読み込まれます。

apple-touch-iconの設定

iPhoneやiPadで「ホーム画面に追加」した際に使われるのが apple-touch-icon です。ここを設定しておかないと、Safariがページのスクリーンショットを縮小した中途半端なアイコンを使ってしまい、見栄えが悪くなります。専用に 180×180ピクセルのPNG を用意し、rel="apple-touch-icon" で指定するのが基本です。

apple-touch-iconには次のような注意点があります。

• 角丸・光沢は自動付与：iOSがアイコンの角を自動的に丸め、必要に応じて装飾を加えます。元画像は角を丸めず、四角いまま用意して問題ありません。
• 透過は避ける：背景を透過にすると、ホーム画面で黒など意図しない色が透けて見えることがあります。背景はベタ塗りにしておくと安定します。
• 余白を少し取る：端ギリギリまで絵柄を配置すると、角丸でロゴの隅が欠けることがあります。少し内側に収めると安心です。

複数サイズのapple-touch-iconを細かく指定する方法もありますが、近年は180×180を1つ用意しておけば多くの端末で十分にきれいに表示されます。

ファビコンの作成手順

ここまでの内容をふまえ、実際にファビコンを作る流れを順番に説明します。専用ソフトは不要で、元になる画像とブラウザがあれば進められます。

1. 元画像を用意する：ロゴやシンボルマーク、頭文字などを、できるだけ大きく正方形（例：512×512以上）で準備します。背景はベタ塗りか透過で、要素はシンプルにまとめます。
2. 正方形に整える：元画像が長方形の場合は、必要な部分だけを正方形に切り抜くか、余白を足して正方形にします。これで縮小時のゆがみを防げます。
3. 各サイズに変換・生成する：用意した正方形画像から、16・32・180・192・512などのサイズと、favicon.ico／PNG／SVGといった形式を書き出します。ファビコン生成ツールに画像を読み込ませれば、必要なサイズと形式をまとめて生成でき、HTMLに貼り付ける<link>タグの例も得られます。画像はブラウザ内で処理されるため、外部にアップロードする必要がありません。
4. 形式が合わないときは変換する：手元の画像がHEICやWebPなど扱いにくい形式の場合は、先に画像形式変換ツールでPNGなどに変換してから生成すると安定します。
5. ファイルを設置する：書き出したファビコンをサイトに配置します。favicon.icoはルート（最上位の階層）に置くのが定番です。
6. HTMLに<link>を書く：生成ツールが出力したタグを<head>内に貼り付け、パスを実際の配置場所に合わせます。
7. 表示を確認する：ブラウザでサイトを開き、タブにアイコンが出るか確認します。古いアイコンがキャッシュで残ることがあるので、表示が変わらないときはスーパーリロードやキャッシュ削除を試します。

ファビコンは小さな要素ですが、設定の有無でサイトの印象は大きく変わります。「正方形のシンプルな元画像を作る」「必要なサイズと形式に書き出す」「<head>に<link>で正しく指定する」——この3ステップを押さえれば、PCでもスマホでもきれいに表示されるファビコンを用意できます。本記事は一般的な情報であり、ブラウザやOSの仕様は変更されることがあります。最新かつ正確な仕様は各ブラウザ・OSの公式情報をご確認ください。