含まれません。SVGは入力形式として使えますが、出力はラスター画像のPNGとICOです。ベクター形式やアニメーションのファビコンは作りません。
ファビコン生成ツール
画像1枚から、複数サイズを含むICO、5枚のPNGアイコン、WebマニフェストをZIPで生成します。下の設置例を参考に、サイトから各ファイルを参照できます。
ファビコンパッケージの内容
ダウンロードするfavicon-package.zipには7個のファイルが入ります。HTMLはこの記事内の設置例であり、ZIP内のファイルではありません。
| ファイル | 寸法・内容 | 用途 |
|---|---|---|
| favicon.ico | 1ファイルに16×16・32×32・48×48 | 複数サイズを含むサイトアイコン。 |
| favicon-16x16.png | 16×16 | 小さいブラウザアイコン。 |
| favicon-32x32.png | 32×32 | 大きめのブラウザアイコン。 |
| apple-touch-icon.png | 180×180 | Appleのホーム画面アイコン用の参照先。 |
| android-chrome-192x192.png | 192×192 | Webマニフェストから参照するアイコン。 |
| android-chrome-512x512.png | 512×512 | Webマニフェストから参照する大きいアイコン。 |
| manifest.json | サイト名、色、2つのアイコン参照 | 自分のサイトに合わせて確認・調整する初期マニフェスト。 |
入力はPNG、JPG/JPEG、WebP、GIF、SVGに対応します。出力は静止画のICOとPNGです。SVGをアップロードしてもSVGファビコンは生成されません。
ファビコンを生成して設置する手順
1
識別しやすい原画像を選ぶ
シンプルな画像をアップロードします。最大のPNGに合わせるなら512×512ピクセル以上の正方形画像が目安です。元のデザインが不明瞭なら、拡大しても改善しません。
2
生成してZIPを保存する
「ファビコンパッケージを生成」を押し、完了したZIPを保存します。サイトに置く前に解凍してください。
3
マニフェストを確認してファイルを配置する
manifest.jsonの初期サイト名や色を必要に応じて変更します。サイトで公開するURLに配置し、サブフォルダを使う場合はパスも変更します。
4
HTML参照を追加して確認する
下の例をページのhead部分に追加します。アイコンとマニフェストのURLが開けることを確かめ、ブラウザ上の表示を確認してください。
サイトにアイコンを設置する
この例は、サイトのルートからファイルを配信する前提です。ページのheadに参照を追加し、実際の配置先に合わせてパスを変更してください。
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">公開前に次の項目を確認してください。
| 確認項目 | 対応内容 |
|---|---|
| 公開ファイルのパス | 先頭のスラッシュはサイトのルートを表します。サブフォルダに置く場合は、HTMLのhrefとmanifest.json内のアイコンsrcの両方を変更します。 |
| マニフェストの初期値 | nameとshort_nameはMy Website、theme_colorとbackground_colorは#ffffffで生成されます。保存後に確認してください。これらの値でアイコン画像自体の色は変わりません。 |
| 既存のサイト設定 | テーマやフレームワークが別のアイコンを指定していないか確認します。新しい設定に加えて古いファビコンへの参照が残らないようにします。 |
アイコン入りのマニフェストだけで、インストールやオフライン利用に対応したWebアプリになるわけではありません。service workerは提供せず、すべての端末でのインストールも保証しません。
小さい表示でも識別しやすくする
🔎
16×16の結果を見る
小さな文字や細い線は見えなくなることがあります。簡潔なマーク、明確なコントラスト、被写体の周りの余白を意識してください。
↔
形と余白を確認する
正方形でない画像は比率を保って正方形の中に収め、空いた部分を透明にします。小さい原画像は拡大される場合があります。正確な構図が必要なら、先に正方形に整えてください。
目的に合う出力を選ぶ
既存の画像からサイト用のファビコンを作るページです。ロゴを描くツールではありません。
ICOファイル1つだけが必要な場合
サイト一式のファイルが不要なら、PNGからICOへの変換を使えます。
ネイティブのモバイルアプリを作る場合
iOS/Androidの画像素材にはアプリアイコン生成ツールを使えます。サイトのファビコンとは用途が異なります。
画像をアップロードしてサーバーで処理します。完成したZIPは早めに保存してください。一時ファイルはサービスの削除処理に従います。
ファビコンの設置に関する質問
まず配置したファイルのURLと、ページのアイコン指定を確認してください。ブラウザがファビコンをキャッシュしている場合があります。新しいファイルを参照していることを確かめてから、新しいブラウザセッションで確認します。
現在のフォームは画像選択のみです。保存したマニフェストのname、short_name、theme_color、background_colorを変更し、HTMLのtheme-colorも整合させてください。
なりません。提供するのはアイコンと初期マニフェストです。インストールやオフライン利用にはサイト側の追加設定が必要で、自動では追加されません。