apple-touch-icon-precomposedとは？初心者でもわかる設定と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

apple-touch-icon-precomposedとは？

apple-touch-icon-precomposed は iOS の Safari がホーム画面に追加するアイコンを指定するための link 要素の一つです。apple-touch-icon と違い、precomposed（事前に合成済み）と付くと、iOS がアイコンに自動的な光沢や装飾を適用しません。自分で用意したデザインをそのまま表示したいときに使います。長い間使われてきましたが、現在の iOS では光沢の表現が弱くなってきたため、必須ではありません。それでも、古いウェブサイトや特定のデザインを正確に再現したい場合には有効です。

設定方法

設定は主に HTML の head 部に link タグを追加します。例として、次のような記述を head に置きます（下記はテキスト表現のためのエスケープです）。

実際のウェブサイトでは、複数サイズのアイコンを用意して DEVICE の解像度に合わせて使い分けることもあります。推奨されるサイズやファイル形式はデバイスごとに異なりますが、一般的には PNG 形式で高解像度のアイコンを用意しておくと表示が美しくなります。

サイズと注意点

推奨されるサイズはデバイスによって異なります。最新の iOS 端末では高解像度のアイコンを用意しておくと見栄えが良くなります。複数のサイズを用意してリンクするのがベストですが、現状では 1 つの大きなアイコンを用意しておく方法がよく使われます。

また、apple-touch-icon の方が一般的に推奨されるケースが多く、precomposed を使うかどうかはデザイン方針によります。

比較表

属性	説明
apple-touch-icon	通常は iOS がアイコンに光沢を自動で追加します。
apple-touch-icon-precomposed	事前にデザイン済みのアイコンを使用して光沢を抑え、デザインをそのまま表示します。

実務でのポイント

実務のコツとして、ファイル名やパスは読みやすく、CDN を使って高速化すると表示の安定性が高まります。キャッシュ戦略を考えると、アイコンの変更時に古いファイルが長く残って表示される問題を避けられます。

テストは実機で行うのが理想です。iPhone や iPad のホーム画面にアイコンを追加して、表示サイズ、カラー、境界線の切れ目などを確認します。表示が崩れていれば、アイコンの解像度やファイル形式を見直します。

よくある質問

Q: apple-touch-icon-precomposed はもう必要ですか？ A: 多くの現代のサイトでは apple-touch-icon のみを使うことが多くなっていますが、デザイン上の理由や古いサイトの互換性のために still 有用です。

apple-touch-icon-precomposedの同意語

apple-touch-icon-precomposed: iOSのホーム画面に追加されるアイコンを指定する link rel。事前に光沢（グロス）加工済みのアイコンを使うことを示し、iOS側で追加の光沢を適用しないことを意味します。
apple touch icon precomposed: 同じ意味の別表記。空白入りの英語表現で、precomposedアイコンを使うことを伝えます。
Apple Touch Icon Precomposed: 英語表記の別名。光沢を自動で付けない precomposed アイコンを指します。
AppleTouchIconPrecomposed: コード上で見かけるキャメルケース表記。基本的には同じアイコン指定（precomposed）を指します。
apple-touch-icon-no-gloss: 非公式の表現で、光沢を付けないアイコンを意味します。precomposedと近い意味ですが、正式表現ではありません。
precomposed iOS home screen icon: iOSのホーム画面に表示するアイコンのうち、光沢を事前に加工した版を指す説明表現です。
iOS precomposed home screen icon: 英語表現の別名。光沢なしのホーム画面アイコンを意味します。
iOS home screen icon precomposed: 語順変化版。光沢なし（precomposed）アイコンを指す表現です。

apple-touch-icon-precomposedの対義語・反対語

apple-touch-icon: プリコンポーズされていないアイコン。iOS が装飾（光沢・影・丸みなど）を自動で適用する状態を指します。つまり、アイコン自体に装飾が施されていなくても、OS が表示上で装飾を追加します。
非プリコンポーズアイコン: apple-touch-icon と同義の表現。プリコンポーズではない状態のアイコンで、OS が自動的に装飾を適用する前提を指します。

apple-touch-icon-precomposedの共起語

apple-touch-icon: iOS のホーム画面に追加されるアイコン。スマートフォンのホーム画面に表示され、アプリの代替アイコンとして機能します。
apple-touch-icon-precomposed: プリコンポーズ済みのアイコンを指します。iOS が自動的に施す光沢やグラデーションを抑えたい場合に使われますが、現在は推奨されないことが多いです。
favicon: ブラウザのタブやブックマークに表示されるサイトのアイコンです。
favicon.ico: ICO 形式のファイル名。古くから使われるデフォルトの favicon ファイル名です。
touch-icon: タッチ対応デバイス用のアイコン全般を指す総称です。
home-screen-icon: ホーム画面に追加されるアイコンの総称。apple-touch-icon が該当します。
apple-mobile-web-app-capable: この設定により、ウェブサイトをウェブアプリとして全画面表示で実行できます。
apple-mobile-web-app-title: ホーム画面に保存した際の表示名を設定するメタ情報です。
apple-touch-icon-sizes: 複数の解像度のアイコンを用意する場合のサイズ指定。例として 180x180 などを指定します。
ios-home-screen: iOS デバイスのホーム画面に関連するアイコンや機能の総称です。
web-app-icon: ウェブアプリのアイコン。ホーム画面などに表示されるアイコンのことを指します。
png: アイコン画像としてよく使われる PNG 形式です。
ico: ICO 形式のファイル。favicon の標準ファイル形式として広く使われます。
svg: ベクター形式のアイコン。拡大時にも鮮明に表示できますが、apple-touch-icon には PNG が推奨されることが多いです。

apple-touch-icon-precomposedの関連用語

apple-touch-icon: iOSのホーム画面にサイトを追加したときに表示される専用アイコンを指定する link rel 属性のこと。
apple-touch-icon-precomposed: apple-touch-iconの旧式で、事前にデザインが施されたアイコンを使う場合に用いられる。iOSはこのアイコンをそのまま表示し、光沢や効果を自動適用しないという意味。現在は非推奨となることが多い。
apple-touch-icon.png: 一般的に使われるデフォルトのファイル名。リンクタグでこのファイルを指すことが多い。
sizes属性: apple-touch-iconに対して画像の大きさを指定する属性。デバイスごとに適切な解像度を選択できるようにする。
57x57アイコン: 初期のiPhone非Retina向けに推奨されたアイコンサイズ（57×57ピクセル）。
114x114アイコン: iPhone Retina向けに推奨されるアイコンサイズ（114×114ピクセル）。
72x72アイコン: iPad非Retina向けに推奨されるアイコンサイズ（72×72ピクセル）。
144x144アイコン: iPad Retina向けに推奨されるアイコンサイズ（144×144ピクセル）。
120x120アイコン: iPhone Retina系デバイスの追加サイズとして用意することがあるアイコンサイズ（120×120ピクセル）。
152x152アイコン: iPad用の高解像度アイコンの目安サイズ（152×152ピクセル）。
180x180アイコン: 新世代の高解像度デバイス向けに推奨されるアイコンサイズ（180×180ピクセル）。
Retinaディスプレイ対応: 高解像度(DPIが高いデバイス)向けに、より細かいピクセル密度のアイコンを用意すること。
非Retina: 古い低解像度デバイス向けのアイコンを用意する場合に使われる表現。
apple-mobile-web-app-capable: この設定を有効にすると、ホーム画面から開いたときにブラウザのUIを非表示にして、ネイティブアプリ風の表示に近づける。
apple-mobile-web-app-title: ホーム画面に保存したときに表示されるアプリ名を設定するメタタグ。
apple-mobile-web-app-status-bar-style: ホーム画面から起動したときのステータスバーの見た目を制御する設定（default / black / black-translucentなど）。
光沢効果（Gloss）: 従来のiOSデザインでアイコンに光沢を付ける演出。apple-touch-iconを使うと自動適用される場合があった。
プリコンポーズ: apple-touch-icon-precomposedの意味。光沢が既に組み込まれているアイコンを指す古い表現。