[解決済み] Webサイトでファビコンを作成する際の注意点とは？[クローズド］

2022-05-14 21:44:27

質問

を作成するためのベストプラクティスは何ですか？ ファビコン を作成するためのベストプラクティスは何ですか？
とは .ico ファイルよりも、16x16 と 32x32 の両方の画像を持つ .png ファイルよりも優れていますか？
今日好まれている正しい方法が、それなりに古いブラウザでは機能しない可能性がありますか?

方法 1

という名前のファイルを favicon.ico という名前のファイルをメインディレクトリに置くのも一つの方法です。ブラウザは常にそのファイルを要求します。apacheのログファイルを見ればわかります。

方法2

のHTMLタグを <head> セクションの中にあります。

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

どのように解決するのですか？

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

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

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

仕事をうまくかつ迅速にこなしたいのであれば、ファビコンを生成するためにファビコンジェネレーター . これは、すべての主要なデスクトップおよびモバイルブラウザのための画像とHTMLコードを作成します。完全な開示：私はこのサイトの作者です。

このようなソリューションの利点：迅速で、すべての互換性の考慮はすでにあなたのために対処されています。

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

ご指摘のように favicon.ico ファイルを作成し、その中に 16x16 と 32x32 の画像が含まれています (ただしマイクロソフトでは、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">

これは全容ではありませんが、ほとんどの場合において十分です。

[解決済み] Webサイトでファビコンを作成する際の注意点とは？[クローズド］

質問

どのように解決するのですか？

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

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

3 番目の方法です。favicon.ico、PNG アイコン、および Apple Touch アイコンを作成する (すべてのブラウザー)

関連

document.forms 使用方法

[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか？

[解決済み] input type="button "に背景画像を追加するには？

[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する

[解決済み] HTMLのid属性に有効な値は何ですか？

[解決済み] How can I set the default value for an HTML <select> element?

[解決済み] preタグでテキストを折り返すにはどうしたらよいですか？

[解決済み] Webサイトのブラウザタブアイコン（ファビコン）を追加する方法を教えてください。

[解決済み] CSS背景のストレッチとスケール

[解決済み] HTML 5 Favicon - サポートは？

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[解決済み] bootstrapでボタンにリンクを貼るには？

[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか？

[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか？

[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource

[解決済み] input type="date "のフォーマットを変更する方法はありますか？

[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか？

[解決済み] HTML Input="file" Accept Attribute File Type (CSV)

[解決済み] div内の画像の下に余分なスペースがある

[解決済み] favicon.png vs favicon.ico - なぜICOではなくPNGを使うべきなのでしょうか？

[解決済み] Favicon Standard - 2022 - svg, ico, png と寸法は？重複

[解決済み] Webサイトでファビコンを作成する際の注意点とは？[クローズド］

質問

どのように解決するのですか？

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

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

3 番目の方法です。favicon.ico、PNG アイコン、および Apple Touch アイコンを作成する (すべてのブラウザー)

関連

最新

おすすめ

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

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