「apple-touch-icon.png」を設定して Web サイトをカスタマイズする iPhone ブックマーク FavIcon

目次:

Anonim

自分のウェブサイトを持っている場合、または他の誰かのためにウェブサイトを開発している場合は、ユーザーの iOS ホーム画面に表示される保存済みブックマーク アイコンをカスタマイズする必要があります。上のスクリーンショットでは、カスタム OSXDaily ファビコンが iPhone の画面に表示されています。

Apple タッチ アイコンを設定することは良い考えです。なぜなら、iOS はデフォルトでサイトの小さなサムネイルを保存するだけだからです。小さいサムネイルは見分けがつきにくく、見栄えがよくないことが多いため、代わりに独自のファビコン画像を設定しましょう。

ウェブサイトの Apple Touch アイコンをカスタマイズおよび設定する方法

  • アイコンを作成します。正方形であることを確認してください。OSXDaily.com のアイコンは 512×512 ピクセルですが、必要に応じて他の正方形サイズを選択することもできます。 Retinaディスプレイ
  • ホーム画面のアイコンを PNG ファイルとして保存し、ラベルを付けます: apple-touch-icon.png
  • apple-touch-icon.png を Web サーバーのルート ディレクトリにドロップして、domain.com/apple-touch-icon.png からアクセスできるようにします。
  • iOS の Safari からサイトにアクセスし、[ホーム画面に追加] をタップして、Web サイトのホーム画面のブックマーク アイコンをテストします
  • iOS デバイスのホーム画面を見ると、上のスクリーンショットのように、ブックマークが新しいカスタム アイコンとともにそこに保存されていることがわかります

.

参考までに、OSXDaily.com で使用するカスタム 'apple-touch-icon.png' 画像を以下に示します。この例のブックマーク アイコンは作成され、Retina ディスプレイに適したサイズになっています ():

実際のアイコン ファイルには光の屈折がアイコンに保存されていないことがわかります。iOS が独自に処理します。好きな画像を使用できますが、既存の iOS アイコンの使い慣れた UI をキャプチャしたものを作成することをお勧めします。

.

ところで、このようなことが気になる場合は、Photoshop を使用して少なくともアイコンをデザインしているのではないでしょうか?ぜひご覧ください。

「apple-touch-icon.png」を設定して Web サイトをカスタマイズする iPhone ブックマーク FavIcon