Web 開発者と Web サイト所有者は注意してください: Retina 対応の iOS ブックマーク アイコンを設定する必要があります。 ブックマーク アイコンは Apple タッチ アイコンと呼ばれます これらのカスタム イメージは、iPad で Web サイトをブックマークするときにユーザーのホーム画面に表示されるアイコンになります。 iPhone、iOS の iPod touch、または OS X の Safari のブックマーク パネル。カスタムの Apple-touch-icon ファイル セットがないと、ユーザーは Web ページ自体のサムネイルが退屈で見苦しくなります。また、Retina 対応のアイコンを使用しないと、新しい iPad の画面ではブックマーク アイコンがピクセル化され、全体的に見栄えが悪くなります。

いくつかの簡単な手順で、あらゆる Web サイトに最適な Retina 対応の Apple Touch アイコンを作成するために必要なことは次のとおりです。

1) Retina 対応の iOS ウェブサイト アイコンを作成する

テンプレートを使用するか、独自のデザインを作成してください。以前の投稿で説明した簡単な DIY Retina アイコン キットを使用しました。これは、見栄えの良い iOS アイコンを 1、2 回クリックするだけで簡単にデザインできる PSD ファイルです。ウェブサイトや会社のロゴを貼り付ければ、準備完了です。 PSD ファイルを編集するものがない場合は、Photoshop CS6 ベータ版が優れており、年内に最終バージョンがリリースされるまで無料でダウンロードして使用できます。

2) PNG として保存し、Retina Web サイトのブックマーク アイコンに名前を付けます

アイコンは PNG でなければならず、2 つのいずれかの名前を付ける必要があります。各ファイル名は、ユーザーのホーム画面に表示されるアイコンの外観がわずかに異なります:

• 「apple-touch-icon.png」は、アイコンにハイライト バブル オーバーレイを追加します
• “apple-touch-icon-precomposed.png" は、ハイライト オーバーレイなしで、最初に作成されたアイコンを表示します

後者の -precomposed オプションを使用するのは、独自のハイライトを作成した場合、または Apple のデフォルト アイコンのほとんどに表示されるどこにでもあるバブルをなくしてアイコンをよりフラットに表示したい場合です。

3) Web サイトのブックマーク タッチ アイコンをベース Web ディレクトリにアップロードする

SFTP クライアント (OS X には Finder に FTP が含まれており、Cyber​​Duck または Filezilla は無料です) を使用して、apple-touch-icon.png ファイルをルート Web ディレクトリにコピーします。これは通常、サイトのメイン インデックス ファイルがある場所と同じ場所です。アップロードしたら、Web ブラウザーを開いて「http://SITEURL.com/apple-touch-icon.png」にアクセスし、読み込まれることを確認して、適切な場所にあることを確認します。

OSXDaily.com の 512×512 Retina 対応ブックマーク アイコンの例:

-precomposed フラグがない場合、上記のアイコンはハイライト バブルを表示することに注意してください。実際のアイコンとブックマークとしてスクリーンショットに表示されているアイコンを比較すると、両者の違いがわかります。

4) iOS デバイスを使用してサイトをブックマークする

これが最も簡単な部分です。iOS デバイス (Retina アスペクトを確認するために iPad 3 が望ましい) をつかみ、Safari を開きます。アイコンをアップロードした Web サイトを更新し、矢印アイコンをタップして [ホーム画面に追加] を選択し、ブックマークに名前を付けてから、ホーム画面に戻ってそこにあることを確認します。

512 x 512 ピクセルであるにもかかわらず、Retina アイコンは古い iPhone や非 Retina デバイスではうまく縮小されます。必要に応じて、CSS と HTML を使用してさまざまなデバイスにさまざまなサイズのアイコンを表示できますが、実際には必要ありません。

Retina ディスプレイを搭載した iPad であなたの Web サイトをブックマークすると、ホーム画面で見栄えが良くなります。本当にそれだけです。はい、Apple タッチ アイコンについては以前にも書いたことがありますが、iPad 3 ではアイコンとグラフィックスの解像度が大幅に高くなったため、もう一度言及する価値があります。