「apple-touch-icon.png」を設定して、ウェブサイトのiPhoneブックマークのお気に入りアイコンをカスタマイズする
ご自身のウェブサイトをお持ちの方、あるいは他社のウェブサイトを開発中の方であれば、iOSのホーム画面に表示される保存済みブックマークアイコンをカスタマイズすることをお勧めします。上のスクリーンショットでは、iPhoneの画面にOSXDailyのカスタムファビコンが表示されています。
iOSのデフォルトでは、サイトの小さなサムネイルが保存されるだけなので、Apple Touch Iconを設定することをお勧めします。小さなサムネイルは見分けにくく、見た目もあまり良くないので、代わりに独自のファビコン画像を設定することをお勧めします。
ウェブサイト用のApple Touchアイコンをカスタマイズして設定する方法
- アイコンを作成し、正方形であることを確認してください。OSXDaily.com にあるアイコンは 512×512 ピクセルですが、必要に応じて他の正方形のサイズを選択することもできます。Retina ディスプレイでは、より大きなサイズが適切です。
- ホーム画面のアイコンをPNGファイルとして保存し、ラベルを「apple-touch-icon.png」にします。
- apple-touch-icon.png をルート ウェブサーバーのディレクトリにドロップし、domain.com/apple-touch-icon.png でアクセスできるようにします。
- iOSのSafariからサイトにアクセスし、「ホーム画面に追加」をタップして、ウェブサイトのホーム画面のブックマークアイコンをテストします。
- iOSデバイスのホーム画面を見ると、上のスクリーンショットのように、新しいカスタムアイコンで保存されたブックマークが表示されます。
ファイルに適切な名前が付けられ、Web サーバーのルート ディレクトリにある限り、Mobile Safari はそれをどう処理すればよいかを認識するため、iOS 固有のファビコンを表示するためにさらに調整する必要はありません。
参考までに、OSXDaily.com で使用しているカスタムの「apple-touch-icon.png」画像を以下に示します。このブックマーク アイコンの例は、Retina ディスプレイに合わせて作成され、適切なサイズに設定されています (Retina ブックマーク アイコンの作成の詳細については、こちらを参照してください)。
実際のアイコンファイルには光の屈折が保存されていないことにお気づきでしょう。これはiOSが独自に処理します。好きな画像を使用できますが、既存のiOSアイコンの馴染みのあるUIを捉えた画像を作成することをお勧めします。
これは明らかに専用の iOS アプリを持つことと同じではありませんが、Web からの適切なモバイル ユーザー エクスペリエンスは良いアイデアであり、iOS アプリの開発にかかる高額なコストを回避できます。
ところで、こういうことが気になるなら、アイコンのデザインくらいはPhotoshopでやってるんじゃないでしょうか？ついでにPhotoshopを高速化するヒントもチェックしてみてください。
