【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

  • 昨日地震の話ししていたら、本当に地震きたよ。 2、3日で大きいのくるって言ってたのきちゃったじゃないですか! 21号さんは預言者だ。
    about 5時間 ago
  • パームレストと9セルバッテリー、SSD(SATA+mSATA)、メモリ8GB *2 が必要だな。 パームレスト部が破損している以外は非常に状態の良いX220をGETしました。 型は古いけど、手直ししてメインノートとして使っていきます。
    about 12時間 ago
  • ディジェSE-Rが好きとはかなり通ですな。
    about 17時間 ago

BGM

デジモンオープニングベストスピリット
1 Butter-Fly -和田光司

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

Nico Nico Community

Calendar

2018年6月
« 5月  
 12
3456789
10111213141516
17181920212223
24252627282930

Archive

↓↓Please support me!↓↓

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


テストウィジェット