Android でカスタム アイコン (iOS が使用するファビコンやアプリ タッチ イメージなど) を Web サイトのショートカットとして使用する方法が見つかりません。
ヒントを教えてください。
質問する
26623 次
4 に答える
8
Android は、ホーム画面の画像と「ショートカット アイコン」(ファビコンなど) を使用します。ホーム画面のアイコンのみを指定すると、Web ページは Web ブラウザーの URL の横にアイコンを表示しません。
「ショートカット アイコン」は、同じファイルでもかまいませんが、個別にリストする必要があります。
<link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />
相対 URL は多くのデバイスで機能しますが、ほとんどのソースは、絶対 URL を使用する必要があると述べています。
サイズを個別にリストすることで、デバイスはニーズを満たす最小のイメージのみをダウンロードできます。「shortcut icon」については、異なるサイズをリストすることはできませんが、ファイルにエンコードされた複数のサイズを含む可能性がある ICO ファイルを使用できます。GIMPなどの多くの画像プログラムは、ICO ファイルを複数のサイズで保存できます。
ショートカット アイコンを IE で表示する場合は、実際の ico ファイルである必要があります。
どうやら、Android バージョン 2.1 以前は「事前構成された」画像リンクのみを認識しますが、事前構成されたアイコンを含めると、アイコンを「ファンシー化」できるすべてのデバイスはそのプロセスをスキップし、事前構成されたものだけを使用します。私がテストした Android は、独自のファンシー化を行うことができるため、作成済みのアイコン リンクは使用しません。互換性のニーズによって異なります。
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
ホーム画面のアイコンの使用に関する詳細については...
于 2013-02-21T19:52:50.880 に答える
7
Android と iOS は、ホーム画面のアイコンに同じ参照を使用しているようです。
HTML リンク アイコンの場合:
<!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">
2 つのタイプの違いは、上の 2 つはスペースがないことです。一番下にはスペースを挟んで両方が含まれています。スペースは iOS 4.2 以降では認識されません。あなたの最善の策は、3 つすべてを使用することです。スペースが限られている場合は、上の 2 つだけを使用してください。
サイズ:
iPad Retina ディスプレイの場合は 144 × 144 ピクセル。
iPhone Retina ディスプレイの場合は 114 × 114 ピクセル。
57 × 57 ピクセル (その他のほとんどの場合)
注意すべきことの 1 つは、iOS 4.2 以降では size 属性が単純に無視されるため、サイズ属性を指定せずにリンクできることです。整理のために、アイコンのファイル名にサイズを入れることをお勧めします。
注意すべきもう 1 つの点は、「apple-touch-icon」のリンクを含める必要さえないことです。html にアイコンが定義されていない場合、iOS はルート フォルダーから次の名前のファイルを順番に検索します。Androidではそれらを定義する必要があるため、とにかくコードに入れます。
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
于 2012-08-12T23:17:46.113 に答える
0
次のように配置すると表示されます。
<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
ブックマークされたページのHTMLでは、デスクトップに自動的に表示されます。
于 2012-08-06T03:15:38.643 に答える
0
このAndroid と iPhone のアイコンページでは、Android の絶対 URLを提案しています。
KenY-N のタグを次のように修正するだけです。
<link rel="apple-touch-icon" href="http://yourdomain.com/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
于 2012-08-12T17:14:16.647 に答える