103

質問

Webサイトにファビコンを作成するためのベストプラクティスは何ですか？
また、16x16と32x32の両方の画像を含む.icoファイルは、16x16のみを含む.pngファイルよりも優れていますか？
今日推奨される適切な方法が、かなり古いブラウザで機能しないのでしょうか？

方法1

favicon.icoメインディレクトリに名前が付けられたファイルを配置するのも1つの方法です。ブラウザは常にそのファイルを要求します。これは、Apacheログファイルで確認できます。

方法2

<head>セクション内のHTMLタグ：

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

html favicon

— バイトコード77
ソース

153

ファビコンを作成するにはいくつかの方法があります。最善の方法は、さまざまな要因によって異なります。

このタスクに費やすことができる時間。多くの人にとって、これは「できるだけ早く」です。
あなたが喜んで行う努力。同様に、より良い結果を得るために16x16アイコンを手動で描画します。
奇妙な仕様の特定のブラウザをサポートするような特定の制約。

最初の方法：ファビコンジェネレーターを使用する

仕事をすばやく簡単にやりたい場合は、ファビコンジェネレーターを使用できます。これは、すべての主要なデスクトップおよびモバイルブラウザ用の画像とHTMLコードを作成します。完全な開示：私はこのサイトの作成者です。

このようなソリューションの利点：迅速で、互換性に関するすべての考慮事項がすでに解決されています。

2番目の方法：favicon.icoを作成する（デスクトップブラウザーのみ）

ご提案のとおり、favicon.ico16x16および32x32の画像を含むファイルを作成できます（Microsoftは16x16、32x32および48x48を推奨しています）。

次に、HTMLコードで宣言します。

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

この方法は、新旧のすべてのデスクトップブラウザで機能します。しかし、ほとんどのモバイルブラウザはファビコンを無視します。

favicon.icoファイルをルートに配置して宣言しないという提案について：この手法はほとんどのブラウザーで機能しますが、100％信頼できるわけではありません。たとえば、Windows Safariはそれを見つけることができません（許可：このブラウザはWindowsでは非推奨になっていますが、要点はわかります）。この手法は、PNGアイコンと組み合わせると便利です（最新のブラウザーの場合）。

3番目の方法：favicon.ico、PNGアイコン、およびApple Touchアイコンを作成します（すべてのブラウザー）

あなたの質問では、モバイルブラウザについては触れていません。それらのほとんどはfavicon.icoファイルを無視します。サイトがデスクトップブラウザ専用である場合でも、モバイルブラウザをまったく無視したくない場合があります。

以下との良好な互換性を実現できます。

favicon.ico、上記を参照。
Android Chrome用の192x192 PNGアイコン
180x180のApple Touchアイコン（iPhone 6 Plusの場合。他のデバイスでは必要に応じて縮小されます）。

で宣言する

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

これは完全な話ではありませんが、ほとんどの場合十分です。

— philippe_b
ソース

実際、まだ頻繁に使用されている<link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico">は有効なオプションではありません。それも標準ではなく、IEだけがサポートしています。また、IE 9の時点で、IEはデフォルトの「look at root」メソッドをサポートしています。したがって、これはすべてのブラウザをサポートする方法ではなく、IE <9をサポートする方法にすぎません。（現在の標準）「ルートに配置」メソッドに依存するか、主張する場合は、次を追加してください：<link rel = "icon" href = "/ favicon.ico">（これも標準ではありませんが）

— HappyMe

ファビコンのメカニズムは何年にもわたって確実に進化しています。今日、MDNの仕様に次のように記載されていることに気づきました。ショートカットリンクタイプはアイコンの前に表示されることがよくありますが、このリンクタイプは非準拠であり、無視され、Web作成者はこれを使用できません。developer.mozilla.org/en-US/docs/Web/HTML/Link_types<link ref="icon" ...>ではなく意味する使用<link ref="shortcut icon" ...>

— broc.seib

フィードバックをありがとう@ broc.seib。このコメントを書いているとき、なぜそれが「アイコン」ではなく「ショートカットアイコン」なのかが分からなくなりました。確かに、Mozillaはこのストーリーでその発言力を持っています。しかし、この宣言が最初にここにある理由を忘れてはなりません。IE8などのレガシーブラウザーをサポートするためです。最近のブラウザーのほとんどは、ICOよりもクリーンで軽量なPNGアイコンを使用しています。RealFaviconの私の計画は、この宣言を完全に削除することです。この前に、私はIE 7、8および9にテストを実行する必要があります

— philippe_b

言うまでもなく、このページの「ソースを表示」する場合は、Stack Overflowでref="shortcut icon"使用するのとまったく同じです。

— Steven Ventimiglia

@laggingreflex /favicon.icoが推奨される方法です。これはを訪れwww.google.comたときに得られるものです。しかし、アイコンでルートディレクトリを汚染したくない場合もあります。その場合、マークアップは問題なく機能します。

— philippe_b

このウェブサイトでfavin.icoを生成できます
pngは方法1では機能せず、icoがより詳細になる可能性があるため、.ico形式の使用をお勧めします。
どちらの方法もすべてのブラウザで機能しますが、自動的に機能する場合は、コードを入力してください。だから私は方法1が良いと思います。

— a828h
ソース

私はhttps://iconifier.netを使用しました。画像をアップロードし、画像のzipファイルをダウンロードし、サーバーに画像を追加し、index.htmlへのリンクの追加を含むサイトの指示に従いました。「ホーム画面に追加」すると、ファビコンがSafariのiPhoneに表示されるようになりました

— フブレッグ
ソース

Webサイトにファビコンを作成するためのベストプラクティスは何ですか？

最初の方法：ファビコンジェネレーターを使用する

2番目の方法：favicon.icoを作成する（デスクトップブラウザーのみ）

3番目の方法：favicon.ico、PNGアイコン、およびApple Touchアイコンを作成します（すべてのブラウザー）