【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

  • 悲報:同僚に撮ってもらった写真、目閉じてるやつばかりでどれも使えそうにない、、、orz ん~、写真の撮り方をレクチャーしておけばよかったかなぁ。
    about 8時間 ago
  • 今日の打ち上げなう https://t.co/xiwzSG9ZWv
    about 12時間 ago
  • 仕事仲間に「打ち上げやらない?」って言われたよ! まさか彼の口からお誘いくれる日が来るとは思わなかったわ!
    about 13時間 ago

BGM

勇者シリーズ20周年記念 More BRAVEST
7 嵐の勇者(ヒーロー) -岡 柚瑠

↓の再生ボタンで再生できます
色々な楽曲を試聴したいなら
>>>こちら<<<

Nico Nico Community

Calendar

2019年2月
« 1月  
 12
3456789
10111213141516
17181920212223
2425262728 

Archive

↓↓Please support me!↓↓

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


テストウィジェット