Webサイトのブラウザータブアイコン(ファビコン)を追加する方法


578

私はウェブサイトで作業しており、ブラウザのタブに小さなアイコンを追加したいと思います。

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

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


1
詳細については、リンクを確認してください。あなたは正しい軌道に乗っています。
レジー

FTPで画像(favicon.ico)をアップロードします(FTPチュートリアルをお読みください)。Webサイトのルートセクションにアップロードします。ルートセクションはメインファイル領域であり、メインページのindex.html(index.asp、index.phpなど)ファイルを格納します。 davesite.comがルートになるdavesite.com/webstationがルートにならないdavesite.com/webstation/htmlもルートではないこのファイルは適切に配置され、ドメイン全体のデフォルトとしてロードされます。
ヌーキー

そこで早めにEnterキーを押してください-とにかく返信に感謝します。あなたが与えたリンクの最初の部分(私が上に貼り付けた)がうまくいかなかったと言うつもりでしたか?しかし、2番目の部分は完全に機能しました-ありがとう
ヌーキー

回答:


416

ファビコンをWebサイトに追加するには、実際には2つの方法があります。

<link rel="icon">

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

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

PNGファビコンは、IE <= 10を除くほとんどのブラウザーでサポートされています。下位互換性のために、ICOファビコンを使用できます。

属性のiconrelshortcutもう置く必要がないことに注意してください。MDNリンクタイプから:

shortcutリンクタイプは、多くの場合、前に見ているiconが、このリンクタイプが不適合で、無視され、ウェブ作者がもうそれを使用してはいけません

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

別のSOの回答から(@mercatorによる):

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

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

favicon.pngとfavicon.icoも参照してください。なぜICOではなくPNGを使用する必要があるのですか?


1
すべてのアイコン(モバイル、「ホーム画面に追加」アイコン、モバイルブックマーク、iOS / Droid、デスクトップタブなどを含む)、ICOファイルの生成など、および上記のメタファイルのコピー貼り付け可能なHTMLコードが必要な場合は、すべてワンクリックで、この便利なツールを使用できます(私は提携していません) realfavicongenerator.net
Albert Renshaw

2
追加したい:あなたのアイコンは正方形の寸法でなければなりません、それは幅が高さに等しいことを意味します。
Nguyen Tan Dat 2018

3
テストするときは、Ctrl + F5キーを押すことを忘れないでください。時々それはキャッシュされます。
Hairi

私はなかったではない、単にFirefoxやChromeのどちらかがそれをロードするために引き起こした私のサイトのルートディレクトリにfavicon.icoをという名前のICOファイルを置くことを見つけます。だから私は<link relルートを行きました。しかし、私のサイトのアドレスはDNSに確実にリストされていないためhref="http://example.com"、取得することはできません。それで私は自分のindex.htmファイルでこの解決策に到着しました:<link rel="icon" href="favicon.ico">
CODE-REaD

426
  1. ツールを使用してpngをicoファイルに変換します。「ファビコンジェネレーター」を検索して、多くのオンラインツールを見つけることができます。
  2. でICOアドレスを配置headしてlink-tag:

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

3
ありがとう!手順を適切に実行しましたが、IEとFirefoxでは問題なく機能していますが、何らかの理由でGoogle Chromeでは機能しません。キャッシュを削除する必要がありますか?またはそこから何をしなければなりませんか?
PatrickGamboa 2013年

1
Photoshopプラグインの使用が好き:telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Ben_Coding 2013年

2
「ショートカット」の部分は、多くの状況で削除することができます:stackoverflow.com/questions/13211206/...mathiasbynens.be/notes/rel-shortcut-icon
BBC

72

私が見つけた最高のものはhttp://www.favicomatic.com/です 私はそれが私に最も鮮明なファビコンを与え、それらの変換後に編集を必要としなかったので、私は最もよく言います。それは、16x16と32x32でファビコンを生成し、それらを引用するために「すべてのいまいましいサイズ、サー!」また、彼らのサイトはクールに見え、使いやすいです。

また、生成するファイルに使用する必要がある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ほどのgoogleの結果を見ました、そしてこれは断然最高でした。


4
これらすべてをすべてのページのheadタグに配置することになっていますか?
Noumenon

1
私はあなたの頭のタグにそれをすべて入れません。サポートする必要があるデバイスをサポートするために必要なタグのみを挿入します。正直なところ、1つの<link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">で問題を解決できます
Jared Menard

5
このgitページでは、これらのアイコンのほとんどがどのように使用されるかについて説明しています:github.com/audreyr/favicon-cheat-sheet
Jared Menard

14

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

これは、私が情報を収集した場所への関連リンクとともに使用したスニペットです。ASP.NET MVCボイラープレートプロジェクトテンプレートの詳細と詳細については、ブログ(サンプル画像ファイルを含む)をそのまますぐに組み込むことができるブログを参照しください。

次のマークアップを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 +ファビコン/テーマオプションを含むように更新されました。興味深いことに、彼らはMicrosoftと同様のアプローチを行っていますが、XMLではなくJSONファイルを使用しています。



10

私は私のウェブサイトのためにこれを首尾よく行いました。

唯一の例外は、SeaMonkeyブラウザにはHTMLコードをに挿入する必要があること<head>です。一方、他のブラウザは、HTMLを挿入せずにfavicon.icoを表示します。また、IE以外のブラウザは、.ico形式だけでなく、他のタイプの画像を使用する場合があります。これがお役に立てば幸いです。


5

上記の多くの複雑なソリューションがあります。私のために?画像サイズを32 x 32ピクセルに変更した後、GIMPを使用して元のPNGファイルのコピーを保存しました。

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

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

上記の


4

私が試してみることをお勧めしたいhttp://faviconer.comを .icoファイルにあなたの.PNGまたは.GIFを変換します。

16x1632x32(新しいRetinaディスプレイの場合)の両方を1つの.ICOファイルで作成できます。

IEとFirefoxに問題はありません


3

Chromeでページアイコン(ファビコン)を表示するには、ホスティングサーバーからウェブサイトを確認する必要があります。または、PCでウェブサイトを開発およびテストするときにローカルホストを使用できます。


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

まだ混乱しているあなたのために、私はより明確にするかもしれません。.icoファイルは.pngより透明度が高い傾向があるため、上記のようにここで画像を変換することをお勧めします。http//www.favicomatic.com/done また、hrefの内部は画像の場所です、任意のサーバーの場所にすることができます。前にhttp://を追加することを忘れないでください。そうしないと機能しません。


1

私は他に使ったことはありませんが、https://realfavicongenerator.net/が一番の選択肢のようで、ここではまだ触れていません。

ファビコンを生成するためのソース画像としてSVGをサポートし、異なるプラットフォームの画像を上書きするための便利なオプションを提供します。さらに、デフォルトでは、すべての古いプラットフォームと下位互換性のある大量の画像を生成しません。代わりに、必要かどうかを確認するオプションが表示されます。

開発者から送られてくるメールから、SVGファビコンの生成のサポートや、SVGテーマ依存性のサポートも追加する予定で、これは非常に優れた機能だと思います。


0

インデックスファイルのヘッダーセクションで以下のコードを使用してください。

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