SparkIconAISparkIconAI
アプリアイコンとは?定義、iOSとAndroidのサイズ、仕組みを解説

アプリアイコンとは?定義、iOSとAndroidのサイズ、仕組みを解説

Philexon in an hour

アプリアイコンとは?

アプリアイコンとは、スマートフォン、タブレット、コンピューター上でアプリケーションを表す小さな正方形の画像です。アプリを開くときにタップする画像であり、ストアでスクロールしながら目にするサムネイルであり、共有シートでアプリ名の隣に並ぶマークでもあります。1つのファイル、多くの場合は1セットのファイルが、ボタン、ラベル、ブランドマークの役割を同時に果たしています。

この用語は近隣の言葉と重なり合うため、境界線は曖昧になりやすいものです。ロゴは企業のマークで、どんな形状でも構いません。デバイス上に表示されるあの正方形こそ、人がタップする対象です。faviconは、ブラウザのタブにおけるWebサイト版のアイコンです。そして通知アイコンは、アプリの動作中にステータスバーに表示される小さなグリフです。「アプリアイコンとは何か」と聞かれれば、多くの人はあの正方形のランチャー画像を指しており、本ガイドで扱うのもそれです。

アプリアイコン・ロゴ・faviconの違い

この3つが混同されるのは、意図的に似た見た目に仕立てられることが多いからです。違いは形状、サイズ、そしてそれぞれが存在する場所にあります。

アプリアイコンロゴfavicon
形状正方形で、角はOSによって丸められる任意の形状正方形で、小さく表示され、タブでは丸くなることが多い
存在する場所ホーム画面、アプリストア、設定Webサイトのヘッダー、名刺、パッケージブラウザのタブ、ブックマーク一覧、履歴
代表的なサイズ1024 pxのマスターを、48 px以下に切り出しベクターで任意のサイズ16 px、32 px、48 px、180 pxのapple-touch-icon
誰が形にするか正方形をこちらがデザインし、角丸とスケールはシステムが適用自分自身またはデザイナーサイトと一緒に公開する本人

faviconを直接定義すると、ブラウザがタブやブックマーク一覧にサイトのマークを表示できるよう、Webサイトが公開する小さな画像ファイルのことです。Web側の話が必要であれば、MDNのfaviconガイドが仕組みを説明しており、SparkIconAIのサイトアイコンジェネレーターなら1つのマスターから全faviconサイズとPWAサイズを一度に書き出せます。

iOSのアプリアイコンサイズは?

Apple側では、1024 x 1024 pxの透過なしの正方形マスターをPNGで1枚用意します。Xcode 14以降、アセットカタログに必要なのはこの1枚のマスターだけで、iOSがホーム画面、Spotlight、設定、通知など他のすべての表示文脈をここから生成します。AppleのApp iconsガイダンスがフルブリードの正方形を求めるのは、角丸を適用するのがデザイナーではなくシステムだからで、iOS 26ではシステムがホーム画面のアイコンにLiquid Glassの処理を適用することもあります。実際の運用として、提出するファイルに角丸を焼き込む必要は決してない、ということです。

Androidのアプリアイコンサイズは?

Androidでは2つのアイコンが求められます。Google Playのリスティングアイコンは512 x 512 pxの32-bit PNGです。ランチャーアイコンはアダプティブアイコン(adaptive icon)で、背景と前景の2つのレイヤーがそれぞれ108dp、その中央の72dpがマスクを通って残り、中央に配置された66dpの円が保証されたセーフゾーンとなります。ランチャーごとにマスクの形は丸やスクワークルなど異なるため、マークの重要な部分はセーフサークルの内側に収めるというのがルールです。アダプティブアイコンのドキュメントに完全な仕様があり、Google Playアイコンジェネレーターなら1つのマスターから512 pxのリスティング用アセットとmipmapセットの両方を書き出せます。

Androidのアプリアイコンバッジとは?

アプリアイコンバッジとは、アプリに未読の通知があるとき、アイコンの隅に表示される小さな点や数字のことです。Googleは点の形式をnotification dotsと呼び、これはAndroid 8.0以降の機能です。SamsungのOne UIでは同じものをapp icon badgesと呼び、アプリごとに点と数字のどちらにするかを選べます。だからこそ、SamsungのスマートフォンとPixelとでは言い回しが違って聞こえるのです。アイコンを長押しすれば通知をのぞけますし、設定の「通知」でこの機能のオン・オフも切り替えられます。バッジはシステムが描画するため、ファイル自体にデザインして入れるものはありませんが、マークの中央をすっきりさせておくべきもう1つの理由にはなります。

Androidのapps icon(アプリ一覧アイコン)とは?

多くのAndroidスマートフォンでは、apps icon(アプリ一覧アイコン)はホーム画面の下部にあるボタンで、通常は円形か点をグリッドに並べた形をしており、アプリドロワー、つまりインストール済みの全アプリをアルファベット順に並べた一覧を開きます。これはナビゲーション操作であって、個々のアプリケーションのアイコンではありません。この質問がたいてい含んでいる混同はまさにそこです。見た目はランチャーによって変わり、ジェスチャーナビゲーションでは上へのスワイプに置き換えられて、完全に消えます。

見慣れないマークの話ついでに、ステータスバーに現れる単独の文字アイコン、たとえばAndroidのTアイコンは、システム自身のものではまずありません。AndroidにはTという組み込みシンボルが存在しないため、通知を投稿したサードパーティ製アプリ、多くの場合その名前がこの文字で始まるアプリからのものです。設定で通知履歴を確認すれば、数秒でそのアプリが分かります。

アイコンの作り方

正方形のマスターを入手する方法は2つあります。古典的な方法は、デザイナーがグリッドに合わせてベクターソフトで描き、48 pxで判読できるようになるまでシルエットを調整するものです。新しい方法はジェネレーティブです。マークを一文で記述するとAIモデルが1024 pxのマスターを返し、プロンプトを打ち直したり分岐させたりして反復します。後者の道を歩んでいるのがSparkIconAIです。アイコンを記述し、候補を生成し、16 pxで確認し、それから1つのマスターからストア用とWeb用のサイズを書き出します。デザイン工程全体を知りたいなら、アイコンデザインガイドとジェネレーターがコンセプト、書体、シルエットの判断を一通り解説し、AIアイコンジェネレーターは最初の1枚を作る最短の道です。

よくある質問

  • faviconジェネレーターとは何ですか? 1つの正方形マスターから、サイトに必要なfavicon各種、すなわちfavicon.ico、180 pxのapple-touch-icon、192 pxと512 pxのPWAアイコンを切り出すツールです。サイトアイコンジェネレーターはまさにその切り出しを行います。
  • アイコンデザインとは何ですか? 物や概念を表すシンボルを描く実践で、ホーム画面のマーク、インターフェースアイコン、ブランドセットまでを含みます。アイコンデザインのページでは種類、ルール、AIのワークフローを扱っています。
  • 1枚の画像で全サイズを賄えますか? シルエットが十分シンプルなら賄えます。1024 pxのマスターをデザインし、48、32、16 pxでプレビューし、潰れて見えるならアイデアではなく形状のほうを単純化しましょう。
  • ファイルに角丸は必要ですか? 必要ありません。iOSもAndroidもそれぞれ独自のマスクを適用するため、フルブリードの正方形を提出して、システムに角丸を任せましょう。