今まで、Apple Touch アイコンの行を次のように頭に入れてきました。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
ただし、Q&A の「apple-touch-icon の正しいピクセル寸法は?」Appleのガイドラインに従って、現在3つの画像が必要であることが受け入れられた回答に記載されています。
では、これらをコードの head セクションに挿入するにはどうすればよいでしょうか。
108873 次
8 に答える
71
ほら、これがお役に立てば幸いです。
Apple に美的処理をしてもらいたい (光沢を追加する) 場合は、これらを<head>タグに追加します。
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
Appleが光沢なしで画像を表示するように画像を事前に構成したい場合は、次のようにします。
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
複数のイメージを含めると、iOS デバイスは正しいサイズを探して、そのイメージを自動的に利用します。例の画像の名前からわかるように、Retina ディスプレイを搭載した iPad には 144x144px のアイコンが必要であり、iPhone 4/4S/5 には 114x114px のアイコンが必要です。 72x72px のアイコンが必要で、元の iPhone ではサイズの指定は必要ありませんが、参考までに 57x57px です。
于 2011-04-12T12:16:32.237 に答える
16
これらの回答のいくつかはすでに古くなっているため、http://realfavicongenerator.net/を使用してすべての画像とマークアップを生成することをお勧めします。 iOS、Android、および Windows で現在有効なものについては最新であるため、その必要はありません。
于 2015-06-24T10:58:22.407 に答える
6
Web クリップの Web ページ アイコンを指定する
ユーザーが Web アプリケーションまたは Web ページのリンクをホーム画面に追加できるようにしたい場合があります。アイコンで表されるこれらのリンクは、Web クリップと呼ばれます。iOS で Web アプリケーションまたは Web ページを表すアイコンを指定するには、次の簡単な手順に従います。
Web サイト全体 (Web サイトのすべてのページ) のアイコンを指定するには、apple-touch-icon.png というルート ドキュメント フォルダーに PNG 形式のアイコン ファイルを配置します。
単一の Web ページのアイコンを指定するか、Web サイトのアイコンを Web ページ固有のアイコンに置き換えるには、次のように link 要素を Web ページに追加します。
<link rel="apple-touch-icon" href="/custom_icon.png">
上記の例では、custom_icon.png をアイコン ファイル名に置き換えます。さまざまなデバイスの解像度に対して複数のアイコンを指定するには (たとえば、iPhone と iPad の両方のデバイスをサポートする)、次のように各リンク要素にサイズ属性を追加します。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
デバイスに最適なサイズのアイコンが使用されます。サイズ属性が設定されていない場合、要素のサイズはデフォルトで 60 x 60 になります。デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きい最小のアイコンが使用されます。推奨サイズより大きいアイコンがない場合は、最大のアイコンが使用されます。
link 要素を使用してアイコンが指定されていない場合、web サイトのルート ディレクトリで、apple-touch-icon... プレフィックスが付いたアイコンが検索されます。たとえば、デバイスの適切なアイコン サイズが 60 x 60 の場合、システムは次の順序でファイル名を検索します。
apple-touch-icon-76x76.png
apple-touch-icon.png
Web ページのアイコン メトリックについては、アイコンと画像のサイズを参照してください。
注: iOS 7 の Safari では、アイコンに効果が追加されません。古いバージョンの Safari では、-precomposed.png サフィックスで名前が付けられたアイコン ファイルの効果は追加されません。詳細については、「最初のステップ: iTunes Connect でアプリを識別する」を参照してください。
于 2015-05-10T14:57:58.653 に答える