スマートフォン用のショートカット(ブックマーク)アイコンの設置
iPhoneやAndroidのホーム画面に表示するアイコンの設定方法です。
iPhoneやAndroid等のスマートフォンで、ウェブサイトをブックマークする際に「ホーム画面に追加する」旨の項を選択してホーム画面に追加したことはありますか？
通常であればiOSなら画面のキャプチャ、Android系ならフラッグっぽい栞？にFaviconがくっついたヤツでホーム画面に表示されるのですが、設定により任意のアイコンに変更することが出来ます。
「ウェブクリップアイコン」と呼ばれるこのアイコン、簡単な画像加工と短いソースで実現できる(それもiOSとAndroid共通で)ので、やり方を紹介したいと思います。
①画像を用意する。
iOSで言うと端末によって54px〜144pxで表示されているようですので、将来を見越して250pxくらいの大きさで作っておきましょう。大きくても勝手に適切なサイズに加工されます。
加工といえば、iOSでは、カッコいい光沢とか角丸も勝手に加工されるので、フラットな板状のデザインが用意できれば良いです。（Androidは角を落としてそのまま表示されます）
②適宜サーバにアップする。 あとで③の項で場所を指示しますのでどこでも良いです。
③ヘッダ部にアイコン指定の記述をする。
④iPhoneやAndroid等のスマートフォンでサイトにアクセスして、ホーム画面に追加する。
⑤完了！
アイコンの光沢を無くするとかオプションもありますが、簡単な表示方法ってことでこんなところで今日はおしまい。