【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 6時間 ago
  • マシンガントークがさく裂していますね! #NHK #ひふみん
    about 1日 ago
  • Googleが「Android 2.1 Eclair」のサポートを終了へ - GIGAZINE https://t.co/hCRKKgUaMt ゼミで触っていたOSがサポート終了かぁ。 教授の退職と同じ年に去るとは。。。
    about 1日 ago

BGMにどうぞ

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

2 UNICORN -澤野弘之

↓の再生ボタンで再生できます
もっと楽曲を試聴したいなら
>>>こちら<<<
2017年6月
« 5月  
 123
45678910
11121314151617
18192021222324
252627282930 

アーカイブ

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

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