PNGをICOに変換
正方形のPNGを、複数のアイコンサイズをまとめて収めた.icoファイルに変換します。ブラウザのタブ用の16 pxからWindows用の256 pxまで対応し、透明な角やふちは透明のまま保たれます。
画像変換
またはJPG, JPEG, JPE … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
85 なら写真は元の画像と見た目がほぼ変わりません。ファイルを小さくしたいときだけ下げてください。
JPG、BMP、EPS は透過に対応していません。透明な部分はこの色で塗りつぶされます。
透明な部分の背景に使う16進カラーです(例: #FFFFFF)。
この形式には 1 枚の画像しか保存できません。アニメーションを残すには GIF または WebP を選んでください。
マルチサイズのアイコンは 1 つのファイルに複数の解像度を含み、ブラウザや OS が必要なサイズを選びます。
元のサイズを維持するか、片方の辺を入力すると縦横比を保ったままサイズ変更します。
上で選んだ辺のピクセル数です。
元のサイズに対する割合です。
画面や Web には sRGB が適しています。印刷用途では元の色空間を維持してください。グレースケールにすると色情報は失われます。
メタデータのみ変更します。0 なら元の値を維持します。プリンターや一部のサイトがこの値を読み取りますが、ピクセル数は変わりません。
このツールの使い方
- 1
正方形のPNGをアップロード
背景が透明で、256 × 256 px 以上の画像を用意してください。1回で最大20枚、1枚あたり95 MBまでのPNGに対応しています。
- 2
アイコンサイズを選ぶ
アイコンサイズの初期値はすべてのサイズ(16–256)で、通常はこのままで問題ありません。プログラム側で特定のサイズが指定されている場合のみ、詳細設定でサイズを1つ選んでください。
- 3
変換して.icoを使う
ICOに変換 →を押してファイルをダウンロードし、サイトのルートに置くか、Windowsのショートカットに設定します。アップロードしたファイルは30分後に削除されます。
ICOは1枚の画像ではなく、アイコン画像を入れる小さなコンテナです。1つのファイルに16、32、48、256 px のサイズを収められ、システムが最適なものを選びます。
複数サイズを1ファイルにまとめてPNGをICOに変換
ICO形式は、アイコンが小さなビットマップだった1985年のWindows 1.0に由来します。特徴はファイルの先頭にあるディレクトリで、中にある各画像の幅と高さが一覧になっています。Windows Vista(2007年)からは画像をPNGとして保存できるようになり、滑らかな透明部分を持つ 256 × 256 のアイコンも、すぐ読み込める小さなファイルに収まります。
ここでPNGを変換すると、このコンテナが自動で作られます。元画像は各サイズに縮小され、アルファチャンネルは保持されるため、角丸や柔らかい影も暗い背景・明るい背景のどちらできれいに表示されます。すべてが1つの .ico に書き出されます。元画像は256 px以上のものを使ってください。32 pxのPNGを256に拡大しても、大きくぼやけたアイコンになるだけです。
16 × 16 px
ブラウザのタブ
標準的な画素密度でのタブとブックマーク
32 × 32 px
高DPI画面のタブ
Retinaディスプレイ、Windowsの200%拡大表示
48 × 48 px
Google検索結果
Googleは48 pxの倍数の正方形ファビコンを推奨しています
256 × 256 px
Windowsの「特大アイコン」
ICOファイルに含められる最大の画像
PNG
Portable Network Graphics
PNG は、1996年に PNG Development Group が公開し、のちに W3C と ISO が標準化した可逆のラスター形式です。すべてのピクセルを正確に保持し、完全なアルファ透明に対応し、文字、シャープな輪郭、単色の面をノイズなく扱えます。この正確さから、スクリーンショット、ロゴ、アイコン、UI グラフィックに最適です。代償はサイズで、PNG で保存した写真は、同じ写真の JPEG や WebP の数倍になることがよくあります。すべてのブラウザ、OS、編集ソフトで PNG を開けます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- 1996 · PNG Development Group
ICO
Windowsアイコン
ICOは、Windowsのプログラムアイコンやウェブサイトのファビコンに使われるMicrosoftのアイコン形式です。1つの.icoファイルに16×16、32×32、48×48、256×256ピクセルなど複数サイズの画像を含められ、システムが最適なものを選びます。各画像はビットマップまたはPNGデータで保存でき、完全なアルファ透過に対応します。写真や大きなイラスト向けではありません。ブラウザ、Windows、ほとんどのアイコンエディタで読み込めます。
- 圧縮方式
- 可逆
- 透過
- 対応
- アニメーション
- 非対応
- 登場時期
- Microsoft
PNGは1つのサイズの画像ですが、Windowsやブラウザは複数のサイズをまとめた .ico を使い、画面ごとに最も鮮明なサイズを選びます。ICOからPNGへの変換は、画像を取り出すだけの処理です。
ファビコンとWindowsアイコン：ICOに入れるべきサイズ
ブラウザのタブアイコンは16 px、高DPI画面では32 pxで描画され、Google検索は48 pxを基準にファビコンを表示します。すべてのサイズのままにしておけば、1つのファイルで3つとも対応できます。
- サイトのルートに
favicon.icoとして保存します - Apple touch icon用に、180 × 180 のPNGを別途追加してください
Windowsはタイトルバーでは16 pxから選び、「特大アイコン」表示や高DPIのデスクトップでは最大256 pxまで使います。256 pxが含まれていないファイルは、これらのサイズでぼやけて見えます。
- すべてのサイズのままにします
- 明るいタスクバーだけでなく、暗いタスクバーでも見え方を確認してください
一部のゲームランチャー、サーバーパネル、古いプログラムは最初の画像しか読まなかったり、固定サイズを要求したりします。アイコンサイズで256、128、64、32、16 pxのいずれかを選ぶと、1枚だけのICOが作成されます。
- プログラムの資料に記載されたサイズに合わせます
- 256 pxで固定する場合はPNGをICO 256x256に変換をご覧ください
16 pxでも見やすいPNG素材の作り方
ファビコンは1999年のInternet Explorer 5が発祥で、サイトをブックマークするとルートにある favicon.ico というファイルを探しにいきました。ほかのブラウザもこの動作を取り入れたため、今でもそのパスへのリクエストがサーバーログに残っています。
16 × 16 は全部で256ピクセルしかないので、デザインは大胆にする必要があります。キャッチコピーや細い輪郭線は省き、明るいテーマと暗いテーマの両方で強いコントラストを保ち、図形の周りに1ピクセルの余白を残してください。頭文字やシンボルだけを使うブランドも多くあります。ロゴがベクターファイルなら、SVGをICOに変換を使うと、すべてのサイズが鮮明な輪郭から描画されます。
PNGをICOに変換に関するよくある質問
Webサイトのファビコン用にPNGをICOに変換するには？
すべてのサイズを選んだまま変換し、できあがったファイルを favicon.ico という名前にして、サイトのルートフォルダにアップロードしてください。ブラウザはそのパスを自動で取得します。ページの head 内に link rel="icon" タグを書いて指定することもできます。
16ピクセルだとアイコンがぼやけるのはなぜですか？
細かいデザインは16 × 16まで縮小すると、文字や細い線が1ピクセル未満になってつぶれてしまいます。小さいサイズ用にデザインを簡略化してください。文字入りのロゴ全体よりも、太い1文字や単純な図形のほうがブラウザのタブでは見やすくなります。
PNGが正方形でない場合はどうなりますか？
アイコンは正方形のため、横長のロゴは読み込むプログラムによって余白が追加されたり、縮められたりします。先にPNGを正方形のキャンバスにトリミングするか余白を足して、空白の位置を自分で決めておきましょう。
作成した.icoでWindowsのフォルダーアイコンを変更できますか？
はい。フォルダを右クリックし、プロパティ > カスタマイズ > アイコンの変更から .ico ファイルを選びます。デスクトップのショートカットも、プロパティ > アイコンの変更から同じ手順で設定できます。
サイトにPNGアイコンがあってもICOファイルは必要ですか？
最新のブラウザは、ページの head に指定したPNGやSVGのアイコンに対応しています。ただし、一部のツールやフィードリーダー、古いブラウザは今でも /favicon.ico を直接取得します。複数サイズを含む小さなICOを置いておけば、ログに404エラーが残るのを防げます。