![](https://marunaka-blog.com/wp-content/uploads/2021/04/5d01986ebd84a27b7bc6db64f2ee5481.png)
アプリケーションにアイコンを設定するにはどうすればいいの!?
この記事では Visual Studio で作成したアプリケーションのアイコンを設定する手順について画像を用いて分かりやすく解説をしています。
Visual Studio でアプリケーションを作成すると、次のようなアイコンがデフォルトで設定されています。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/381d2bbafecf5a7423a22e4ba6654726.png)
デフォルトのアイコンのままでもアプリとしては問題ありませんが、アイコンは変更することをオススメします。アイコンを変更する事で、他のアプリと差別化が行えるため、ユーザーがアプリを素早く特定できるメリットがあります。
また、アイコンはアプリを起動する前にユーザーが一番最初に視認する部分なので、ユーザーに与える印象は非常に大きいです。アイコンの見た目でアプリの良し悪しを判断されることもあるので、アイコンは重要な要素とも言えます。
ぜひ、この記事を参考にしてアイコンを変更してみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2021/11/1f376bb9c724abce01920d783552b69c-300x200.jpg)
オススメの参考書
C#の使い方が丁寧に解説しており、「基礎からしっかりと学びたい」という初心者の方にオススメの一冊です。サンプルコードも記載してあり、各章の最後に復習問題があるので理解度を確認しながら読み進めることができます。新しい C# のバージョンにも対応している書籍です。
アイコンの準備
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929-1024x358.jpg)
Visual Studio で開発したアプリのアイコンを設定するには、アイコンファイル(.ico)を用意する必要があります。
このアイコンファイルは、異なるサイズ・色数のアイコンイメージをまとめて格納することができます。
何故こんな機能があるかというと、アイコンを表示する場所によって自動的に切り替えができるようにする為です。例えば、タイトルバーのアイコンサイズは16×16ですが、デスクトップ上のアイコンサイズは32×32で異なるので、アプリが自動的にサイズを切り替えて表示しています。
アイコンサイズ | アイコンを表示する場所 |
---|---|
16 × 16 | タイトルバー、エクスプローラーの一覧や詳細など |
32 × 32 | タスクバー、アプリのプロパティなど |
48 × 48 | エクスプローラーの中アイコン表示など |
256 × 256 | デスクトップのショートカット、エクスプローラーの大アイコン表示など |
表示したいサイズが見つからない場合は、最も近いアイコンイメージを適切なサイズに伸縮して表示するという動作を行っています。伸縮して表示したアイコンは解像度が落ちることがあるので、なるべく上記の場所で表示できるようにしておくといいでしょう。
アイコンファイルを用意する方法は主に2つあります。
- 画像ファイルを変換する
- アイコンファイルを作成する
それぞれの方法について、以下に具体的な説明をします。
画像ファイルを変換する
WEBブラウザ上で利用できる無料の変換ツールを使って、画像ファイルをアイコンファイルに変換して入手することができます。
無料で利用できる変換ツールとして、エーオーシステム株式会社が提供する「」があります。 マルチアイコン作成
![](https://marunaka-blog.com/wp-content/uploads/2023/09/61ab34ae7c572460d2ed4b4c9d32e850.png)
このサイトは変換したい画像ファイル(.png )を選択するだけで、サイズが異なる画像ファイルを一瞬でアイコンファイルに変換できます。
ここでは次の4種類の画像ファイルを変換します。画像ファイルは無料で利用できる「ICOON MONO (アイコンモノ)」からダウンロードしました。シンプルなものが多く、サイズや色を指定できるので非常に使い勝手が良いです。
16×16
![](https://marunaka-blog.com/wp-content/uploads/2023/09/279917e5cb00280a396c1105cbe6643b.png)
32 × 32
![](https://marunaka-blog.com/wp-content/uploads/2023/09/b9fb5f6226a43b36bebb08282d7f8759.png)
48 × 48
![](https://marunaka-blog.com/wp-content/uploads/2023/09/6c48feabd5786287fc81dc96ade3274c.png)
256 × 256
![](https://marunaka-blog.com/wp-content/uploads/2023/09/c81e81ac584168aceee107b2baf770b2.png)
変換ツールの使い方は次の通りです。
「マルチアイコン作成」をWEBブラウザで開きます。[ファイルを選択]をクリックして変換するファイルを選択します。
または、画像ファイルをドラッグ&ドロップでWEBブラウザにアップロードします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/4b764afe76746f4335c062054bc836f9.png)
画像ファイルの選択が完了したら、[ダウンロード]ボタンをクリックします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/9d3ec1e1d302dda63c79c49e64ac2514.png)
[ダウンロード]ボタンは少し下へスクロールするとあります。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/2b26e9e6108038175bbc0b4e5938eafe.png)
ダウンロードフォルダに ICO ファイルがあることを確認しましょう。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/5b90b5d267ea8e4762cdc784874aae08.png)
アイコンファイルを作成する
アイコンを自作する方法はいくつか存在しますが、ここでは Visual Studio のアイコンエディターを使ってアイコンを作成する方法を紹介します。
Visual Studio でプロジェクトファイルを開きます。
ソリューションエクスプローラーで右クリックして、[追加(D)] -> [新しい項目(W)]を選択します。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/b0a686817fe2462609c7b2e0d47ed5ba.png)
一覧から「アイコン ファイル」を選択します。
ファイル名は任意の名前に変更して、[追加]ボタンをクリックします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/27db2b7febdba197d3d494ebe3a393ad.png)
メニューバーから [ツール(T)] -> [カスタマイズ(C)] の順に選択をします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/cd6b76db6c39a3f8f00f9b701337edc0-1024x470.png)
カスタマイズ画面の[ツールバー]タブを選択して、イメージエディタにチェックを入れて、[閉じる]ボタンをクリックします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/e8e8d4e705fc66d2e20d3ba02b92a628.png)
ツールバーにイメージエディターが表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/94e9fb28fea8f625678c4f5ce9111251-1024x518.png)
右クリックして[色の設定ウィンドウの表示(N)]を選択します。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/821830d3f011539fd92717c3eb311a84-1024x500.png)
色の設定ウィンドウが表示されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/be62e93fe578947f474983c21a2f645e-1024x521.png)
先ほど表示した「イメージエディター」や「色の設定」を使用して、アイコンを作成します。
アイコンのサイズを追加する場合は、右クリックして[新しいイメージタイプ]を選択します。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/ae23920da843ebb096fa386d84eb2fff.png)
ターゲット イメージ タイプは「サイズ, 色深度」の組み合わせになっています。色深度はアイコンで使える色のことで、通常は使える色が多い24ビットを選ぶといいでしょう。
ビット | 使える色 |
---|---|
1 | 白黒 |
4 | 16色 |
8 | 256色 |
24 | 約1670色 |
アイコンの作成が終わったら、メニューバーから[ファイル(F)] -> [アイコン名.icoの保存(S)]を選択して保存します。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/de30304b81c6dfe9baee7e9369c09c71-1024x479.png)
アプリアイコンの設定方法
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2ba5cbb657d2e1599edd30d8fa258ed4-1024x358.jpg)
ここからは C# で開発するアプリケーションのアイコンを設定(変更)する方法を紹介します。
ここでは WPF を使用しますが、Windows Form も同じような手順で設定することができます。
項目 | 内容 |
---|---|
開発環境 | Visual Studio 2022 |
プロジェクト | WPF アプリケーション |
フレームワーク | .NET 7 |
プロジェクトを起動して、ソリューションエクスプローラーを開きます。
ソリューションエクスプローラーにあるプロジェクト名にカーソルを合わせて、右クリックしてプロパティを選択します。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/7745d4096c3b1711c55a9f926b64a34d-1024x907.png)
プロパティ画面を開いたら、左サイドにある[アプリケーション] -> [Win32 リソース]を順に選択します。
Win32 リソースのアイコンから[参照]ボタンをクリックします。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/b104a9ff36957a5bc499cc6bb27e32e1-1024x907.png)
ファイル選択用のダイアログが開くので、アプリケーションに設定するアイコンを選択します。
アイコンを選択すると、プロジェクトにアイコンファイルが追加され、下図のようにアイコンファイルの名前が入力されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/9e33ab8b20033394a03bf69504a43b71.png)
上記の手順でアイコンの設定は完了です。
プロジェクトをデバッグして、アイコンが設定されているか確認してみましょう。アプリケーションのタイトルバーのアイコンが変更されていることが分かります。アイコンのサイズは 16×16 ですね。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/134531ecd262d7ce5979c4dff8a3cd57.png)
タスクバーに表示されているアイコンも変更されています。アイコンのサイズは 32 × 32ですね。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/7e719fed772dad2b8b18e96c665d51fd.png)
アプリケーションがあるフォルダを開いて、表示方法を「中アイコン」に切り替えると次のように、48 × 48のアイコンになります。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/25655a6366a56dda7645ca66fe897bc0.png)
表示方法を「大アイコン」に切り替えると次のように、256 × 256のアイコンになります。
![](https://marunaka-blog.com/wp-content/uploads/2023/09/239252d6365b45c2fa931973b5ac98ad.png)
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9-1024x358.png)
この記事では、アプリケーションのアイコンを設定 / 変更する方法を紹介しました。
アプリケーションに設定するアイコンファイルは、WEB ブラウザの変換ツールや Visual Studio のアイコンエディターを使うことで作成することができます。
まだアプリケーションのアイコンを設定されていない方は、ぜひ上記の手順で変更してみてはいかがでしょうか。
![](https://marunaka-blog.com/wp-content/uploads/2022/11/5b06ffe152bc8aa87073943cbcb585ca-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)
以上、最後まで読んで頂きありがとうございました。