web-dev-qa-db-ja.com

ファビコン-ベストプラクティス

私は、Favicons、Touchアイコン、そして今やTileアイコンにも必要なこれらのさまざまなサイズとフォーマットをすべて頭に入れようとしています。

私はこの投稿を読んだことがあります： http://www.jonathantneal.com/blog/understand-the-favicon すべてのデバイスとブラウザー> = IE8。

次のものを作成する必要があると思います。

ICO
favicon.ico（32x32）

PNG
favicon.png（96x96）

タイルアイコン
tileicon.png（144x144）

Apple Touchアイコン
Apple-touch-icon-precomposed.png（152x152）
これに基づいて https://github.com/h5bp/html5-boilerplate/issues/1367

...そして、このコードを使用してそれらを提供しますか？

<link rel="Apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

何か不足していますか？

これがIE 10をカバーするかどうかわかりません。

faviconapple-touch-icon
101
Leon

ファビコンは、見た目よりもずっと複雑です。 10年前、favicon.icoのみが必要なアイテムでした。次に、タッチアイコンがあり、次にさまざまなiOSデバイスの画面解像度による複数のタッチアイコンがあり、Windowsのタイルアイコンがありました...

ここでのいくつかの答えは非常に包括的であり、圧倒的です（これはすべて、ファビコンのみですか？）それでも、 Windowsの310x310タイルアイコンは558x558にすることをお勧めします を示すことに失敗します。また、数か月前に書かれたため、最近の Android Chrome M39のマニフェスト または ピン付きタブSVGアイコンOS X El CapitanのSafariの場合 。

プラットフォームごとの設計は、別の難しいが、無視されたトピックです。たとえば、ファビコンは多くの場合透明です。しかし、iOSは透明度をサポートしていません（この例として、 SOタッチアイコン と、iPhoneのホーム画面にSOを追加したときに得られるものを比較してください）。

これらの理由から、ファビコンのベストプラクティスと考えるのは、not手動で作成することです。代わりに、ツールを使用してプロセス全体を自動化し、プラットフォームのガイドラインを実施します。

RealFaviconGenerator を使用することをお勧めします。ジョブを完了するために必要なすべての画像とHTMLコードを生成します。

  • favicon.icoおよびデスクトップブラウザ用のPNGアイコン
  • IOSおよびAndroidデバイス用のAppleタッチアイコン
  • Windows 8タイル
  • OS X El Capitan上のSafariの固定タブアイコン

たとえば、msapplication-TileImage画像とマークアップを生成するだけでなく、IE11でサポートされている最新のbrowserconfig.xmlファイルも生成します。また、数か月前に更新され、Android ChromeマニフェストとSafari OS X El Capitanをサポートしました。

完全な開示：私はこのサイトの著者です。

109
philippe_b

以下は、モバイルおよびタブレット用のファビコンの完全な（ご存じのとおり）例です。

<!-- non-retina iPhone pre iOS 7 -->
<link rel="Apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="Apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="Apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="Apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="Apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="Apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="Apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

IE11の場合、 here はFAQです

56
user2477225

さまざまなデバイスに設定できるさまざまなアイコンとスプラッシュスクリーンさえあります。この答えは、それらすべてをサポートする方法を通過します。

ここに、情報を収集した場所への関連リンクとともに使用したスニペットをいくつか示します。 ASP.NET MVC Boilerplate プロジェクトテンプレートの詳細および詳細については、 my blog をご覧ください。これらはすべて、すぐに使用できます（サンプルイメージファイルを含む）。

次のマークアップをHTMLヘッドに追加します。コメントアウトされたセクションは完全にオプションです。すべてのアイコンの使用法を説明するために、コメントのないセクションをお勧めします。あなたを助けるためのコメントであれば、ほとんど怖がらないでください。

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/Android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//Apple_ref/doc/uid/30001261-SW1 -->
<!-- Apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="Apple-mobile-web-app-title" content="">-->
<!-- Apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="Apple-mobile-web-app-capable" content="yes">-->
<!-- Apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="Apple-mobile-web-app-status-bar-style" content="black">-->
<!-- Apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="Apple-touch-icon" sizes="57x57" href="/content/images/Apple-touch-icon-57x57.png">
<!-- Apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="Apple-touch-icon" sizes="114x114" href="/content/images/Apple-touch-icon-114x114.png">
<!-- Apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="Apple-touch-icon" sizes="72x72" href="/content/images/Apple-touch-icon-72x72.png">
<!-- Apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="Apple-touch-icon" sizes="144x144" href="/content/images/Apple-touch-icon-144x144.png">
<!-- Apple-touch-icon-60x60.png - Same as Apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="Apple-touch-icon" sizes="60x60" href="/content/images/Apple-touch-icon-60x60.png">
<!-- Apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="Apple-touch-icon" sizes="120x120" href="/content/images/Apple-touch-icon-120x120.png">
<!-- Apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="Apple-touch-icon" sizes="76x76" href="/content/images/Apple-touch-icon-76x76.png">
<!-- Apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="Apple-touch-icon" sizes="152x152" href="/content/images/Apple-touch-icon-152x152.png">
<!-- Apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="Apple-touch-icon" sizes="180x180" href="/content/images/Apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://Gist.github.com/tfausak/2222823 -->
<!-- Apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- Apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- Apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.Microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Browserconfig.xmlファイル。上記の完全な説明。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Manifest.jsonファイル。上記の完全な説明。

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/Android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

プロジェクト内のファイルのリスト（これらのファイルの名前は、上記のメタタグの使用を避けるためにプロジェクトのルートに配置する場合に重要です）：

favicon.ico
browserconfig.xml
Content/Images/
    Android-chrome-144x144.png
    Android-chrome-192x192.png
    Android-chrome-36x36.png
    Android-chrome-48x48.png
    Android-chrome-72x72.png
    Android-chrome-96x96.png
    Apple-touch-icon.png
    Apple-touch-icon-57x57.png
    Apple-touch-icon-60x60.png
    Apple-touch-icon-72x72.png
    Apple-touch-icon-76x76.png
    Apple-touch-icon-114x114.png
    Apple-touch-icon-120x120.png
    Apple-touch-icon-144x144.png
    Apple-touch-icon-152x152.png
    Apple-touch-icon-180x180.png
    Apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    Apple-touch-startup-image-1536x2008.png
    Apple-touch-startup-image-1496x2048.png
    Apple-touch-startup-image-768x1004.png
    Apple-touch-startup-image-748x1024.png
    Apple-touch-startup-image-640x1096.png
    Apple-touch-startup-image-640x920.png
    Apple-touch-startup-image-320x460.png

総オーバーヘッド

3KBの余分なHTMLであるコメントを削除した場合、1.5KBのスプラッシュスクリーンをサポートしていない場合。 HTMLコンテンツでGZIP圧縮を使用している場合（最近誰もがそうしているはずです）、すべてのプラットフォームをサポートするためのリクエストあたり約634バイトのオーバーヘッド、またはスプラッシュスクリーンのない446バイトが残ります。私は個人的に、IOS、Android、およびWindowsデバイスをサポートする価値があると思いますが、あなたの選択は、単にオプションを与えているだけです！

現在のWebアイコン/スプラッシュスクリーン/設定状況に関するサイドノート

ベンダー固有のアイコン、スプラッシュ画面、およびWebブラウザーを制御する特別なタグやピン留めされたアイコンがあるこの状況は、ばかげています。完璧な世界では、すべてのサイズで見栄えが良く、ページのルートに配置できるfavicon.svgファイルをすべて使用します。執筆時点では、FireFoxのみがこれをサポートしています（ CanIUse.com を参照）。

ただし、最近ではアイコンだけが設定されているわけではなく、他のベンダー固有の設定（上記参照）がいくつかありますが、favicon.svgファイルはほとんどのユースケースをカバーします。

更新

新しいAndroid/ChromeバージョンM39 +ファビコン/テーマオプションが含まれるように更新されました。興味深いことに、彼らはマイクロソフトと同様のアプローチを採用していますが、XMLの代わりにJSONファイルを使用しています。

24
Muhammad Rehan Saeed

私は実際に同じ質問を自問しており、ビルドステップに統合できる、または必要なアセットとマークアップの作成を単純化できる単純なプロジェクトを探しました。

要件を満たすものが見つからなかったため、 faviconbuild を作成し、 MITライセンス でリリースしました。

このプロジェクトの目的は、ファビコンを構築し、マークアップをサポートするための、中央で保守可能なローカルで実行可能なクロスプラットフォームユーティリティを作成することです。 Imagemagick の力を活用するため、プラットフォーム用にダウンロードするか、 releases で提供するものを使用する必要があります。商用または個人のプロジェクトでこれを使用したり、貢献したり、機能のリクエストを送信したり、または単にあなた自身のユーティリティのインスピレーションの源として使用してください。

このプロジェクトは、Windows用のバッチファイルとUnix/Mac（またはCygwin経由のWindows）用のbashスクリプトで構成されています。サポートされているオプションの完全なリストは、内部ヘルプオプション-hまたは--helpから取得できます。

例：

./faviconbuild.sh -h

両方のスクリプトは、単純な テキストファイル を解析します。これは、-pまたは--parsedオプションでオーバーライドすることもできます。このファイルは基本的に実行するコマンドのテンプレートにすぎないため、必要に応じて出力をより簡単にカスタマイズできます。

また、開発に関する ブログ投稿 と、bash/batchスクリプトのミニチュートリアルとして公開しました。

1
Matthew Sanders

最も簡単な解決策は、1つの（！）PNGイメージを使用することです（2018年）

これをドキュメントのヘッドに追加するだけです：

<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="Apple-touch-icon" href="/img/icon-196x196.png">

最後のリンクはApple（ホーム画面）、2番目はAndroid（ホーム画面）、最初のリンクは残りのリンクです。

このソリューションは、Windows 8/10では「タイル」をサポートしていないことに注意してください。ショートカット、ブックマーク、ブラウザタブの画像をサポートしています。

0
JoostS