2020.10.22
373
こんにちは！サリーです。
昔は、設定していたら「あらオシャレ」くらいの感覚だったfaviconも、近頃はすっかり必須項目となってまいりました。
▲ちなみにLIGのfaviconはこんな感じ
その一方で、最近ではスマホ用の「ウェブクリップアイコン」というものがあります。
これがちゃんと設定してあると「おっ」て思います。とっても簡単なので設定してみましょう。
ウェブクリップアイコンって？
スマホではホーム画面にブックマークのアイコン（タップでブラウザが立ち上がり任意のサイトが開くアイコン）を置くことを、「ウェブクリップ」と呼びます。
そのときホーム画面で使用されるアイコンの事をそのまんま「ウェブクリップアイコン」と呼ぶのですね。
ウェブクリップアイコンをホーム画面に設置する方法
iPhoneなどの場合
iPhone/iPod touch/iPadでは、Safariでサイトを開き、下部中央の共有ボタンを押して「ホーム画面に追加」を選びます。
▲ホーム画面に追加を押す
Androidの場合
Androidでは、ブラウザでサイトをブックマークしてから、ホーム画面の何もないところを長押しすると「ホーム画面に追加」というメニューが出るので「ショートカット」⇒「ブックマーク」で任意のサイトを選びます。
ウェブクリップアイコンの作成について
デフォルトでは、表示しているページのスクリーンショットがそのまま縮小されてアイコンとして使用されます。
▲LIGのサイトはデフォルトだとこうなります
せっかくなので、これをオリジナルの画像に設定してみましょう。
表示されるアイコンのサイズはデバイスによってさまざまです。
| iPhone | 114×114(57×57) |
| iPod touch | 114×114(57×57) |
| iPad | 144×144(72×72) |
※カッコ書きはRetina非対応の旧サイズの場合
大きめのサイズで作っておけば、それが縮小されて使われるので、144×144以上の正方形で作っておけば問題ないです。
フォーマットはPNG形式にします。
▲LIGサイト用にこんな画像を用意。サイズは144×144
ウェブクリップアイコンの設定方法
ウェブクリップアイコンは、光沢のアリ・ナシを選ぶ事が出来ます（Androidは非対応）。
アイコンの画像ファイルに任意のファイル名をつけて任意の場所にアップ後、headに次の一行を追加します。
（「サイトのURL」「webclip.png」は任意のものに書き換えて下さい）
光沢アリ
<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />光沢ナシ
<link rel="apple-touch-icon-precomposed" href="http://サイトのURL/webclip.png" />Androidに対応させなくていいならもっと簡単です。
rootディレクトリに
光沢アリの場合「apple-touch-icon.png」
光沢ナシの場合「apple-touch-icon-precomposed.png」
という名前でアップしておけば、勝手に拾って使ってくれます。
iPhone/iPod touch/iPadだけならこれでOK。
▲設定後のアイコン。左が光沢アリ、右が光沢ナシ
以上で設定完了です！
サイトのスマホ対策として覚えておきたいですね。