PNGをICO（ファビコン）に変換
単にPNGを.icoにリネームするのではなく、16×16・32×32・48×48の3サイズを1つのファイルに収めた「本物のファビコン」を作成します。ブラウザやWindowsが文脈に応じて最適なサイズを選べる、規格どおりの構成です。元画像は48px以上、できれば256px程度の正方形PNGをご用意ください。正方形でない場合は中央で切り抜かれます。
逆方向の変換： ICOをPNGに変換
使い方
正方形・48px以上（理想は256px）の透過PNGを上のツールにドロップします。複数まとめても構いません。
中央の正方形で切り抜かれた後、16・32・48pxの3エントリがフルアルファ付きで1つの.icoに書き込まれます。
完成した.icoをダウンロードし、サイトのルートにfavicon.icoとして配置すれば設定は完了です。
PNG vs ICO
勝負というより役割分担です。制作・保管はPNG、配信はICO — 大きな正方形PNGを1枚だけ管理し、ファビコンはそこから生成するのが最も破綻しにくい運用です。逆にICOを原本にするのは避けてください。48pxしか残らないからです。
| PNG | ICO | |
|---|---|---|
| 圧縮方式 | 可逆（ロスレス） | 可逆（BMPまたはPNGを格納） |
| 透過 | あり（フルアルファ） | あり（フルアルファ） |
| アニメーション | なし | なし |
| 対応環境 | ほぼすべてのブラウザ・アプリ・OS | ファビコン用途ではあらゆる環境 |
| 向いている用途 | ロゴ、スクリーンショット、透過が必要な画像 | ファビコン、Windowsアプリのアイコン |
よくある質問
いいえ。変換はWebAssemblyによってブラウザ内で完結するため、ファイルがお使いの端末の外に出ることは一切ありません。サーバーを介さない仕組みなので、ページを一度読み込めばオフラインでも動作し、ファイルサイズの制限も端末のメモリ以外にはありません。
使われる場面ごとに最適なサイズが違うからです。ブラウザのタブは16px、ブックマークバーやタスクバーは32px、Windowsのショートカットは48pxを読みます。1つの.icoに全部入れておけば、表示側が拡大縮小せずに済み、小さなアイコンが潰れません。
両方置くのが現在の定石です。<link rel="icon">でPNGを指定できる一方、/favicon.icoはブラウザ・クローラー・RSSリーダーが今も直接取りに来る普遍的な住所です。この.icoをサイトルートに置き、高解像度用に512pxのPNGも添えると全環境をカバーできます。
アイコンは定義上正方形なので、最も大きな中央の正方形で切り抜いてから各サイズに縮小します。重要な部分が切れてしまう場合は、先にエディタで正方形に整えるか、デザインツールから正方形版を書き出してください。
はい。各アイコンはフルアルファ付きの32ビットで書き出されるため、透過PNGのロゴは四隅が透明なファビコンになります。ダークモードのタブでロゴの周りに白い箱が出る、という事故は起きません。
元のPNGが48px未満しかない場合です。48pxのエントリを作るために拡大せざるを得ず、必ずぼやけます。まず大きな原本を用意するか、ベクターがあるならSVGをICOに変換を使う方がきれいに仕上がります。
関連ツール
ICOをPNGに変換
ICOファイルの最大サイズのアイコンをPNGとして無劣化で取り出せます。透過も維持。変換はブラウザ内で完結し、ファビコンやWindowsアイコンの再編集にすぐ使えます。
JPGをICO（ファビコン）に変換
JPG写真から16・32・48px入りのICOファビコンを作成。被写体を大きく切り抜いておくと16pxでも視認できます。処理は端末内で完結し、写真は送信されません。
SVGをICO（ファビコン）に変換
SVGは最高のファビコン素材。宣言サイズの4倍で描画してから縮小するため、16pxでも輪郭が崩れません。透過ごと16・32・48pxの3サイズをICOに収めます。
PNGをPDFに変換
スクリーンショットや図をPNGのままブラウザ内でPDF化。無劣化で埋め込まれ、文字もくっきりしたまま。ページは画像とぴったり同じサイズで、透かしも登録も一切ありません。