2026-08-21 公開 ／ アプリ開発

Windowsアプリのアイコンを直すのに3週間で4回やり直した。ICOは1枚の画像ではない

ToDoアプリのWindowsデスクトップ版を出したあと、アイコンだけで4回リリースし直しました。1回目は別アプリのアイコンが入っていて、2回目は小さいサイズで化けて、3回目は透過にしようとして台座ごと消し、4回目でようやく落ち着きました。3週間かかっています。ファイルサイズは25KBから212KBまで膨らみました。何が起きていたのかを順に書きます。

そもそもICOは「画像1枚」ではない

先に前提を書きます。ここを誤解していたのが、遠回りの根っこでした。

PNGやJPEGは1枚の画像ですが、ICOは複数の解像度の画像を1つのファイルに束ねた入れ物です。16px、24px、32px、48px、64px、128px、256px…といったサイズごとに、別々の画像データが入っています。Windowsは表示する場所に応じて、この束の中から適切なサイズを選んで描きます。

つまり「アイコンが変」と言っても、束の中のどのサイズが変なのかで原因も対策も違います。そして厄介なのは、開発中に自分がよく見るサイズと、利用者が実際に見るサイズが一致しないことです。

1回目: 別のアプリのアイコンが入っていた

初回リリース版のICOは25,520バイトでした。中身は自分が前に作ったブロック崩しゲームのアイコンです。ToDoアプリを配ったのに、インストールするとゲームのアイコンが並びます。

原因は単純で、デスクトップアプリの雛形を前のプロジェクトから起こしたからです。ビルド設定もフォルダ構成もそのまま使えて助かったのですが、差し替え忘れたアセットは「壊れていない」ので、ビルドは普通に通ります。エラーも警告も出ません。

これは同じ月にもう一度やりました。ストア掲載用のスクリーンショットのフッターに、別ブランド名が入ったままだったのです。こちらもゲーム用のテンプレートを流用したせいでした。

2回目: 小さいサイズだけ潰れて化ける

正しい絵に差し替えたのに、今度はエクスプローラーの一覧やインストーラーの隅で、アイコンが潰れたり色が化けたりしました。大きく表示される場所では正常です。

原因は、束の全サイズをPNG圧縮で入れていたことでした。ICOの中の各エントリは、昔ながらのBMP形式でも、PNG形式でも格納できます。PNGのほうが小さくなるので全部PNGにしていたのですが、Windowsの古い描画経路がPNG圧縮のエントリを正しく扱えず、小さいアイコンを描くところで崩れていました。

直し方は、形式を混ぜることでした。

• 128px以下: BMP（32bit + ANDマスク）で格納。古い描画経路でも確実に読める
• 256px: PNGで格納。ここはサイズが大きいので圧縮の利きが効く

もう1つ、ここで効いた変更があります。16px・24px・32px を、同じ絵の縮小版ではなく「要素を落とした別の絵」に差し替えました。元の絵は円のチェックマークに葉と文字が乗ったものでしたが、16pxではどれも数ピクセルにしかならず、混ざって濁った点になります。小さいサイズはチェックの円だけにして、他を捨てました。

アイコンは縮小されるのではなく、サイズごとに描き分けるものだと理解したのがこの回です。

3回目: 透過にしようとして、台座ごと消した

次に気になったのが、アイコンの背景でした。角丸の台座の外側に白い余白が残っていて、暗い背景のタスクバーで白い四角が浮いて見えます。

そこで「背景を透過にする」作業をしたのですが、やりすぎました。白い余白だけでなく、デザインの一部であるクリーム色の角丸台座まで削って、緑のチェック円だけを画面いっぱいに拡大した絵にしてしまったのです。

透過にはなりました。ただしそれはもはや同じアイコンではありません。ブランドの色が消えて、他のアプリと見分けがつきにくくなりました。

4回目: 差し戻して、問題を切り分け直した

前の版を差し戻して、症状をもう一度言葉にするところからやり直しました。

台座は角丸なのに、48px以上のサイズで四角い角が見えている。それは背景が白い正方形の画像だから。

こう書き直すと、やるべきことは「透過にする」ではなく「角丸のマスクをかけて、その外側の余白だけを透過にする」でした。台座は残したまま、はみ出た白だけを抜けばよかったのです。

1024pxの原本に角丸マスクをかけたものを1枚作り、48px以上のサイズはそこから生成し直しました。16/24/32pxは2回目で作った簡略版のままです。これで落ち着きました。

3回目と4回目の差は、技術ではなく症状の言語化の粒度でした。「背景が変」で作業を始めると背景を全部消しにいきますが、「角丸のはずが四角い角が出ている」まで絞れば、消すべきものが角の外側だけだと分かります。

なぜ4回もかかったのか

一番の理由は、アイコンが表示される場所ごとに、描画の経路が違うことでした。

• タスクバー
• 通知領域（トレイ）
• エクスプローラーの一覧（表示形式によってサイズが変わる）
• インストーラーのウィンドウ
• アンインストール画面
• ショートカットのプロパティ

これらは同じICOを読みますが、選ぶサイズも、対応している格納形式も、背景の色も違います。だから1箇所で直しても、別の1箇所で初めて症状が出ます。開発中に自分が見るのはタスクバーばかりなので、インストーラーの中の小さいアイコンは、実際にインストールし直すまで目に入りません。

今は、アイコンを触ったらインストーラーを実行して、上のリストを順に見るようにしています。面倒ですが、4回リリースし直すよりは軽い作業です。

ついでに直した、無関係に見えた不具合

2回目の修正のとき、アンインストール時に「アプリが起動中です。閉じてください」というダイアログが出る問題も一緒に直しました。

これはアイコンとは無関係に見えますが、原因の構造は同じでした。途中のバージョンでトレイ常駐に変えたので、利用者から見ればアプリは「起動していない」のです。ウィンドウは閉じてあります。それなのに「閉じてください」と言われるので、何を閉じればいいのか分かりません。

ダイアログを出すのをやめて、黙って終了させる形にしました。常駐という設計変更が、無関係な場所の文言を嘘にしていたという話です。

持ち帰れること

• ICOは複数解像度の束。「アイコンが変」ではなく「どのサイズが変か」まで絞る。ここを分けないと、直す場所が決まりません
• 小さいサイズは縮小版ではなく、要素を落とした別の絵にする。16pxに細部を詰めても濁った点になるだけです
• ICOの格納形式は混ぜる。128px以下はBMP、256pxはPNG。全部PNGにすると古い描画経路で化けます
• 雛形を流用したら、コードではなくアセットを数える。アイコン・スクリーンショット・ブランド名・説明文。間違っていてもビルドは通り、そのまま配布されます
• 症状を書き出してから直す。「背景が変」で始めると消しすぎます。「角丸のはずが四角い角が出る」まで書ければ、消す範囲が決まります
• アイコンを触ったら、実際にインストールして表示場所を一巡する。開発中に見えるのは全体の一部です

ちなみにファイルサイズは25KBから212KBになりました。増えた分のほとんどは、サイズごとに描き分けた絵と、BMPで持つことにした分です。アイコンを軽くすることに意味はほぼ無いので、ここは素直に増やしてよかったと思っています。