web-dev-qa-db-ja.com

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

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

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

    <link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" />

  • Webクリップアイコン ：Apple-touch-icon.pngまたはApple-touch-icon-precomposed.pngと呼ばれるpng形式のファイルをサイトのルートに配置し、 SafariのiPhone OS/iOSバージョンは、サイトがホーム画面に追加されたときにそれらを取得して保存します。次のようなコードで追加することもできます。

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

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

faviconicon
24
artlung

this および this に基づいて、が表示される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アップデート1＆Webkit 3.1。 Android開発者向けドキュメント は、Android.webkitが取得されたときのイベントであるApple-touch-iconのメソッドに言及しています。

8
artlung

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

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

1
fwaechter