ICO アイコン生成

画像と 5 つの正方形サイズから 1 つを選びます。JavaScript が有効ならアイコンはこのブラウザー内で生成され、画像は送信されません。無効な場合はフォームがファイルをサーバーへ送信します。どちらでも、透過と元画像の縦横比を保った favicon.ico をダウンロードできます。

1. PNG、JPEG、GIF、WebP の画像を選択します。正方形の画像が最良の結果になります。

2. 対象のブラウザまたはアプリケーションで必要な ICO サイズを選択します。

3. favicon.ico ファイルを生成してダウンロードし、Web サイトの素材に追加します。

ICO サイズ:

画像を favicon.ico に変換する手順

PNG、JPEG、GIF、WebP のいずれかの画像を選び、5 つの正方形サイズから 1 つを選んで favicon.ico をダウンロードします。タブ、ブックマーク、インストール済みアプリで使える形式です。アイコンは元画像の形を保ちます。正方形でない画像は引き伸ばさず、正方形に収めて中央に配置し、余白は透明のまま残します。

JavaScript が有効な場合、ファイルはこのブラウザー内で読み取られ、ICO もここで書き出されるため画像は送信されません。JavaScript を切ってもフォームは動作し、その場合はサーバーへ送信され、200 KB まで受け付けます。どちらの経路も同じ形式で書き出します。32 ビット画像と 1 ビットの AND マスクを組み合わせるため、透過は失われません。

  1. 画像を選びます(PNG、JPEG、GIF、WebP)。
  2. 正方形のサイズを選びます(16、32、48、64、128 ピクセル)。
  3. 「ICO を生成」を押します。
  4. プレビューと元画像を見比べます。プレビュー背景の市松模様は透明部分です。
  5. favicon.ico をダウンロードしてサイトのルートに置くか、<link rel="icon"> で指定します。
  6. 古いアイコンが表示され続ける場合は強制再読み込みを。ファビコンのキャッシュは残りやすいためです。

各サイズの用途、画像の収め方、変換が行われる場所

各サイズの用途

16 px は従来のタブ用アイコン、32 px はこのツールの既定値で高解像度ディスプレイのタブもまかないます。48 px と 64 px はデスクトップのショートカット、タスク切り替え、一部の Android ランチャーが使い、128 px はストアの掲載やアプリタイル向けです。PNG ではなく ICO を書き出すのは、ショートカットファイルや古い Windows のシェルが ICO コンテナを前提とするためです。

1 ファイルに 1 画像です。32 px のアイコンは 4,286 バイト、16 px は 1,150 バイト、128 px は 67,646 バイトになります。ブラウザーは見つけた 1 枚を拡大縮小して使うため、選ぶサイズは大きなタイルでの鮮明さと毎回の読み込み量の取引になります。

画像の収め方

正方形の画像はそのまま選択サイズに縮小します。正方形でない画像は縦横比を保ち、正方形の中に収めて中央に配置し、残りの余白は透明のままにします。円は円のまま、ロゴはゆがみません。

透過は 2 か所に書きます。32 ビットのアルファチャンネルと、古い読み手が使う AND マスクです。透過 PNG は背景が黒くならず透明のまま残ります。アニメーション GIF は 1 コマ目として読み取り、JPEG には保持すべき透過情報がありません。

変換の実行場所と拒否する条件

JavaScript が有効なら画像は端末から出ません。送信はなく、ファイルサイズの上限もなく、オフラインでも動作します。JavaScript 無効時のフォールバックはサーバーへ送信し、200 KB(204,800 バイト)まで受け付けます。

どちらの経路も 4096 × 4096 ピクセルを超える画像を拒否します。それ以上のビットマップは 1 リクエストに許されたメモリを使い切るためです。PNG、JPEG、GIF、WebP 以外の形式も拒否します。拡大は可能で、4 × 4 の画像から 128 px のファイルを作れますが、元画像以上の精細さにはなりません。

最近使ったツール: