ICO to PNG 変換ツール

ICO と生成した PNG は、このブラウザー内だけで処理されます。ステップ形式では、ICO はブラウザーの一時ストレージに最長 30 分間だけ保存され、その後自動的に期限切れになります。

処理中…

整形
ICO
ファイル内のサイズ
ファイルサイズ

ダークテーマのアプリ、プレゼンテーション、README で透過ファビコンを使う場合は、ICO コンテナより単独の PNG のほうが扱いやすいことがあります。.ico ファイルを追加して埋め込み画像のサイズを確認し、対応する画像を 1 つ選ぶと、同じ寸法の PNG として書き出せます。

ICOをPNGに変換する方法

  1. 1

    .icoファイルを入れる

    コンテナはブラウザ内でローカルに解析されます。

  2. 2

    埋め込み画像を 1 つ選ぶ

    各画像のサイズ、色深度、エンコード方式が表示され、読み取れない画像には非対応と表示されます。

  3. 3

    プレビューしてダウンロード

    選択した画像を確認し、元の寸法の PNG を 1 つ保存します。

  4. 4

    任意で拡大

    最大の埋め込みサイズが必要より小さい場合は、それを書き出してアップスケーラーと組み合わせます。ここでは引き伸ばさないでください。

現代の用途にPNGがより良いコンテナである理由

ICOは今もブラウザがfavicon.icoに期待する形式ですが、それ以外のあらゆる場面ではPNGが取って代わりました。

形式の比較

特徴 ICO PNG
透明度 1ビットマスク + 8ビットアルファ 8ビットアルファ(RGBA)
複数サイズ 可能、1つのコンテナ内に収録 不可、1ファイルにつき1解像度
圧縮 内部は非圧縮のBMPまたはPNG Deflate(zlib)
ブラウザ対応 /favicon.icoで普遍的 普遍的 + link rel=icon
編集ツール 限定的 あらゆる画像エディター

今日のファビコンのベストプラクティス

ほとんどのサイトは今もルートのリクエストにfavicon.icoを出しますが、HTMLのheadからは最新のPNGをリンクします。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

抽出と編集

PNGとして書き出せば、Figma、Sketch、GIMP、Photoshopでアイコンを開き、フルのアルファ対応で編集できます。終わったらPNGを書き出し直し、必要なら新しい.icoに再びまとめます。

よくある質問

埋め込み PNG のアルファチャンネル、または対応する ICO ビットマップの透過マスクで表された透明度を保持します。古い特殊なエンコードでは透明度の表現が異なることがあるため、必ずプレビューを確認してください。

ICO ディレクトリ内の画像はすべて一覧表示されますが、書き出せるのは対応する画像 1 つずつです。10 MB までの ICO にある PNG 圧縮画像と、一般的な非圧縮またはビットフィールド形式の Windows ビットマップに対応します。複数の PNG が必要な場合は、別のサイズを選んでもう一度ダウンロードしてください。

画質を落とさずには得られません。小さなアイコンの拡大はぼやけた結果になります。大きな版が必要なら、元のベクター(SVG)を作り直し、必要なサイズで書き出してください。

いいえ。ICO の解析と PNG のエンコードは、JavaScript とブラウザーの画像 API を使って端末内で行われます。ステップ形式では、ICO はブラウザーの一時ストレージに最長 30 分間だけ保存され、その後自動的に期限切れになります。

関連ツール