ロゴのPNGをファビコン用ICOにする:含めるサイズと実際の容量

作成 · 更新 · 運営者(個人)

ホームページの設定で、ファビコンやアイコンをICOファイルで登録するように言われましたか。正方形の透明なPNGロゴを形式変換でICOとして保存すると、いくつかのサイズのアイコンが1つのファイルにまとめて入ります。含めるサイズによって容量が25倍近く変わるので、自作のロゴで保存し、ファイルの中を1つずつ開いて確かめました。

ICOファイルには何が入っている?

ICOは、大きさの違うアイコンを何枚も1つのファイルに入れる形式です。ブラウザのタブのような小さな場所には小さな画像を、大きな場所には大きな画像を選んで使えるようにするためです。ミルキットの形式変換で保存形式をICOにすると、「ICOに含めるサイズ(px)」で16・24・32・48・64・128・256から含めるサイズを選べます。最初は24を除いた6つが選ばれています。

実際に保存した結果

512×512の透明なPNGロゴ(20.2KB)を自作しました。青い角丸の四角に白いM、右上に黄色い点、下に小さな「kit」の文字があります。このファイルを形式変換と同じ処理でICOとして保存し、保存したファイルの一覧を直接読んで、中の各画像のサイズと容量を確かめました。

標準の6つのサイズで保存したICOは361.4KBでした。元のPNGよりずっと大きく、そのうち256×256の1枚だけで264.0KB、128×128が66.0KBを占めていました。ミルキットのICOは各サイズを圧縮しない32ビットの画像のまま入れるので、大きなサイズほど容量が急に増えます。7つすべてを入れると363.8KBでした。

16・32・48の3つだけにすると14.7KBで、標準より25倍近く小さくなりました。16×16は1.1KB、32×32は4.2KB、48×48は9.4KBです。どの画像も32ビットで保存されているので、透明な角もそのまま残りました。

小さなサイズでは何が見える?

下の図は、ICOの中の各サイズを展開して大きく拡大したものです。32×32以上ではMと黄色い点がくっきりしていましたが、16×16ではMの線がつぶれ始め、下の「kit」の文字は48×48でもほとんど読めませんでした。

小さなアイコンでは、文字や細い線から先に消えていきます。ファビコン用には、1文字やシンプルな形など、大きく見分けられる部分だけを残したロゴを別に用意するのがおすすめです。16×16の結果を拡大して、見分けられるかを先に確かめてみてください。

ミルキットで作る手順

  1. 正方形の透明なPNGロゴを用意します。512×512くらいの余裕のあるサイズなら、小さく縮めてもきれいです。
  2. 形式変換を開いてロゴを追加し、保存形式でICOを選びます。
  3. 追加設定の「ICOに含めるサイズ(px)」で、必要なサイズだけを残します。小さなアイコンだけでよければ、16・32・48だけにするとファイルがぐっと小さくなります。
  4. 結果の容量を確かめて保存します。登録先にサイズや容量の決まりがあれば、その案内に合わせてサイズを選んでください。

標準のまま保存すると、結果の欄に元より大きくなったと表示されることがあります。今回の試験では20.2KBのロゴが361.4KBのICOになりました。故障ではなく、大きなサイズの画像が圧縮なしで入るためなので、不要な大きいサイズを外せば大丈夫です。プレビューは選んだサイズのうち一番大きいもので表示されるので、48までにするとプレビューのアイコンも小さくなります。

サイズを1つ足すとどれくらい増える?

保存したファイルの中のサイズ別の容量は、16×16が1.1KB、24×24が2.4KB、32×32が4.2KB、48×48が9.4KB、64×64が16.5KB、128×128が66.0KB、256×256が264.0KBでした。縦横が2倍になると、容量はおよそ4倍に増えます。128と256の2つで全体の90%以上を占めるので、大きなアイコンが本当に必要か先に考えてみてください。

ロゴが正方形でないときは?

600×300の横長ロゴでも保存してみました。ロゴは引き伸ばされず、256×256の中に元の比率のまま収まり、上下の空いた部分は透明で埋められました。ただしそのぶんロゴが小さく見えるので、できれば正方形に合わせて配置し直したロゴのほうが、小さなサイズでも見やすくなります。

関連するツールを開く

MiruKitで実際に確認した結果

含めたサイズICOの容量うち256の画像
標準の6つ(16〜256)361.4 KB264.0 KB
7つすべて363.8 KB264.0 KB
16·32·4814.7 KBなし

自作の512×512の透明ロゴと600×300のロゴを公開中のprocessImageでICOに保存しました。保存したファイルの一覧(サイズ・ビット数・容量)を直接読み、各画像を展開して確認しました。

保存したICOの中の画像を1つずつ展開して拡大しました。
保存したICOの中の画像を1つずつ展開して拡大しました。
現在のツールで記事の設定を実際に適用した画面です。
現在のツールで記事の設定を実際に適用した画面です。

実測の元データを見る

知っておきたいこと

上の数字は自作のロゴ1枚の結果です。ミルキットのICOの容量は主に含めるサイズで決まり、横長ロゴから作った標準の6サイズのICOもまったく同じ361.4KBでした。

ICOをもう一度形式変換に入れると、最初のアイコンだけが開きます。直したいときは元のPNGから作り直してください。

サイトやアプリによって、求められるアイコンの形式やサイズは違うことがあります。ICOの代わりにPNGを受け付ける場所もあるので、登録先の案内を先に確認しましょう。