web-dev-qa-db-ja.com

ウェブサイトの画面のショートカットアイコンを定義するにはどうすればよいですか？

ウェブサイトのショートカットにAndroidカスタムアイコン（iOSが使用するファビコンやアプリタッチ画像など）を使用する方法が見つかりません。

ヒントを教えていただけますか？

androidiconsdesktop-shortcut
15
Toni Michel Caubet

Androidは、ホーム画面の画像と「ショートカットアイコン」（ファビコンなど）を使用します。ホーム画面のアイコンのみを指定した場合、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"/>

ホーム画面アイコンの使用の詳細については...

http://developer.Apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfigureWebApplications/ConfigureWebApplications.html

7
Carter Medlin

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つにはスペースがないことです。一番下のものは、間にスペースを置いて両方を含みます。スペースはiOS4.2以降では認識されません。最善の策は、3つすべてを使用することです。スペースに限りがある場合は、上位2つのみを使用してください。

サイズの場合：

iPadRetinaディスプレイの場合は144×144ピクセル。

iPhoneRetinaディスプレイの場合は114×114ピクセル。

その他のほとんどすべての57×57ピクセル

注意すべき点の1つ iOS 4.2以降ではサイズ属性が無視されるため、サイズ属性なしでリンクすることができます。整理のために、アイコンのファイル名にサイズを含めることをお勧めします。

もう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
7
Tgwizman

これは良い説明のように見えます 。

次のように配置すると表示されます。

<link rel="Apple-touch-icon" href="/path/to/some.png"/>
<link rel="Apple-touch-icon-precomposed" href="/custom_icon.png"/>

ブックマークされたページのHTMLでは、デスクトップに自動的に表示されます。

0
Ken Y-N

この 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"/>
0
alex