faviconの作り方｜ICOとApple Touch Iconの正しいサイズ

ブラウザのタブに表示される小さなアイコン（favicon）と、スマホのホーム画面用アイコンについて、必要なサイズと形式をわかりやすくまとめました。

今すぐ画像からfaviconを作る

faviconとは？

favicon（ファビコン）は、ブラウザのタブやブックマークに表示される小さなアイコンです。サイトの顔になるため、設定しておくと見た目が整い、ユーザーにも認識されやすくなります。

サイズ	主な用途	推奨形式
16×16	ブラウザタブ（基本）	ICO
32×32	一般的なfavicon	ICO
48×48	高解像度ディスプレイ向け	ICO
180×180	iPhoneのホーム画面（Apple Touch Icon）	PNG
192×192	Androidのホーム画面など	PNG

ICO … 主にブラウザのタブ用。1つのファイルに複数サイズ（16・32・48など）をまとめられるのが特徴です。
PNG … スマホのホーム画面用アイコンでよく使われます。Apple Touch Icon（180×180）やAndroid向け（192×192）はPNGが一般的です。

「マルチサイズICO」を選べば、16・32・48を1つのファイルにまとめて出力できます。まずはこれを作っておくと安心です。

180×180や192×192はICOでも作れますが、実際の設置ではPNGで使うことがほとんどです。このサイトのツールでは、両方ダウンロードできるようにしています。

通常のfaviconは、サイトのルートに favicon.ico として置くか、HTMLの <link rel="icon" href="/favicon.ico"> で指定します。
Apple Touch Iconは、180×180のPNGを用意して <link rel="apple-touch-icon" href="/apple-touch-icon.png"> で指定するのが一般的です。
正方形のロゴやアイコン画像を元にすると、小さくしても形が崩れにくく、きれいな仕上がりになります。
スマホのホーム画面用と、ブラウザタブ用では推奨サイズ・形式が異なるため、用途に合わせて書き出すと失敗しにくいです。

画像を選んですぐに作成できます