11/1(日) ウニクリッカー販売➝うみたかマルシェ@品川 11/3(火祝) 魔改造プラレール展示➝超エレキ万博@秋葉原
雑記

Windowsで自作のアイコンが小さく表示される原因

AI要約

Windowsのショートカットに設定した自作アイコンが「大アイコン」「特大アイコン」で小さくなる現象を調査。原因はICOファイルに256×256画像が埋め込まれていないことでした。

やること

Windows10や11で、ショートカットに自作のアイコンを割り当ててオリジナルのボタンを作る場面があります。パソコンに詳しくないお客様にシステムを納品するとき、「デスクトップのこのボタンをダブルクリックすると処理が開始しますよ」と案内するときによく使っています。

しかし、デスクトップのアイコンを拡大すると、アイコン画像が小さく表示されるトラブルに見舞われます。

あれこれ条件を変えて生成してみても、なかなか原因が特定できないんですよね。今回はWindowsで自作のアイコンが小さく表示される原因を解明します。

検証

まず、アイコン画像は正方形である必要があります。

パワーポイントで正方形のアイコンを4つ作りました。わかりやすいようにサイズを印字してあります。上段はパワポ上での図形サイズ、正方形のつもりで作っています。中段が「画像として保存」して実際に保存されたpngファイルのピクセルサイズです。

①255×255.png
②255×254.png
③256×256.png
④257×258.png

なんと、パワポ上で正方形のオブジェクトを作っても、画像として保存するとわずかに正方形にならない場合があります。マイクロソフトさん。正方形くらいちゃんと正方形で出力しましょうよ~。はい、これが問題の原因の一つです。

これらのpng画像を、適当な変換サイトでico画像に変換します。

PNG→ICO変換
PNG→ICO変換は、PNG形式の画像ファイルをICO形式の画像ファイルに変換できるツールを提供しているサイトです。PNG形式の画像ファイルをアップロードするだけで、インストール不要・オンライン上でI...

適当なファイルのショートカットを4つ作成しました。この時点では、「特大アイコン」まで拡大しても問題なくサムネイル画像が表示されます。

これらのショートカットについて、プロパティ>アイコンの変更でさっき生成したico画像を指定します。

するとご覧の通り、「大アイコン」「特大アイコン」サイズに拡大すると小さく表示されて変な感じになるのです。これが冒頭で述べた問題です。正しく表示されたのは「③256×256.png」だけでした。

原因

こちらのファビコン解析ツールでico画像の中身を見てみると、

favicon.icoファイル分析 | ファビコン中身の確認・抽出ツール
ファビコン(favicon.ico)ファイルの中身を無料で解析し、各サイズのアイコンを確認・抽出。

①②④のico画像には256×256サイズの画像が埋め込まれていないことがわかります。先ほどの変換サイトではアイコン化のためのサイズ調整をしてくれておらず、サイズそのままで形式だけ変換していたためです。

Windowsのアイコンには256×256サイズの画像が必要です。上記のような変換サイトでは、「一辺256ピクセル以上」かつ「正方形」の画像しか256×256サイズに変換してくれません。だから、4枚のうち1枚しか正常に表示されなかったのです。

そこで、例えば以下のような変換サイトを使いましょう。ちゃんと埋め込みサイズの指定ができるので、256×256サイズにチェックを入れて変換すればOKです。

Faviconジェネレーター
Faviconジェネレーターは、ブラウザ上で、JPEG, PNG, GIF などの画像ファイルから favicon 用の画像(favicon.ico)を生成・変換するサービスです。透過、マルチアイコン...
ICO 画像変換ツール
PNG、WebP、JPEG、GIF、BMP のいずれかの形式の画像を ICO 形式(いわゆる favicon.ico 形式)の画像に変換します。1つの .ico ファイルの中に複数のサイズの画像が含ま...

256×256サイズに変換されて埋め込まれていれば、元のpng画像のサイズが悪くても正常にアイコンが表示されます。

おわりに

検索しても決定的な情報が見つからなかったので検証しました。今回は「一辺256ピクセル以上かどうか」「正方形かどうか」「どの変換サイトを使うか」という複合的な要因が絡んでしました。

スッキリ理解できましたね。役に立ったらコーヒーをごちそうしてください ( ˘ω˘ ) スヤァ

リアクションのお願い

「参考になった!」「刺激された!」と思ったらぜひリアクションをしましょう。エンジニアの世界はGive and Takeによって成り立っています。これからも無料で良質な情報にアクセスできるよう、Giveする人への感謝をリアクションで示しましょう!

この記事をシェアする

自身のブログ等で使用する場合は引用を忘れずに!

また、寄付も受け付けています。コーヒー1杯でとても喜びます(*˘︶˘*)

 Amazonでギフト券(アマギフ)を贈る

こちらのリンク から金額を指定してお贈りください。(デフォルトで10000円になっているのでご変更ください)

配送:Eメール
受取人:staffあっとvigne-cla.com
贈り主:あなたのお名前やニックネーム
メッセージ:◯◯の記事が参考になりました。など

のようにご入力ください。見返りはありませんのでご了承ください。

 Amazonで食事券(すかいらーく優待券)を贈る

500円 1000円 2000円 5000円 からお贈りください。

配送:Eメール
受取人:staffあっとvigne-cla.com
贈り主:あなたのお名前やニックネーム
メッセージ:◯◯の記事が参考になりました。など

のようにご入力ください。見返りはありませんのでご了承ください。

 その他、ギフト券やクーポン券をメールで贈る

デジタルのギフト券/クーポン券はメールアドレス(staffあっとvigne-cla.com)までお送りください。受領の返信をいたします。
紙のギフト券/クーポン券は 「郵便物はこちらへ」の住所 まで送付してください。名刺やメールアドレスを同封していただければ受領の連絡をいたします。
余った株主優待券等の処理におすすめです。
いずれも見返りはありませんのでご了承ください。

不明点はSNSでお気軽にご連絡ください

ビネクラのTwitter・Youtubeでコメントをください!


Slack・Discordの場合はこちらの公開グループに参加してShoya YasudaまでDMをください!


※当ブログに関することは何でもご相談・ご依頼可能です。

この記事を書いた人
Yasuda

博士(理学)。専門は免疫細胞、数理モデル、シミュレーション。米国、中国で研究に携わった。遺伝的アルゴリズム信者。物価上昇のため半額弁当とともに絶滅寸前。

タイトルとURLをコピーしました