ファビコンのサイズはどれくらいにすべきですか？

ブラウザのタブではファビコンが 16 × 16 CSS ピクセル、高密度ディスプレイでは 32 × 32 で表示されるため、ICO には 16・32・48 ピクセルの版を入れます。さらに 180 × 180 の Apple touch icon と、Web マニフェスト用の 192 と 512 ピクセルのアイコンを加えれば、一般的なケースはすべてカバーできます。元画像は 512 × 512 ピクセル以上のものを使ってください。

今でも favicon.ico は必要ですか？

はい。ブラウザ、フィードリーダー、クローラーは、タグで指定されていなくても /favicon.ico を自動的にリクエストし、古いブラウザは ICO しか理解しません。SVG や PNG のアイコンと並べて、サイトのルートに 1 つ置いておきましょう。

SVG をファビコンとして使えますか？

はい。Chrome、Edge、Firefox、最近の Safari は、type="image/svg+xml" を指定した link タグによる SVG ファビコンに対応しています。ここで SVG をアップロードすると、ICO のフォールバックと並んで icon.svg として含まれ、HTML スニペットで両方がリンクされます。

apple-touch-icon とは何ですか？

ウェブサイトがホーム画面に追加されたときに iPhone や iPad が使う、180 × 180 ピクセルの PNG です。iOS が角を自動で丸め、透明部分を黒にするため、背景は単色、角は四角にしておく必要があります。

ファビコンが表示されないのはなぜですか？

ブラウザはファビコンを強くキャッシュし、数日間保持することもよくあります。link タグのパスでファイルにアクセスできるか確認し、強制再読み込みするか、プライベートウィンドウでサイトを開いてください。ファイル名を変えるか、favicon.ico?v=2 のようにバージョンのクエリを付けると、改めてダウンロードさせられます。

PNG を ICO に変換するには？

このページに PNG をドロップし、favicon.ico をダウンロードします。16・32・48 ピクセルにリサイズされ、3 つすべてが 1 つの ICO ファイルにまとめられます。各サイズはコンテナ内に PNG として格納されます。

site.webmanifest は何のためのものですか？

Android と Chrome に、サイトの名前、テーマカラー、背景色、そしてホーム画面への追加やアプリとしてのインストール時に使う 192 と 512 ピクセルのアイコンを伝える、小さな JSON ファイルです。

ロゴはサーバーにアップロードされますか？

いいえ。すべてのアイコンはブラウザ内で描画・エンコードされ、ZIP もお使いの端末で作成されます。どこにも送信されず、ページを読み込んだ後はオフラインでも動作します。

ファビコン作成ツール

1 枚の画像から、全サイズのファビコン、本物のマルチサイズ .ico、Web マニフェストを作成します。処理はすべて端末内で完結し、アップロードは一切ありません。

入力: PNG · JPEG · WebP · SVG
出力: ICO · PNG · webmanifest · ZIP

ロゴをドロップ

PNG、JPEG、WebP、SVG に対応。512 × 512 px 以上の正方形が最適です。画像の貼り付けもできます。

1 枚の画像からファビコン一式を作成

このファビコン作成ツールは、1 つのロゴから、今のウェブサイトに必要なファイル一式を作ります。16・32・48 ピクセルのアイコンを含む favicon.ico、16 〜 512 ピクセルの鮮明な PNG、Apple touch icon、Android Chrome 用アイコン、site.webmanifest、そしてページに貼り付ける HTML タグです。画像を正方形にし、余白を加え、角を丸めたり単色のタイルに載せたりしたうえで、すべてを 1 つの ZIP でダウンロードできます。リサイズも ZIP の作成もお使いの端末で行われるため、ロゴがどこかにアップロードされることはありません。

ファビコンの作り方

PNG、JPEG、WebP、SVG のいずれかをページにドロップするか、貼り付けます。512 × 512 ピクセル以上の正方形のロゴか SVG を使うと、最も鮮明に仕上がります。
画像全体を余白付きで収めるならフィット、正方形に切り抜くなら塗りつぶしを選びます。角の丸いタイルにしたい場合は、余白と角の半径を加えてください。
背景色を選ぶか、透明のままにします。iOS は透明部分を黒く塗るため、Apple touch icon には常に単色の背景が付きます。
Web マニフェスト用のアプリ名と色を入力し、ZIP をダウンロードを押します。プレビューから個別のファイルをダウンロードすることもできます。
ファイルをサイトのルートにアップロードし、HTML タグをすべてのページの <head> に貼り付けます。

現在のブラウザに本当に必要なファビコンファイルは？

ファビコンに関する解説には、何十ものサイズ、Windows タイル用の XML、Safari のピン留めタブ用マスクなど、2012 年頃の名残がたくさん残っています。今のブラウザが探すファイルはずっと少なく、4 つのファイルで、現在使われているほぼすべてのブラウザ、スマートフォン、OS をカバーできます。

ZIP に入っているそれ以外のファイルは網羅性のためのものです。名前を指定して求めてくるツールや CMS のための 16・32・48 ピクセルの PNG と、古いピン留めサイト向けの任意の 150 × 150 の Windows タイルです。余分なファイルがあっても害はありませんが、すべてをリンクする必要はありません。

favicon.ico: 共通のフォールバックです。タグで指定されていなくてもブラウザは自動的に /favicon.ico をリクエストし、RSS リーダー、ブックマーク管理ツール、クローラーも同様です。1 つのファイルに 16・32・48 ピクセルの版が入り、それぞれが ICO コンテナ内の PNG として格納されます。この形式は Windows Vista 以降のすべてのブラウザで読み込めます。
icon.svg: どのサイズやズーム倍率でも鮮明なベクター形式のファビコンです。リンクされていれば Chrome、Edge、Firefox、最近のバージョンの Safari が使用します。SVG から始めた場合にのみ作成され、ラスター画像を本物のベクターにすることはできません。
apple-touch-icon.png: サイトがホーム画面に追加されたときに iPhone や iPad が表示する、180 × 180 の不透明な PNG です。iOS が独自の角丸マスクをかけるため、角は四角のまま、背景は単色にしておきます。
マニフェスト用アイコン: site.webmanifest に記載される 192 と 512 ピクセルの PNG です。Android はインストールされた Web アプリのホーム画面ショートカットとスプラッシュ画面にこれを使い、Chrome はサイトのインストールを提案する前にこれらがあるかを確認します。

貼り付ける HTML タグ

スニペットでは ICO を sizes="any" ではなく sizes="32x32" でリンクしています。"any" にすると、SVG があっても Chrome が ICO を優先してしまうためです。SVG をアップロードした場合はそれもリンクされるので、SVG ファビコンに対応したブラウザはそれを使い、それ以外は ICO にフォールバックします。SVG がない場合は、代わりに 32 と 16 ピクセルの PNG がリンクされます。

theme-color メタタグは Android と Safari でブラウザのツールバーに色を付け、site.webmanifest にはアプリ名、色、大きなアイコンが記載されます。ファイル名は変えずに、すべてのファイルをドメインのルートに置いてください。別の場所に置く場合は、スニペット内のパスをそれに合わせて変更します。

16 ピクセルでも見えるファビコンのデザイン

シンプルにする。16 × 16 のアイコンは合計 256 ピクセルしかありません。ロゴタイプや細い線はつぶれてしまいます。1 文字、記号、または文字を除いたロゴマークの方がずっと読み取りやすくなります。
どちらのタブの色でも見えるコントラストにする。ブラウザのタブはテーマによって明るくも暗くもなります。プレビューではすべてのサイズを白とほぼ黒のタイルの上に表示するので、ダークモードで消えてしまう暗いロゴを公開前に見つけられます。
迷ったらタイルを付ける。少しの余白と角の半径を付けた単色の背景にすると、細いロゴや透明なロゴもどのタブでも見えるようになり、ホーム画面でも意図したデザインに見えます。
大きな画像から始める。縁をきれいに保つため画像は半分ずつ段階的に縮小されますが、元画像にない細部を加えることはできません。512 ピクセル以上の画像か SVG を使ってください。
色を確認する。ブランドカラーが白や暗いタブの上で薄すぎる場合はコントラストチェッカーで確かめ、別の表記で受け取った値はカラーコード変換で変換できます。

アップロードがない理由

多くのファビコン作成ツールは、リサイズのためにロゴをサーバーに送信します。このツールはブラウザ内のキャンバスに各サイズを描画し、JavaScript で ICO ファイルを 1 バイトずつ書き出し、小さな WebAssembly モジュールで ZIP を作成します。そのため画像が端末の外に出ることはなく、ページを読み込んだ後はオフラインでも動作します。未発表のブランドや、まだ共有してはいけないクライアントのロゴを扱うときに重要な点です。

よくある質問

ファビコンのサイズはどれくらいにすべきですか？: ブラウザのタブではファビコンが 16 × 16 CSS ピクセル、高密度ディスプレイでは 32 × 32 で表示されるため、ICO には 16・32・48 ピクセルの版を入れます。さらに 180 × 180 の Apple touch icon と、Web マニフェスト用の 192 と 512 ピクセルのアイコンを加えれば、一般的なケースはすべてカバーできます。元画像は 512 × 512 ピクセル以上のものを使ってください。
今でも favicon.ico は必要ですか？: はい。ブラウザ、フィードリーダー、クローラーは、タグで指定されていなくても /favicon.ico を自動的にリクエストし、古いブラウザは ICO しか理解しません。SVG や PNG のアイコンと並べて、サイトのルートに 1 つ置いておきましょう。
SVG をファビコンとして使えますか？: はい。Chrome、Edge、Firefox、最近の Safari は、type="image/svg+xml" を指定した link タグによる SVG ファビコンに対応しています。ここで SVG をアップロードすると、ICO のフォールバックと並んで icon.svg として含まれ、HTML スニペットで両方がリンクされます。
apple-touch-icon とは何ですか？: ウェブサイトがホーム画面に追加されたときに iPhone や iPad が使う、180 × 180 ピクセルの PNG です。iOS が角を自動で丸め、透明部分を黒にするため、背景は単色、角は四角にしておく必要があります。
ファビコンが表示されないのはなぜですか？: ブラウザはファビコンを強くキャッシュし、数日間保持することもよくあります。link タグのパスでファイルにアクセスできるか確認し、強制再読み込みするか、プライベートウィンドウでサイトを開いてください。ファイル名を変えるか、favicon.ico?v=2 のようにバージョンのクエリを付けると、改めてダウンロードさせられます。
PNG を ICO に変換するには？: このページに PNG をドロップし、favicon.ico をダウンロードします。16・32・48 ピクセルにリサイズされ、3 つすべてが 1 つの ICO ファイルにまとめられます。各サイズはコンテナ内に PNG として格納されます。
site.webmanifest は何のためのものですか？: Android と Chrome に、サイトの名前、テーマカラー、背景色、そしてホーム画面への追加やアプリとしてのインストール時に使う 192 と 512 ピクセルのアイコンを伝える、小さな JSON ファイルです。
ロゴはサーバーにアップロードされますか？: いいえ。すべてのアイコンはブラウザ内で描画・エンコードされ、ZIP もお使いの端末で作成されます。どこにも送信されず、ページを読み込んだ後はオフラインでも動作します。