【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タグは利用できません


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

本鯖運営維持のため、上記リンクから注文してもらえると助かります~

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

  • 今日は食あたりでダウン 医師と話したところ、昨日食べたお刺身が怪しそう 皆さんも生物の食事にはご注意ください
    about 3日 ago
  • 仙 人╔╗  天使╠╣  妖精╠╣  聖者╠╣  賢者╠╣  健全╠╣ ══════ スケベ╠╣⇦Mask_Siva  変態╠╣ ド変態╠╣   獣╠╣  性獣╠╣ 変態王╚╝ #スケベ度ランク https://t.co/NwzHF2421k 彼らには勝てないか。。。
    about 3日 ago
  • 今日学んだことは、ヤフオクAPIはGET/POST共に対応だけど、ヤフーショッピングAPIはGETのみ。 しかも、同じ意味なんだけど、パラメータ名がバラバラだったり、リストの考え方も違っているので、こういった類似APIでは統一性が求められるなと感じましたね。
    about 3日 ago

BGMにどうぞ

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

2 UNICORN -澤野弘之

↓の再生ボタンで再生できます
もっと楽曲を試聴したいなら
>>>こちら<<<
2017年7月
« 6月  
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アーカイブ

↓応援おねがいします!↓

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