ファビコン、アイコン、ショートカットアイコン、apple-touch-icon:他に何かありますか?


24

私は、Webサイトの2つの基本的な種類のデフォルトWebアイコンを知っています。

  • Favicon.ico指定したサイトのルートにフォーマット済みファイルを配置するfavicon.icoと、ほとんどのデスクトップブラウザーがそれを見つけて、さまざまなコンテキスト(ブックマーク、タブ)で表示します。コードに追加することもできます。これにより、他の名前や他のグラフィックタイプをファイルに指定できますが、ブラウザにはタイプとサイズの制限があります

    <link rel="shortcut icon" href="/webmasters//favicon.ico" />
    <link rel="icon" href="/webmasters//favicon.ico" />
    
  • Webクリップアイコン:サイトのルートまたはルートにpngフォーマット済みファイルを配置すると、SafariのiPhone OS / iOSバージョンがそれらを選択し、サイトがホーム画面に追加されたときにそれらを保存します。次のようなコードでも追加できます。apple-touch-icon.pngapple-touch-icon-precomposed.png

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

ウェブマスターが含めることができるウェブサイトの他のデフォルトアイコングラフィックはありますか?

回答:


8

これは、表示されたに基づいて、この、この Androidが使用することrelの種類apple-touch-icon-precomposedやをapple-touch-iconしかしそれが機能するためには、あなたが完全修飾URLを使用する必要があること、例えば:

<link rel="apple-touch-icon-precomposed"
      href="http://www.example.com/custom_icon.png" />

または:

<link rel="apple-touch-icon"
      href="http://www.example.com/custom_icon.png" />

警告は、これはAndroid 2.1 update 1およびWebkit 3.1のようです。アンドロイドの開発者向けドキュメントは、方法に言及しandroid.webkitたときには、イベントでapple-touch-icon取得されます。


1

これは、ターゲットとするプラットフォームによって異なります。しかし、ほとんどの-標準互換-モバイルブラウザはデフォルトのファビコンタグを理解しています。Android、iOS、WebOSなどのプラットフォームで特別なユースケースを検索(たとえば、特別なアイコンを使用してデスクトップショートカットを作成)できる場合があります。

iPhoneユーザーをターゲットにしたいくつかのWebサイトを開発したばかりで、このサイトではWordPressとWPTouchテーマの特殊バージョンを使用しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.