ここ数年で圧倒的にユーザー数が増加したスマートフォン。僕も最初は「いやいや、別にガラケーでいいやん」というスタンスだったんですが、周囲の人のガラケー率の増加に伴いガラケーからiphoneに変えました。今はお金出してアプリを買いまくるという、りっぱな信者に成長しました。今回はそんなスマホのホーム画面にサイトオリジナルのブックマークアイコンを表示させようとういお話です。
これまでに、web制作をしたことがある方は「ああ、ファビコンでしょ??」ってなると思います。僕も調べるまでは「あれは多分ファビコンじゃない??」って感じでした。・・・が、いくらファビコンを設定しても出ない出ない(笑)。
ネットで調べるとすぐに解決策が判明、なんとファビコンじゃーないっっっ!!という落ちでした。前置きはこのくらいにしてさっそく作成していきましょう。
表示させるアイコンを作る!!
なにはともあれ、表示させるものを作らなければ話が進まないのでどのグラフィックソフトでも構わないです。(ｊｐｇ、gif、png、bmpの形式で保存出来れば)僕はフォトショップでやりました。
114px×114pxのカンバスで作成してください。正方形であればこのサイズより大きくても構わないらしいのですが、「114×114」が既定サイズらしいのでこのサイズで作成することを推奨します。そしてiphoneの場合(というか、Android持ってないのでAndroidがどうなのかわかりません・・・。ごめんなさい。)角丸にしなくちゃいけないんじゃないの!?って思うかもしれませんが、勝手に角丸に切り抜かれます。なので心配ご無用です。ってか角丸にしかならないんですよねー(笑)。
保存形式はｊｐｇ、gif、png、bmpのどれでもいいらしいんですが一番きれいなんで「png」で保存しましょう。
HTMLマークアップ
<head>内に下記のソースコードを追加してください。
<link rel="apple-touch-icon" href="画像パス" />
ちなみに
<link rel="apple-touch-icon-precomposed" href="画像パス" />
にするとiphoneの「キラリン☆」って感じのグラデーションを外せます。
ファイルのアップ
このホーム画面用アイコンは別にどこに配置して貰っても構わないので適宜自分のサイトの適当なところにアイコンをUPしてください。もちろんHTMLもちゃんとUPしてくださいね。
