ショートカットのアイコンを作るときの選び方｜4つの経路と条件

ショートカットのアイコンを作る手順を調べると、画像をコピーして情報ウインドウに貼る話、コマンドで変換ファイルを組み立てる話、ブラウザの設定画面から画像を選ぶ話が、同じ見出しの下に混ざって出てきます。どれも間違いではありません。ただし向いている場面が違うため、条件を確かめずに一番上に出てきた手順をなぞると、数週間後に絵柄が元へ戻って作り直しになります。ここでは経路を4つに分けて、どの条件のときにどれを選ぶかを整理します。

同じ言葉で呼ばれている3つの作業を分ける

最初に分けるべきなのは、絵柄を用意する作業と、絵柄を項目に結び付ける作業と、アプリの形式に組み立てる作業です。この3つは必要な道具も、失敗したときの直し方も違います。

絵柄を用意する作業は、正方形の画像を1枚作ることです。自分で描く場合もありますし、サービスの公式サイトが配布している画像を落としてくる場合もあります。ここで決まるのは解像度と余白の取り方で、後の工程では取り返せません。

絵柄を項目に結び付ける作業は、Finderの情報ウインドウで行うものが代表です。すでに存在しているファイルやフォルダ、アプリに対して、上から別の絵柄をかぶせます。実体の中身には触らないため、元の絵柄はそのまま残ります。

アプリの形式に組み立てる作業は、macOSがアプリのアイコンとして読む形式のファイルを作ることです。複数の大きさの画像を1つのファイルにまとめる工程が入るため、他の2つと比べて手数が増えます。その代わり、アプリの中身として持つので、Dockでも切り替え画面でも同じ絵柄が出ます。

検索して出てくる手順が、この3つのどれを説明しているかを見分けられると、必要のない工程を飛ばせます。1つのサイトを整えたいだけなのに、変換コマンドの説明から読み始めると、そこで止まります。

絵柄の実体がどこに置かれるかで、消え方が決まる

作ったアイコンがいつ消えるかは、実体がどこに置かれているかで決まります。ここを先に把握しておくと、経路の選び方がほぼ決まります。

情報ウインドウで貼り付けた絵柄は、その項目に付属する情報として保存されます。アプリの実体が新しいものに置き換わると、付属していた情報ごと入れ替わるため、更新のたびに元の絵柄へ戻ることがあります。毎月更新が来るものに対して手作業で貼り続けるのは、現実的ではありません。

アプリの中に組み込んだ絵柄は、そのアプリの一部です。自分で作ったアプリであれば、作り直さない限り変わりません。配布されているアプリの場合は、更新のたびに開発元の絵柄で上書きされます。

Safariで作ったWebアプリは、アプリ自身の設定として絵柄を持ちます。Appleのサポート文書には、設定画面での操作がこう書かれています。

アイコン：表示されているアイコンをクリックし、開いたファイルダイアログから新しい画像を選択します。その画像がWebアプリの新しいアイコンになります。 出典: support.apple.com

この経路は、変換ファイルを組み立てる工程が要りません。画像を1枚選ぶだけで済みます。

Chromium系のブラウザからページをアプリとして入れた場合、絵柄の出どころはサイト側の設定ファイルです。サイトが絵柄を差し替えると、手元のアイコンも変わる可能性があります。Chromeのヘルプには、ウェブアプリが名前やアイコンを更新しようとしたときに通知が届き、承認と無視とアンインストールから選べると書かれています。自分で決めた絵柄を保ちたい場合、この経路は前提が合いません。

必要な解像度は、いちばん大きく表示される場所で決まる

必要な画像の大きさは、Dockの表示ではなく、いちばん大きく出る場所で決まります。Quick Lookやアイコン表示のFinderでは、Dockより大きな寸法で描かれるためです。

macOSのアプリアイコンは、複数の大きさを束にした形式で持ちます。Appleの技術文書には、16x16、32x32、128x128、256x256、512x512の5つについて、標準解像度と高解像度の対を用意すると書かれています。高解像度の側は倍の画素数になるため、実際に必要な最大の画像は1024ピクセル四方です。

There is no longer a 1024x1024 size. That's replaced by 512x512@2x. 出典: developer.apple.com

ここから逆算すると、元の画像は1024ピクセル四方の正方形が上限で足ります。それより大きくても使われません。逆に、サイトのタブに出ている小さなアイコンを拾ってきて引き伸ばすと、輪郭がにじみます。タブ用の画像は32ピクセル程度で作られていることが多く、拡大に耐える情報が入っていないためです。

小さい側も見落とせません。16ピクセルまで縮んだときに何のアイコンか分かるかどうかは、絵柄の複雑さで決まります。文字を入れる場合は1文字か2文字が限界です。写真をそのまま当てると、小さい側で色の面にしか見えなくなります。

作る個数と更新の頻度で、損得が入れ替わる

1個だけ作るなら、手作業がいちばん速く終わります。画像をプレビューで開いてコピーし、情報ウインドウの左上の小さいアイコンを選んでペーストする。所要時間は1分程度です。

個数が増えると話が変わります。10個を手作業で貼ると、貼り忘れと貼り間違いが混ざります。さらに、どの画像をどこから取ってきたかを覚えていないため、作り直しのときに同じ絵柄を再現できません。元の画像をフォルダにまとめて残しておく習慣がないと、この作業は2回目で破綻します。

更新の頻度も効いてきます。自分で作ったアプリなら更新は自分のタイミングですが、ブラウザを土台にしたアプリは、ブラウザ側の更新に引きずられることがあります。更新のたびに絵柄が戻るなら、戻らない場所に絵柄を置く経路へ切り替えたほうが、結果として手数が減ります。

判断の目安は単純です。作る数が3個までで、当面増える見込みがないなら手作業で足ります。5個を超えるか、今後も増えることが分かっているなら、絵柄がアプリの一部になる経路を選んだほうが後が楽になります。

同じ絵柄が出る場所を、先に数えておく

アイコンが出る場所は1か所ではありません。Dock、Command＋Tabの切り替え、Launchpad、Spotlightの検索結果、Mission Controlの窓の隅、通知の左側、Finderの一覧と、少なくとも7か所に同じ絵柄が出ます。どの経路を選んでも全部に反映されるわけではない、という点が選び方に効いてきます。

アプリの中身として絵柄を持たせた場合は、この7か所すべてが同じ絵になります。macOSがアプリの情報として読むためです。一方、情報ウインドウで上からかぶせた絵柄は項目に付属する扱いなので、反映される場所と、元の絵柄が残る場所が混ざることがあります。DockだけがすぐにはVERしないという症状も、ここから来ます。

見落としやすいのが通知です。サービスから通知が届く設定にしている場合、通知バナーの左側にもアイコンが出ます。ここで他のアプリと見分けが付かないと、通知を開いてから「これではなかった」と戻る往復が毎日起きます。通知を受け取るサイトほど、絵柄を分ける効果が大きくなります。

小さい側で見分けが付くかを確かめる方法は簡単です。Dockのサイズをいちばん小さくして1日使ってみると、判別できない絵柄がすぐ分かります。そこで落ちる絵柄は、色数を減らすか、文字を大きくするかのどちらかで作り直したほうが、後から効いてきます。

4つの経路を条件で並べる

ここまでの条件で、経路を並べ直すとこうなります。

経路	用意する画像	絵柄が消える条件	向いている個数
情報ウインドウで貼る	正方形1枚	対象のアプリが更新されたとき	1個から3個
Safariのウェブアプリ設定	正方形1枚	作り直したとき	数個
Chromium系でアプリとして入れる	不要（サイト側の画像）	サイトが画像を差し替えたとき	数を問わない
アプリ形式のアイコンを組み立てる	5つの大きさの対	自分で作り直したとき	多数

いちばん上の行は、すでにある項目の絵柄を変える作業です。新しくアプリを作る話ではありません。下の3行は、サイトを独立したアプリにしたうえで、その絵柄をどこから持ってくるかの違いです。

3行目だけは、自分で画像を用意しない選択肢になります。サイト側が用意した絵柄がそのまま出るため、手数はゼロです。その代わり、絵柄の決定権はサイト側にあります。社内の管理画面のように、そもそも専用の画像が用意されていないサイトでは、この経路は使えません。

選ぶ前に答えを出しておく3つの問い

アプリの列に並ぶ必要があるか

Dockには区切り線があり、アプリと書類で置ける側が分かれています。切り替え画面に出したいなら、アプリの実体が要ります。URLを保存しただけのファイルは書類として扱われるため、いくら絵柄を整えても、アプリの列には並びません。ここの答えが「並べたい」なら、絵柄より先にアプリを作る工程が必要です。

元の画像を1024ピクセルで用意できるか

用意できるなら、どの経路でも選べます。用意できない場合、選べるのはサイト側の画像をそのまま使う経路だけです。公式サイトのプレスキットや、サービスのブランド用ページに高解像度の画像が置かれていることがあるので、諦める前にそこを確認する価値はあります。

何個作るか

1個なら手作業、5個以上なら再現できる手順、というのが分かれ目です。ここを曖昧にしたまま始めると、途中で経路を変えることになり、最初に作った分をもう一度やり直す羽目になります。作りたいサイトの一覧を先に書き出してから、経路を決めてください。

独自データから見た、自分で画像を用意しなくて済む範囲

サイトを独立したmacOSアプリに変える道具の側には、どのサービスが実際に切り出されているかという蓄積があります。240以上のプリセットからすぐ作れる状態で並んでいる顔ぶれを見ると、毎日往復する種類のサービスが上位に集まっています。こうしたサービスは、URLと名前と絵柄が組で登録されているため、画像を探す工程そのものが消えます。自分が毎日開いているものが含まれているかどうかは対応サービス一覧で確認できます。

一覧に無いサイト、たとえば社内の勤怠システムや取引先の管理画面については、自分で画像を指定する経路になります。どこまで指定できるか、名前や窓の挙動と合わせてどう設定するかはできることに整理されていて、作成の流れそのものは使い方ガイドに手順としてまとまっています。

費用の形も、経路を選ぶ前に見ておくと判断が早くなります。無料でいくつまで作れるかが分かれば、試す範囲を先に決められます。買い切りか月額かで数年後の総額も変わるため、料金は数を増やす前に見ておく項目です。更新のあとに絵柄がどうなるか、同じサイトから複数作れるかといった運用上の疑問はよくある質問にまとまっています。

まず決めるのは、経路ではなく個数です。作りたいサイトを紙に書き出して、3個以下なら今日中に手作業で終わらせる。それ以上あるなら、絵柄がアプリの一部として残る経路を選んで、最初の1個で手順を確かめてから残りに広げる。この順番なら、作り直しは1回で済みます。