Retina にも対応した iOS 用ブックマークアイコンの作り方

2012.07.24

 iOS 用ブックマークアイコンの作り方

とっても簡単に出来るので、ウエブサイトを持ってる人は是非作ってみてください。

まず、アイコン用の画像を用意します。
iOS 用ブックマークアイコン
用意するアイコンのサイズは512ピクセル×512ピクセル(上の画像は半分のサイズです)。せっかくなので微妙にリッチにしたアイコンを用意してみました。

 
iOS 用ブックマークアイコン
出来上がったらそのアイコン画像を「apple-touch-icon.png」として保存。FTPソフトなどでウエブサイトの一番上の階層に置けば完了です。
(このブログだと http://orangeorange.jp/apple-touch-icon.png となります)

 

iOS 用ブックマークアイコン
これでiPhoneやiPadでSafariを開いてホームに追加を押せば、先ほど作ったアイコンがホーム画面に追加されるようになりました。

 

iOS 用ブックマークアイコン
こんな風に並ぶとなんか嬉しいー。立体的にする影とかはiOS側でつけてくれるので、シンプルな画像でも素敵になりますよ。

関連してるかもしれない記事

Pocket