前の記事 ≪:1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」
次の記事 ≫:2009年12月9日 管理人のブックマーク

iPhoneブックマーク用のアイコンを作成しよう

2009年12月09日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

今更、かもしれませんが、iPhoneブックマーク用のアイコン作成法のエントリがあがっていたので参考にやってみました。iPhoneユーザ用のアクセシビリティ向上に使えます。
次のような 57x57 ピクセルのPNG画像を作ります。



作ったらサーバにアップロードします。
そして、HTMLタグを追記します。

アイコン画像を光らせたい場合
iPhoneにはボタンを立体的に光らせる機能がありますがこれを実装するためのHTMLです。
<link rel="apple-touch-icon" href="/path/to/icon.png" />

アイコン画像を光らせたくない場合
自分で光る部分もデザインしたいという場合は以下のコードが使えるみたい
<link rel="apple-touch-icon-precomposed" href="/path/to/icon.png" />

実際にコードを仕込んでからブックマークをしてみました。

safariでブックマーク用の「+」ボタンを押して「ホーム画面に追加」をタップ


アイコンが現れました。


以下のエントリを参考に実装しました。
Give Your Website a Custom iPhone Bookmark Icon | Build Internet!

関連の記事検索:iPhone, アイコン, favicon
スポンサード リンク

By.KJ : 2009年12月09日 19:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)