web-dev-qa-db-ja.com

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

質問

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

方法1

favicon.icoという名前のファイルをメインディレクトリに配置するのは1つの方法です。ブラウザは常にそのファイルを要求します。 Apacheログファイルで確認できます。

方法2

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

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

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

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

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

ジョブを適切かつ迅速に完了したい場合は、 favicon generator を使用できます。これは、すべての主要なデスクトップおよびモバイルブラウザ用の画像とHTMLコードを作成します。完全な開示：私はこのサイトの著者です。

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

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

ご提案のとおり、16x16および32x32の画像を含むfavicon.icoファイルを作成できます（ 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">

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

134
philippe_b

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

3
Hblegg
  1. このWebサイトを使用して favin.ico を生成できます
  2. Pngは方法1では機能せず、icoにはさらに詳細がある可能性があるため、.ico形式を使用することをお勧めします。
  3. 両方の方法はすべてのブラウザで機能しますが、自動的に機能する場合は、必要なコードを入力しますか？方法1の方が良いと思います。
3
amir2h

だから、最も重要なことはすべてすでに述べられていると思います。この宣言により、ファビコンの場所に移動可能なGIFを配置できることのみを追加します。

<link rel="shortcut icon" href="img/icon.gif" />

これは 一部のページ で発生します。 ファビコンを移動すると、このWebサイトのカードが他のカードよりも目立つようになります。残念ながら、この動作とこのプロパティは保証されていませんどのブラウザでも。ある日Firefoxを見て、2日目に同じページにGIFの代わりに標準の空のアイコンを表示しました。

0
simhumileco