favicon.ico の問題

HTML

目次一覧

 状態:-  閲覧数:5,698  投稿日: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読出コードコード削除

 閲覧数:736 投稿日: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を実際に探してみて気が付いた問題点

 閲覧数:745 投稿日: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設置チェック

 閲覧数:725 投稿日: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ページは保存できませんでした。



週間人気ページランキング / 10-25 → 10-31
順位 ページタイトル抜粋 アクセス数
1 Design 0 13
2 「bgcolor」「background-color」「background」の違い | CSS 7
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 Stylus(Chrome 拡張機能) カテゴリー 3
4 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
  • 3
    4 右クリック出来るのに、コピペ出来ないWebページ。2020 年 | ブラウザ 3
    5 Chromeブックマーク ショートカット | Chromeブックマーク(ブラウザ) 2
    5 ユーザー個別の設定情報が格納されているレジストリキーを削除 2
    5 レスポンシブサイトにおけるスマホ表示用画像指定 2
    5 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 2
    5 画像 2
    5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
    5 Adobe Camera Raw 4.0 | Photoshop 2
    5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 2
    5 スキップリンク | アクセシビリティ(UI) 2
    5 画像素材 | 画像 2
    5 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
    5 CSS カテゴリー 2
    5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
    2026/11/1 5:05 更新