favicon.ico の問題

HTML

目次一覧

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

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

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

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



週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新