web-dev-qa-db-ja.com

Webサイト用のブラウザタブアイコン（favicon）を追加するにはどうすればいいですか？

私はウェブサイトに取り組んできましたが、ブラウザのタブに小さなアイコンを追加したいのですが。

HTMLでこれを行うにはどうすればよいですか。また、コードのどこに配置する必要がありますか（ヘッダーなど）。アイコンに変換したい.pngロゴファイルがあります。

関連： ブラウザタブのHTMLセット画像 。

htmliconsfavicon
497
knookie

ウェブサイトにfaviconを追加するには、実際には2つの方法があります。

<link rel="icon">

以下のコードを<head>要素に追加するだけです。

<link rel="icon" href="http://example.com/favicon.png">

PNGファビコン はIE <= 10 以外のほとんどのブラウザでサポートされています。後方互換性のために、ICOのfaviconを使うことができます。

もうicon属性のrelの前にshortcutを付ける必要はありません _に注意してください。差出人 MDNリンクタイプ ：

shortcutリンク型はiconの前によく見られますが、このリンク型は不適合で、無視され、Web作者はもう使用してはいけませんです。

ルートディレクトリのfavicon.ico

別のSO回答 から（ @mercator による）：

favicon.icoでショートカットアイコンを指定しない限り、最近のすべてのブラウザ（Chrome 4、Firefox 3.5、IE8、Opera 10、およびSafari 4でテスト済み）は常に<link>を要求します。

だからあなたがしなければならないのはあなたのウェブサイトへの/favicon.icoリクエストがあなたのfaviconを返すようにすることです。残念ながらこのオプションではPNGアイコンを使うことができません。

favicon.png vs favicon.icoも参照してください - なぜICOではなくPNGを使用すべきなのでしょうか。

319
Michał Perłakowski
  1. あなたのpngをicoファイルに変換するためのツールを使用してください。あなたは "favicon generator"を検索することができ、あなたは多くのオンラインツールを見つけることができます。

  2. Icoアドレスをheadタグでlinkに配置します。

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
415
Gustavo Costa De Oliveira

私が見つけた最高のものは http://www.favicomatic.com/です 私は最もよく言っています、なぜならそれは私に最も賢いfaviconを与え、そして変換後に編集を必要としないからです。それは16×16と32×32でfaviconを生成し、それらを「あらゆるサイズ、先生、」と引用するでしょう。また、彼らのサイトは見栄えがよく使いやすいです。

それらはまたあなたがそれらが生成するファイルのために使用する必要があるhtmlを生成します。

<link rel="Apple-touch-icon-precomposed" sizes="57x57" href="Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon-precomposed" sizes="60x60" href="Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon-precomposed" sizes="120x120" href="Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon-precomposed" sizes="76x76" href="Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon-precomposed" sizes="152x152" href="Apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

私は最初の20ほどのグーグルの結果を調べました、そしてこれははるかに最高でした。

61
Jared Menard

さまざまなデバイス用に設定できるさまざまなアイコンやスプラッシュスクリーンがあります。この答えは彼ら全員を支える方法を通して通過します。

ここに、情報を収集した場所への関連リンクとともに使用したスニペットをいくつか示します。 ASP.NET MVC Boilerplate projectテンプレートの詳細および追加情報については、 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圧縮を使用している場合（最近は誰もが行うべきです）、すべてのプラットフォームをサポートするための1要求あたり約634バイトのオーバーヘッド、またはスプラッシュスクリーンなしの446バイトのオーバーヘッドが残ります。私は個人的にはIOS、Android、そしてWindowsデバイスをサポートする価値があると思いますが、あなたの選択は、私はただ選択肢を与えています！

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

ベンダー固有のアイコン、スプラッシュスクリーン、Webブラウザを制御するための特別なタグ、または固定アイコンなどのこの状況はばかげています。完璧な世界では、私たち全員がfavicon.svgファイルを使用します。このファイルは、どのサイズでも見栄えがよく、ページのルートに配置できます。これを書いている時点ではFireFoxだけがこれをサポートしています（ CanIUse.com を参照）。

しかし、アイコンだけが最近の設定ではなく、他にもベンダー固有の設定がいくつかあります（上図）が、favicon.svgファイルでほとんどのユースケースをカバーできます。

更新

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

12
Muhammad Rehan Saeed

私は私のウェブサイトのためにこれをうまくやった。

唯一の例外は、SeaMonkeyブラウザはあなたの<head>に挿入されたHTMLコードを必要とします。一方、他のブラウザはHTMLを挿入しなくてもfavicon.icoを表示します。また、IE以外のブラウザでは、.ico形式だけでなく、他の種類の画像を使用できます。これが役に立つことを願っています。

10
Barbie laptop gamer

私はあなたが Font Awesome Icons からfaviconを作ることができるオンライン Faviconジェネレータ を作成しました。あなたは、ブラウザでのライブ作成したファビコンをプレビューすることができます。

enter image description here

追加機能が必要な場合は、issueまたはpull requestを送信してください ここ :)。

7
eclipse

上記の複雑な解決策はたくさんあります。私のために？画像サイズを32 x 32ピクセルに変更した後、GIMPを使用して元のPNGファイルのコピーを保存しました。

必ず* .icoファイルとして保存して、

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

上記の

4
beep_check

.PNGまたは.GIFを.ICOファイルに変換するには、 http://faviconer.com を試すことをお勧めします。

1つの.ICOファイルに16x16と32x32（新しい網膜ディスプレイ用）の両方を作成できます。

IEとFirefoxでは問題なし

4
Dmitri A

Chromeでページアイコン（favicon）を表示するには、ホスティングサーバーからWebサイトを確認する必要があります。または、PC上でWebサイトを開発およびテストしながらローカルホストを使用することもできます。

2
Miloud Eloumri
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

私がまだ混乱しているあなたのそれらのためにより多くの明快さを加えるならば。 .icoファイルは.pngよりも透明度が高い傾向があるため、上記のように画像をここで変換することをお勧めします。 http://www.favicomatic.com/done また、hrefの中には画像の場所だけです。任意のサーバーの場所にすることができます。先頭にhttp：//を付けるのを忘れないでください。それ以外の場合は機能しません。

1
DIZAD