【HTML】iOS向けのアイコンの指定の仕方


先日、うちのサイトをよく訪ねてくれる方からこんな要請がありました。

「iPhoneのホーム画面にブックマークしてるんだけど、アイコンを表示する仕組みにしてほしい」

うちのWebサイトのアイコン(ロゴ)は構想だけはあったんですが、私の技量が追いつかず、作成できていなかったんですよね。

で、iPhoneのホーム画面にも出せるようになったので、そのメモです。

まず、アイコン用の画像ファイルを用意します。
私はPNG形式をお勧めします。

最近の端末であれば対応しているものが多く、可逆圧縮形式なのでJPEGのように歪みが生じないためです。
少し前のIEだと対応しないものもありましたが最近のIEではPNGもファイビコン(Webページのアイコン)として認識してくれます。

サイズはiPhoneの場合、57*57が良いらしいですが、私は既存の48*48の画像を使っています。

で、最初はWebページの一般的なファビコンの指定の仕方。

<link rel="shortcut icon" href="画像ファイルパス" type="image/png" />

 

最初はこの指定だけで行けるかなぁと思ったんですが、iOS端末はNGでした。

調べてみると専用のタグ指定方法があることが分かりました。
以下のタグを使うとホーム画面に表示する画像を指定できます。

<link rel="apple-touch-icon" href="画像ファイルパス" />

ちなみに、角を丸める処理はiOS側で勝手にやってくれるので、用意するのは一般的な正方形の画像でOKです。

これでうちのサイトのロゴも表示できるようになりました。
明日、要望を出してくれたユーザーに回答しようと思います♪


Mask_Siva

北の試される大地に生息しているSEです。
楽しみながらプログラムを作ったり、ゲームで遊んだりしています。

コメントをお待ちしております

HTMLタグは利用できません

Advertising



新品/中古ゲーム販売 通販ショップの駿河屋

Twitter

仮面被り過ぎ@コンプレックス大佐
@Mask_Siva

  • 定期通院で病院行ってきた。 フラッシュバックは突然起こるものだから対処療法しかないってさ。前にも言われたけど。 でも、なかなか普通の人には辛さが伝わらないから、分かってくれる人に話を聞いてもらえると幾分か気持ちが楽になる。
    about 22時間 ago
  • またフラッシュバックで沈んでしまった、、、 今回のトリガーは叔母だな。 幸い、今日は定期通院日だから、確実に主治医と相談できる。
    about 1日 ago
  • 第4次がトロフィー付きで出直さないかなぁ~ 速攻で買うけどね!
    about 2日 ago

BGM

機動戦士ガンダムUC オリジナルサウンドトラック

2 UNICORN -澤野弘之

↓の再生ボタンで再生できます

色々な楽曲を試聴したいなら
>>>こちら<<<

Nico Nico Community

Calendar

2017年10月
« 9月  
1234567
891011121314
15161718192021
22232425262728
293031 

Archive

↓↓Please support me!↓↓

ブログランキング・にほんブログ村へ