使い方
- アイコン、またはアイコンにしたい画像の Base64 文字列か data URI を貼り付けます。
- プレビューと画像サイズを確認します。正方形の画像を使うと、最もきれいなアイコンになります。
- ICO はあらかじめ選択されています。「アイコンサイズ」で 1 つのサイズ（16、32、48、64、128、256 ピクセル）またはマルチサイズを選択します。
- .ico ファイルをダウンロードします。入力がすでに ICO で、含まれるすべての画像をそのまま残したい場合は「オリジナル」を選択します。
Base64 の ICO ファイル
ICO ファイルは小さなコンテナで、ヘッダー、エントリーのディレクトリ、エントリーごとに 1 つの画像で構成されます。各画像は BMP または PNG データとして格納されます。ヘッダーはバイト列 00 00 01 00 で始まるため、アイコンの Base64 は AAABAA で始まります。Base64 のアイコンは、<link rel="icon" href="data:image/x-icon;base64,..."> のようなファビコンの data URI、単一ファイルの HTML ページ、Web サイトのアイコンを返す API などで見かけます。
登録されている MIME タイプは image/vnd.microsoft.icon ですが、image/x-icon のほうがはるかに一般的で、どこでも動作します。
アイコンサイズの選び方
| サイズ | 主な用途 |
|---|---|
| 16 × 16 | 標準解像度の画面でのブラウザのタブとブックマーク |
| 32 × 32 | 高解像度の画面でのブラウザのタブ |
| 48 × 48 | Windows のデスクトップとエクスプローラーのアイコン |
| 64、128 | 大きめのプレビューやアプリケーションの一覧 |
| 256 × 256 | Windows の「大アイコン」「特大アイコン」表示 |
マルチサイズのオプションでは 16、32、48、256 を 1 つのファイルにまとめるため、各システムが最適なサイズを選べます。内部の画像は PNG で圧縮されており、透過が保持されます。この形式は Windows Vista 以降とすべての最新ブラウザで対応しています。
アイコンをファビコンとして使う
ブラウザはサイトのルートにある /favicon.ico を自動的にリクエストするため、ファイルをそこに置けば、マークアップを書かなくても機能します。href に Base64 の data URI を指定すればそのリクエストを省けますが、アイコンが単独でキャッシュされず、ページを開くたびに毎回ダウンロードされることになります。最新のブラウザは PNG や SVG のアイコンにも対応しており、両方を組み合わせる設定が一般的です。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">シンプルな形とはっきりしたコントラストを持つ正方形の画像から始めてください。16 ピクセルでは細かい部分は見えなくなります。他の用途向けに PNG 版が必要な場合は、Base64 を PNG に変換をお試しください。
よくある質問
favicon.ico のサイズはどうすればよいですか？
16、32、48 ピクセルの画像を含むマルチサイズアイコンなら、ブラウザと Windows の両方に対応できます。このツールのマルチサイズオプションでは、大きなアイコン表示用に 256 も追加されます。
Base64 の PNG や SVG を ICO に変換できますか？
はい。貼り付けたら「保存形式」を ICO のままにして、サイズを選択してください。ブラウザで表示できる画像であれば、どれでも変換できます。
プレビューにアイコンのサイズが 1 つしか表示されないのはなぜですか？
ICO ファイルには複数の画像を格納できますが、プレビューにはそのうち 1 つしか表示されません。ファイル内のすべての画像を残すには、「保存形式」で「オリジナル」を選んでダウンロードしてください。
ICO は透過を保持しますか？
はい。アイコンは完全なアルファチャンネル付きの PNG データとして格納されるため、角丸や柔らかい輪郭も透明なまま保たれます。