ファビコン作成
1枚の画像から、favicon.ico、Appleタッチアイコン、Android用アイコン、Webマニフェストを1つのZIPで作成します。
ファビコン作成は、ロゴや画像をWebサイトに必要なアイコンファイル一式に変換するツールです。画像を中央で正方形に切り抜き、favicon.ico（16、32、48ピクセル）、16〜512ピクセルのPNGアイコン、180 × 180のapple-touch-icon.png、site.webmanifestファイルを作成して、すべて1つのZIPにまとめます。サイトのheadセクションに貼り付けるHTMLのlinkタグもページ上に表示されます。
ファビコンの設置方法
パッケージを解凍してサイトのルートフォルダに置き、ページの<head>内に次のタグを追加してください。
<link rel="icon" type="image/x-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="/site.webmanifest">ファビコン作成の使い方
- 1
ロゴをアップロードする
PNG、JPG、SVG、HEIC画像をドロップするか選びます。512 × 512ピクセル以上の正方形の画像がいちばんきれいに仕上がります。
- 2
中央にあるか確認する
アイコンは画像の中央から切り抜かれます。ロゴが中央からずれている場合や画像が正方形でない場合は、先に「画像の切り抜き」で1:1に切り抜いてください。
- 3
ファビコン一式をダウンロードする
「ファビコン一式をダウンロード（ZIP）」をクリックすると、すべてのアイコンファイルとマニフェストが手に入ります。
- 4
Webサイトに追加する
ファイルをサイトのルートフォルダにアップロードし、「コードをコピー」をクリックして、HTMLタグを各ページのheadセクションに貼り付けます。
できること
- 複数サイズのfavicon.ico
- ブラウザのタブやブックマーク用に、16 × 16、32 × 32、48 × 48のアイコンを1つのICOファイルにまとめます。
- あらゆる端末向けのPNGアイコン
- 16、32、48、64、128、192、512ピクセルのPNGファイルに加え、180 × 180のapple-touch-icon.pngも作成します。
- Webアプリマニフェスト
- Androidやインストール可能なWebアプリ向けに、192と512ピクセルのアイコンを指定したsite.webmanifestファイルを作成します。
- 小さなサイズもくっきり
- アイコンは元の画像から段階的に縮小されるため、16や32ピクセルのアイコンもすっきり仕上がります。
- すぐに貼れるHTML
- アイコンとマニフェストのlinkタグを、ワンクリックでコピーできます。
よくある質問
ファビコン用の画像はどのくらいのサイズが必要ですか？
最大のアイコンもくっきり保てるよう、512 × 512ピクセル以上の正方形の画像を使ってください。シンプルな形とはっきりした色なら、16 × 16でも見分けがつきます。
ZIPにはどんなファイルが入っていますか？
favicon.ico、favicon-16x16.png〜favicon-512x512.png（16、32、48、64、128、192、512）、180 × 180のapple-touch-icon.png、site.webmanifestです。
ファビコンのファイルはどこに置けばよいですか？
トップページと同じ場所である、Webサイトのルートフォルダにアップロードしてください。そのうえで、このページに表示されるHTMLタグをすべてのページのheadセクションに貼り付けます。
ロゴの一部が切れてしまうのはなぜですか？
このツールは画像の中央から最大の正方形を切り出します。ロゴが横長だったり中央にない場合は、アイコンを作成する前に、まわりに余白を残して正方形に切り抜いてください。
SVGのロゴも使えますか？
はい。SVGは画像として描画され、PNGとICOファイルとして保存されます。ZIPにはSVGのファビコンは含まれません。
マニフェストファイルを編集する必要はありますか？
はい。site.webmanifestには仮の名前「App」とダークなテーマカラーが設定されています。テキストエディタで開き、name、short_name、色をサイトに合わせて変更してください。