favicon.ico の問題

HTML

目次一覧

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

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

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

 閲覧数:667 投稿日: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-10 → 4-16
順位 ページタイトル抜粋 アクセス数
1 Design 0 20
2 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 17
3 Chromeシークレットモードで、ウインドウ幅をリサイズしようとすると、下限制限を受ける | Google Chrome(ブラウザ) 16
3 「Default User」を削除したら、既存ブックマークが削除されてしまった! 16
4 Material Design 2014 年 | Material Design(色) 15
4 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 15
5 Adobe Camera Raw 4.0 | Photoshop 13
6 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 11
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
9 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 6
10 「.aiファイル」を下位バージョンで保存するための操作手順 / OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 / 下位バージョンのIllustratorで開く方法 5
10 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 5
10 鉄道会社毎のカラーコード | カラーコード(色) 5
11 画像縦横比の問題 | 画像 4
11 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
11 RGBの種類 / ビットカラー | RGB(色) 4
12 RGB ⇔ Lab | 色変換(色) 3
12 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
12 「bgcolor」「background-color」「background」の違い | CSS 3
2026/4/17 5:05 更新