なんだかややこしいタイトルですね。
iPhoneでページの確認を頻繁にするので簡単にサイトへ飛べるようにホーム画面にsafariのショートカットを置く方法は前回書きました。
【過去記事：IPHONEのホーム画面にCHROMEのブックマークのショートカットを作成したい。はこちら】
そのショートカット、何も設定しないと見たページのキャッシュが残りその部分がアイコン内部へ表示されるようになります。見栄えもよくないので、自分の好きなアイコンに設定しましょう。
まずはアイコン画像を作成！
アイコンサイズですが、いろいろと調べる前に私は150px×150pxで作成しました。この大きさで問題無く表示もされました。問題は無さそうですが、作成した後に調べると下記のサイズがApple公式としてアナウンスしているサイズでした。
現在の推奨サイズ
iPhone X, iPhone 8 Plus, iPhone 7 Plus, and iPhone 6s Plus ・・・ 300px×300px
All other high-resolution iOS devices ・・・ 200px×200px
一番大きいサイズで作成しておくと小さいサイズのものは勝手に合わせてくれるので、300×300pxで作成しましょう。必ず正方形になるように作成しましょう。
Apple公式(Apple developer)の説明はこちら（英語）
アイコン作成はフリーのオンライン画像編集ソフトpixlrなどで作成するのが良いでしょう。
画像の名前は？
これが重要です。画像が出来たら画像の名前を「apple-touch-icon.png」にしてください。 私は最初自分の好きな名前にしていたら上手くいきませんでした。
画像が出来たらサーバへアップ！
アイコン画像を作成して、名前を「apple-touch-icon.png」にしたらサーバへアップしましょう。 ここでも注意が必要です。メインのindexページと同じ階層に画像ファイルを置くのが重要です。
私はここでも引っかかりまして、imagesというフォルダを作成してそこへ画像類をまとめて入れていたのですがそこに入れたままだと上手くいきませんでした。
HTMLソースのどこに何を書くの？
画像をアップしたら、HTMLのソースにも記述が必要です。場所は<head>の下へ入れます。<title>とか<meta>とかを記述しているところへ下記のように入れましょう。
【記述の例】
<link rel=”apple-touch-icon” href=”https://あなたのサイト名/apple-touch-icon.png”>
【当サイト「DIGITAL ZAKKER」 の場合】
<link rel=”apple-touch-icon” href=”https://digitalzakker.com/apple-touch-icon.png”>
このように記述します。
※https化していなくてhttpのままの方はhttpと記述してください。
記述が完了したら、indexファイルをサーバへあげましょう。これで完了です。 safariでサイトを開き「ホーム画面に追加」を押すと設定したアイコン画像が出てきますね。
アイコン画像を上書きすると次にアクセスした時に勝手に画像も変わるので便利です。
※記事執筆時：iPhone7のiOS10で検証しております。
