favicon.ico の問題

HTML

目次一覧

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

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

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

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



週間人気ページランキング / 4-2 → 4-8
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 14
2 RGB ⇔ Lab | 色変換(色) 10
3 色 カテゴリー 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
3 効果を打ち消すスタイルシート | CSS 8
4 16進数カラーコード / 2進数 6
5 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 5
6 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
7 鉄道会社毎のカラーコード | カラーコード(色) 3
7 「Bootstrapデザイン」✕「円グラフ」解析 | 2系(Bootstrap) 3
8 cluster | タブ系(Chrome 拡張機能) 2
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
8 画像系ソフトウェアに求める機能 / 各ソフトウェアにおける「既存画像の自動補正」実行例 / 2019年7月8日時点の結論 2
8 HTMLエディタ カテゴリー 2
9 画面キャプチャ 2022 年 | Chrome 拡張機能 1
2025/4/9 1:01 更新