【iOS】ホーム画面に追加したときのアイコンのサイズとそれを表示させる方法

【iOS】ホーム画面に追加したときのアイコンのサイズとそれを表示させる方法

ホーム画面に追加したときに表示されるアイコンのサイズがiOS 7以降変わったんですが、どうもiOS 6以前のサイズの残像で144×144ピクセルのサイズを用意しそうになってしまいます。

忘備録がてら用意する画像のサイズと、表示させるために必要なソースコードなどを書き記しておきます。

用意するサイズは152×152ピクセル

デバイスごとのサイズは以下の通りです。一番大きいサイズの「152×152ピクセル」で書き出せばおっけー。

[ iOS7〜]apple-touch-icon(Webクリップアイコン)のサイズ – 別冊webメモ

iPhone / iPod touch

120×120ピクセル (Retina)
60×60ピクセル (標準解像度)

iPad

152×152ピクセル (Retina)
76×76ピクセル (標準解像度)

必要なことなど

画像の名前

画像は「apple-touch-icon.png」という名前にする必要があるみたいなんですけど、それ以外の名前でも表示されてるサイトがありますので、任意の名前で大丈夫そうです。

もし表示されなかったら一度名前を疑ってみて、この名前をつけてお好きな場所にアップロードしてください。

アップロードする場所はたぶんどこでも大丈夫だと思います。試してないけど。

表示させるためのソースコード

画像をどこかにアップして、下記のソースをheadタグ内に記述するだけでおっけーです。

<link rel="apple-touch-icon" href="画像のパス">

表示名を変えたい場合

表示させる名前を変えたい場合はこちらでできるようです。僕は使ったことないけど。

アイコンの角丸の大きさ

アプリと同じでこの手のアイコンを作るときは一応1024×1024ピクセルで作るようにしてます。

その際は角丸の大きさが「225ピクセル」です。

もちろん自動で切り取られる部分なので意識せず作ってもおっけーです。

最後に

という記事を書いておきながら、この記事執筆時には当ブログのホームアイコンは設定されておりません。

近々設定しますのでお待ちください。

キーワード
WEBデザイン