【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 12時間 ago
    • ダメだ、、、 母様頭働いていない、、、 とりあえず来週末に叔母の一人が私と交代でそばにいてくれるから、それまでに計算できるところはやってあげないと、、、
      about 12時間 ago
    • そして次に話を進めているiPhone13 Pro MAXですが、256GBモデルの購入、法人向けSIM契約で落ち着きそう。 こっちは特許出せるかもな自社製アプリ開発で使います。 既存特許はなかったので、特許性について一度弁理士の… https://t.co/W4IwL3erHN
      about 14時間 ago

    BGM

    イグジスト (アニメ盤) - EP
    1 イグジスト -angela

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

    Nico Nico Community

    Calendar

    2021年10月
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31 

    Archive

    My WIsh List

    Amazonで気になっている物をまとめています。

    「これは良かった!」「こっちの方がいいよ!」というものがあれば、教えてください<(_ _)>

    https://amzn.to/3oof0rZ