favicon.ico の問題

HTML

目次一覧

 状態:-  閲覧数:5,662  投稿日:2011-09-04  更新日:2019-05-20
favicon.icoを設置する必要があるの? / favicon.ico読出コード確認 / favicon.ico読出コードコード削除

48×48のfavicon.icoを作成する / PCブラウザ用ファビコンの問題点 / favicon.icoを実際に探してみた気が付いた問題点

iconmonstr / favicon設置チェック

favicon.icoを設置する必要があるの? / favicon.ico読出コード確認 / favicon.ico読出コードコード削除

 閲覧数:720 投稿日:2019-05-20 更新日:2019-05-20

favicon.icoを設置する必要があるの?


favicon.ico設置していないとエラーログが大量に溜まる
HEAD内にshortcut iconの記述を書かないのであれば、ファイルはルート直下(/favicon.ico)にUPしておくこと。
パスを書かないと、ブラウザがアクセスしているページと同じDirを探し、なければ上位のDirを探し、そこにもなければさらに上と探しまくるため。
favicon.ico設置に関して初歩的に認識しておくこと、2つ。

・favicon.icoを設置する
favicon.icoは常に要求されます。Not Foundが返されることが多いのですが「設定を忘れる」事が多い、存在すら知らなかったという事もあるでしょう。しかし、ブラウザはバックグラウンドでfavicon.icoを要求しています。真っ先にキャッシュさせましょう。
ページ表示速度を高速化させる17の方法(HTML/CSS篇)

障害5: ファビコンがない
ブラウザはすべてのサイトに「お好みのアイコン(Favorite icon)」別名ファビコン(favicon)があると思っています。サイトにファビコンがない場合、ブラウザは仮想のドアが開くまでノックをし続けます。ファビコンは小さなサイズの画像で、ウェブ・ブラウザがサイトのアドレスとタイトルの隣に表示するものです。ブラウザは、favicon.icoという名前のファイルを各サイトのドキュメントのルートにリクエストすることでその画像を入手します。ファビコンが見つかればブラウザはそれを「覚えて」おきます。ファビコンが見つからない場合、ブラウザは繰り返しそのファイルをリクエストします(ウェブサーバーのアクセス・ログを見てみれば簡単にそれがわかります)。ファイルが見つからないときに実行される特殊なエラー処理アプリケーションのロジックで、知らずにオーバーヘッドをかけてしまってサーバーにより大きな負荷をかける原因となっているサイトもあります。
7つのウェブ性能障害を回避する

favicon.ico と Webサイトの表示度速度について

favicon.ico読出コード確認


$ find /var/www/html -type f -name '*.php' -print0 | xargs -0 grep favicon.ico
<link rel="shortcut icon" href="../favicon.ico">

<link rel="shortcut icon" href="favicon.ico">


favicon.ico読出コードコード削除


$ find /var/www/html -type f -name '*.php' -exec sed -i 's%<link rel="shortcut icon" href="favicon\.ico">%%g' {} +
$ find /var/www/html -type f -name '*.php' -exec sed -i 's%<link rel="shortcut icon" href="\.\./favicon\.ico">%%g' {} +


48×48のfavicon.icoを作成する / PCブラウザ用ファビコンの問題点 / favicon.icoを実際に探してみて気が付いた問題点

 閲覧数:729 投稿日:2019-05-20 更新日:2019-05-20

48×48のfavicon.icoを作成する


案1. faviconジェネレータを使用して、favicon.icoを作成
・期待した結果を得られなかった
→ 背景色が透過されない

案2.自分でfavicon.icoを作成
・48×48の画像を作成して、favicon.icoへリネーム
・アップロードしてブラウザで確認してみたが、期待した結果を得られなかった

PCブラウザ用ファビコンの問題点


サイズが小さい
・48×48サイズで作成した画像をブラウザで表示すると、何の画像か分かりにくい
→ 画像をファビコンで使用することは難しい。もっと単純な形である方が良い

favicon.icoを実際に探してみて気が付いた問題点


サイズの問題
・48×48のfavicon.icoを探してみたが、なかなか見つからない

ライセンスの問題
・フリーと掲載されていたのでダウンロードしてみたが、リンクが必要
You must: give credits and add a link to us: "Icons by Axialis" by adding the html code below:


iconmonstr / favicon設置チェック

 閲覧数:709 投稿日:2019-05-20 更新日:2019-05-26

iconmonstr


ライセンス
・リンク不要

画像サイズ
・変更可能


・変更可能


使用中


P0
Opera 1

P0の一部
Laptop 4

P15
Cube 1

P21
・Plus 1


設置候補
Speech Bubble 3 - PNG
Speech Bubble 2 - PNG
View 18 - PNG
View 16 - SVG
View 17 - SVG
View 19 - SVG
Plus 4 - PNG
Badge 6 - PNG
Trash Can 19 - PNG
Webcam 5 - PNG
Save 3 - PNG
Location 6 - PNG
Location 12 - PNG
Shopping Bag 3 - SVG
Shopping Bag 7 - PNG
Building 20 - PNG
Cube 2 - PNG
Zip 9 - PNG
Copyright 1 - PNG
Copyright 6 - PNG
Tennis 1 - PNG

設置してみたが不採用
・Pen 8 - 実際に設置してみたら、小さ過ぎるため分かりづらかった
・Pen 1 - 同上。この形式はアイコンでは良くてもファビコンの大きさでは厳しい
・Book 25 - 同上。この形式はアイコンでは良くてもファビコンの大きさでは厳しい
・Clipboard 13 - 同上。この形式はアイコンでは良くてもファビコンの大きさでは厳しい
・File 3 -悪くはないが、インパクトが薄いかな

favicon設置チェック


Favicon checker


>表記がおかしいときは?

このWEBページは保存できませんでした。



週間人気ページランキング / 9-4 → 9-10
順位 ページタイトル抜粋 アクセス数
1 Design 0 3
1 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
2 Font Awesome 4.7.0 | Font Awesome(フォント) 2
2 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 2
2 このエントリーの結論 / 主な機能と使い方 / 補足 2
2 考え方A.長さの比率で角度60°を分割 / R≧G≧B 2
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
3 #02-04 ブラウザのツールバーに設置する「Browser Action」 1
3 実際に利用してみた感想 1
3 Bootstrap 4 | 4系(Bootstrap) 1
3 アッパーキャメルケース / ローワーキャメルケース 1
3 16進数カラーコード / 2進数 1
3 Click&Clean | Chrome 拡張機能 1
3 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない | Google Chrome(ブラウザ) 1
3 「CSSプロパティ」書く順番 | コーディングルール 1
3 ユーザー個別の設定情報が格納されているレジストリキーを削除 1
3 Illustrator 2 で作成したデータを、Fireworks 8 で読み込む | Fireworks 8(Fireworks) 1
3 XnView MP 系(ソフトウェア) カテゴリー 1
3 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 1
2026/9/11 5:05 更新