2015-11-10 8 views
11

デフォルトのグレーのSafariアイコン/プレースホルダではなく、iOS Safari推奨ウェブサイトセクションにサイトアイコンを表示する方法を理解しようとしています。他のサイトもこれを行うことができますが、私はどのように把握できません。私はそれがfavicon.icoまたはapple-touch-icon.pngファイルに関連していると仮定しましたが、私は使用されているものや自分のサイトでうまく動作するようにする方法を確かめることができませんでした。例えばIOS Safariの推奨ウェブサイトリストに表示されるアイコンを取得する方法

、私は私のSafariのキャッシュや履歴をクリア、オープンサファリ、および「arstechnica」を入力し始める、私はこれを取得:私は「アメリカン・エキスプレス」を入力

arstechnica screengrab

同じ考え:

american express screen grab

そして、 "CNN":

cnn screen grab

しかし、私は、このような「ウェルズ・ファーゴ」などの他のサイトを、しようとしたとき、私は(だけでなく、私のサイトのために何が起こっているかである)プレースホルダを取得:

wells fargo screen grab

マイapple-touch-icon.pngがでませんでした私はそれを移動しましたが、それは何の違いもないようです。

これらのサイトの一部を調査したところ、使用されているファイルfavicon.icoまたはapple-touch-icon.pngのように見えません。 arstechnicaはファイルを持っていましたが(cdnリダイレクトを介して)、それは推奨サイトで使用されているのと同じイメージではありません。一致したように見えるfavicon.icoがありましたが、americanexpress favicon.icoは[推奨サイト]アイコンと一致しませんでした。 linkタグの各HTMLファイルを調べると、結果も不確定な結果になりました。

おすすめのサイトのアイコンにはどのような画像ファイルが使用されているのか、どのようにして自分のウェブサイトに表示することができますか?

答えて

5

ウェブサイトのルートフォルダに - > home_badge_64.pngというファイルを置く必要があると思います。

これはあなたの頭のタグに行くだろう:

<link href="/home_badge_64.png" rel="apple-touch-icon" /> 

私は今仕事に取得しようとしている実際の生活の例として - >http://www.sisltd.ca/home_badge_64.png

0

アイコンがから取られているようですOpenGraph og:imageメタタグ。私はちょうど私のウェブサイトに入れて、そのタグの値を変更すると、提案されたウェブサイトのアイテムに表示されるアイコンが変更されました。

<meta property="og:image" content="link_to_your_icon.ext" /> 

私も他のすべてのOpenGraphタグを持っていたので、それだけでメタタグが動作したり、他のすべてを必要とする場合、私はテストしていません。

関連する問題