.png/500px-Wikipedia_favicon_in_Firefox_on_KDE_(2023).png)
ファビコン(/ ˈ f æ v . ɪ ˌ k ɒ n / ;お気に入りアイコンの略)は、ショートカットアイコン、ウェブサイトアイコン、タブアイコン、URLアイコン、ブックマークアイコンとも呼ばれ、特定のウェブサイトまたはウェブページに関連付けられた1つ以上の小さなアイコン[1]を含むファイルです。[1] [2]ウェブデザイナーはこのようなアイコンを作成し、いくつかの方法でウェブサイト(またはウェブページ)にアップロードすることができ、グラフィカルウェブブラウザはそれを利用します。[3]ファビコンをサポートするブラウザは通常、ブラウザのアドレスバー(履歴にも表示されることがあります)とブックマークのリストのページ名の横にページのファビコンを表示します。[3]タブ付きドキュメントインターフェイスをサポートするブラウザは通常、タブのページタイトルの横にページのファビコンを表示し、サイト固有のブラウザはファビコンをデスクトップアイコンとして使用します。[1]
歴史
1999 年 3 月、マイクロソフトはInternet Explorer 5をリリースし、初めてファビコンをサポートしました。[4]もともと、ファビコンはウェブサイトのルート ディレクトリに配置されると呼ばれるファイルでした。これは、 Internet Explorerのお気に入り(ブックマーク) で使用され、ページがブックマークされている場合はアドレス バーのURLの横に表示されました。 [5] [6] [7] [4]副作用として、ファビコンのリクエストによって、ページをブックマークした訪問者の数を推定できました。この副作用はもはや機能せず、サイトがブックマークされているかどうかに関係なく、すべての最新のブラウザーがファビコン ファイルを読み込み、ウェブ アドレス バーに表示します。[6]favicon.ico
標準化
2003年に、この.ico形式は第三者によってインターネット割り当て番号機関(IANA)にMIMEタイプ image/vnd.microsoft.iconとして登録されました。[8] [9]ただし、この.ico形式を使用して画像として表示する場合(つまり、ファビコンとしてではない場合)、Internet Explorerはこの標準化されたMIMEタイプで提供されるファイルを表示できません。[9] Internet Explorerの回避策は、 Webサーバーで.ico非標準のMIMEタイプを関連付けることですimage/x-icon。[10]
RFC 5988はIANAリンク関係レジストリを確立し、[11] HTML5rel="icon"仕様に基づいて2010年に登録されました。は理論的にはと の2つの関係を識別しますが、は登録されておらず、冗長です。 2011年にHTMLリビングスタンダード[12]は歴史的な理由から の直前に が許可されると規定しました。[13]ただし、 はこの文脈では意味を持ちません。
<link rel="shortcut icon" type="image/png" href="image/favicon.png">shortcuticonshortcutshortcuticonshortcut
遺産
Internet Explorer 5~10はICOファイル形式のみをサポートしています。Netscape 7およびInternet Explorerバージョン5および6では、それ以降のブラウザのようにページにアクセスしたときにのみファビコンが表示されるのではなく、ページがブックマークされているときにのみファビコンが表示されます。[4]
ファビコンの例
-
X (旧Twitter)
ブラウザ実装
次の表は、主要な Web ブラウザーでのさまざまな機能のサポートを示しています。特に記載がない限り、バージョン番号はサポートされている機能の開始バージョン番号を示します。
画像ファイル形式のサポート
次の表は、ファビコンの 画像ファイル形式のサポートを示しています。
さらに、このようなアイコンファイルのサイズは16×16、32×32、48×48、または64×64ピクセル、色深度は8ビット、24ビット、または32ビットにすることができます。[1] [3] ICOファイル形式の記事では、さまざまなMicrosoft Windowsプラットフォームでの256色を超えるアイコンの詳細について説明しています。
ファビコンの使用
この表は、ファビコンを表示できるブラウザのさまざまな領域を示しています。
Opera SoftwareはOpera 10でスピードダイヤルのファビコンを変更する機能を追加しました。[30]
使い方
この表は、Web ブラウザがファビコンを認識するさまざまな方法を示しています。標準的な実装では、ドキュメントのセクションに属性を持つリンク要素を使用して、ファイルの形式、名前、および場所を指定します。
rel<head>
- ^ Safari はバージョン 12.0 以降、非標準のマスク アイコン形式で単色の SVG ファビコンをサポートする場合があります。
- ^ Firefox は、で に設定されている場合のみ、タグ
favicon.icoなしのウェブサイトのルートでを受け入れます。デフォルト値は です。 に設定されている場合、これらのファビコンは無視されます。<link>browser.chrome.site_iconstrueabout:configtruefalse - ^ Opera は、オプションがに設定されている
/favicon.ico場合にのみ読み込まれます。詳細については、Opera サポート ページを参照してください。Multimedia/Always load faviconopera:config1
PNG と ICO の両方のファビコンへのリンクがある場合、PNG ファビコン対応ブラウザは、次のようにして使用する形式とサイズを選択します。Firefox と Safari は、最後に表示されるファビコンを使用します。Chrome for Mac は、ICO 形式のファビコンを使用し、そうでない場合は 32×32 のファビコンを使用します。Chrome for Windows は、16×16 の場合は最初に表示されるファビコンを使用し、そうでない場合は ICO を使用します。上記のオプションがいずれも利用できない場合は、Chrome は Firefox や Safari と正反対に、最初に表示されるファビコンを使用します。実際、Chrome for Mac は 16×16 のファビコンを無視し、32×32 バージョンを使用しますが、非 Retina デバイスでは 16×16 に縮小されます。Opera は、利用可能なアイコンからランダムに選択します。[33]
SeaMonkeyだけが、デフォルトではウェブサイトのルートにあるファイルを取得しませんfavicon.ico。[34]
複数のサイズのアイコンに対する HTML5 の推奨事項
現在のHTML5仕様では、タグ内の属性を使用してアイコンに複数のサイズを指定することが推奨されています。[35] Microsoft .icoやMacintosh .icnsファイルなどのコンテナ形式やスケーラブルベクターグラフィックスを含む複数のアイコン形式は、タグ内の形式にアイコンのコンテンツタイプを含めることで提供できます。
rel="icon" sizes="space-separated list of icon dimensions"<link>type="file content-type"<link>
iOS 5以降、Apple のモバイル デバイスは HTML5 の推奨事項を無視し、代わりにapple-touch-icon以下に詳述する独自の方法を使用します。ただし、 Google Chrome Web ブラウザは、ユーザーが[ツール] メニューから [アプリケーション ショートカットの作成...] を選択すると、HTML ヘッダーで提供されるサイズから最も近いサイズを選択して、128×128 ピクセルのアプリケーション アイコンを作成します。
モバイルデバイスのホーム画面アイコン
Apple iPhoneやiPad、Androidモバイル デバイスでは、ユーザーは Web ページをショートカット アイコンとしてホーム画面にピン留めできます。これらのショートカット アイコンは通常のアプリに似ており、Web 開発者は専用のアイコンを提供できます。
Appleデバイス
iOSオペレーティングシステムバージョン1.1.3以降を搭載したAppleデバイスの場合、ユーザーはSafariの共有シート内の「ホーム画面に追加」ボタンを使用して、ウェブサイトをホーム画面にピン留めすることができます。 [36] [37]
これはどのウェブサイトでも機能します。しかし、iOS でショートカットをアイコンで表示するには、ウェブサイトが提供するドキュメントのセクション<link rel="apple-touch-icon" ...>にカスタムアイコンを提供する必要があります<head>。カスタムアイコンが提供されていない場合は、代わりにウェブページのサムネイルがホーム画面に表示されます。[38]
アプリアイコンのサイズはデバイスクラスによって異なります。アイコンの推奨サイズは、iPad(2011年発売のiPad 2まで)では152×152、Retinaディスプレイ搭載iPad( iPad 3以降)では167×167、iPhoneでは180×180です。一致するサイズのアイコンが提供されていない場合、iOSは最大のアイコンを選択しrel="apple-touch-icon"、自動的に拡大縮小します。[39]
- サンプルコード[40]
<!-- iPad の場合 -->
< link rel = "apple-touch-icon" type = "image/png" sizes = "167x167" href = "favicon-167x167.png" >
<!-- iPhone の場合 -->
< link rel = "apple-touch-icon" type = "image/png" sizes = "180x180" href = "favicon-180x180.png" >
で参照されているアイコンファイルは、apple-touch-icon角を丸くするように変更されています。iOS 7より前のiOSバージョンでは、ドロップシャドウと反射光沢が追加され、apple-touch-icon-precomposedデバイスに画像に反射光沢を適用しないように指示するアイコンが提供される場合があります。[37] [38]
これらのアイコンを取得するためにブラウザやモバイルデバイスでHTMLは必要ありません。[38]ウェブサイトのルートがファイルのデフォルトの場所ですapple-touch-icon.png(優先順位順)。[37] [38]
Androidデバイス
Android デバイスでは、ユーザーはChromeのツール メニュー の[ホーム画面に追加]機能を使用して、Web ページをホーム画面に固定できます。
これはどのウェブサイトでも機能しますが、ファビコンが提供されていない場合は、汎用アイコンが使用されます。Androidアプリのアイコンのサイズは48x48ポイントであるため、ウェブサイトは48x48ピクセルの倍数のサイズのファビコンを提供する必要があります。最新の高解像度デバイスの場合、Googleは192x192ピクセルのアイコンを提供することを推奨しています。[41]
- サンプルコード[40]
<!-- Android の場合 -->
< link rel = "icon" type = "image/png" sizes = "48x48" href = "favicon-48x48.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "favicon-192x192.png" >
Android は Web マニフェスト ファイルもサポートしており、これにより Web サイトをシステム内に深く統合できます。Web マニフェストは JSON ファイルで、プログレッシブ Web アプリのメタデータを指定します。これにより、開発者はアイコンだけでなく、ホーム画面に表示する短い名前やテーマの色も提供できます。[42]ただし、ホーム画面に追加機能が動作するために Web マニフェスト ファイルを提供する必要はありません。 [40]
アニメーションファビコン
FirefoxやOperaなどのさまざまなブラウザはファビコンのアニメーションをサポートしています。この機能を無効にする方法を求めるFirefoxのバグレポートは2001年から公開されています。[43] [44]
限界と批判
ファビコンは常に固定された場所で確認する必要があるため、ファビコンが存在しない場合はページの読み込み時間が不自然に遅くなったり、サーバーログに不要な404エントリが記録されたりする可能性があります。[6]
W3Cはrel属性を標準化しなかったため、ショートカットアイコンなどの他のキーワードもユーザーエージェントで受け入れられます。[45] [20]
ファビコンは、 HTTPSウェブページに対するフィッシングや盗聴攻撃の一環としてよく操作されます。多くのウェブブラウザは、アドレスバーなどのウェブブラウザの UI の近くにファビコンを表示し、ウェブサイトへの接続が TLS などの安全なプロトコルを使用しているかどうかを伝えるために使用されます。ファビコンをなじみのある南京錠の画像に変更することで、攻撃者はユーザーをだまして適切なウェブサイトに安全に接続していると信じ込ませようとします。sslstripなどの自動化された中間者攻撃ツールはこのトリックを利用します。[46]これを排除するために、Firefox や Google Chrome などの一部のウェブブラウザでは、タブ内にファビコンを表示し、ウェブサイトへのアクセスに使用されたプロトコルのセキュリティ ステータスを URL の横に表示します。[47]
ファビコンは通常、サーバーのサイトディレクトリのルートに配置されているため、Webクライアントが特定のサービスにログインしているかどうかをある程度確実に明らかにするために使用できます。これは、多くのWebサイトのログイン後リダイレクト機能を利用して、ログイン後リダイレクトURLでファビコンを照会し、サーバーの応答をテストして、ユーザーに要求されたリソースが提供される(つまり、ログインしている)か、ログインページにリダイレクトされる(つまり、サービスにログインしていない)かを判断することで機能します。[48]
2021年には、イリノイ大学の研究者らがファビコンを使ったブラウザ追跡の手法を実証した。 [49]
参考文献
- ^ abcd Lane, Dave (2008 年 8 月 9 日). 「GIMP で透明度を含むマルチ解像度のファビコンを作成する」. Egressive.com . 2010 年 12 月 25 日時点のオリジナルよりアーカイブ。2011 年2 月 25 日閲覧。
- ^ 「Google の新しいミニアイコンとは?」 BBC。2009 年 1 月 20 日。2011年2 月 25 日閲覧。16
x 16 ピクセルの正方形は、問題のファビコンのサイズであり、範囲ではありません。
- ^ abc Apple, Jennifer. 「Favicon — Favicon.ico を作成する方法」。Photoshopsupport.com。2011年2 月 25 日閲覧。
- ^ abcdefghijkl 「Web ページにショートカット アイコンを追加する方法」 。Microsoft Developer Network。Microsoft。2018年 1 月 5 日時点のオリジナルよりアーカイブ。2010 年3 月 15 日閲覧。
- ^ McGrew, Darin (2007 年 4 月 26 日)。「Web オーサリング FAQ – 8.11. 自分のサイトをブックマークしたときにカスタム アイコンを表示するにはどうすればいいですか?」。htmlhelp.com。2011年2 月 23 日閲覧。
- ^ abc Heng, Christopher (2008 年 9 月 7 日). 「Favicon.ico とは? サイトのブックマークをカスタマイズする」 thesitewizard.com . 2011 年2 月 23 日閲覧。
- ^ 「Adobe Photoshop と GoLive でファビコンを作成する」。Adobe GoLive。2003年 12 月 7 日時点のオリジナルよりアーカイブ。2011年2 月 25 日閲覧。
{{cite web}}: CS1 メンテナンス: 不適切 URL (リンク) - ^ Butcher, Simon (2003 年 9 月 3 日)。「公開仕様」。Internet Assigned Numbers Authority。2011年2 月 25 日閲覧。
- ^ ab 「IE9 RC マイナーチェンジリスト」。IEInternals 。 2016年4月7日閲覧。
- ^ Irish, Paul (2010 年 12 月 15 日). 「commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate」. GitHub . 2011 年2 月 25 日閲覧。
- ^ 「リンク関係」IANA。
- ^ Ian Hickson (2011 年1月 19 日)。「HTML は新しい HTML5」。WHATWG ブログ。WHATWG 。
- ^ 「HTML 属性: rel - #icon」。
- ^ abc David (2003 年 7 月 19 日). 「Mozilla 0.9.6 リリースノート」. Mozilla . 2011 年2 月 23 日閲覧。
- ^ ab 「バグ 111373: アニメーション化されたサイトアイコン (ファビコン) を許可しない」 。2014年6 月 1 日閲覧。
- ^ Daniel Holbert (2015 年 6 月 12 日). 「バグ 366324 – SVG サイト アイコン (ファビコン、ショートカット アイコン) のサポート – コメント 55」。Bugzilla @Mozilla。Mozilla。2015年6月 12 日閲覧。
- ^ トラッカー、chromium。「ファビコンに動きがない」chromium.org 。 2016年4月11日閲覧。
- ^ トラッカー、chromium。「アニメーション化されたファビコンはサポートされていません」。chromium.org 。 2018年11月8日閲覧。
- ^ 「ファビコンでの SVG のサポート - Chrome プラットフォームのステータス」。2019 年 11 月 19 日。2020 年1 月 16 日閲覧。
- ^ abcdef Davis, Jeff (2007 年 12 月 27 日)。「なぜ私のサイトのファビコンが IE7 で表示されないのですか?」。jeffdav on code。Microsoft。2013年3月 11 日閲覧。
- ^ abcdef Eric Lawrence (2013年9月7日). 「Fun with Favicons」. Microsoft. 2021年5月23日時点のオリジナルよりアーカイブ。2022年6月25日閲覧。
- ^ 「SVG ファビコン サポート」。Microsoft Connect。2013 年 5 月 3 日。2014年9 月 4 日閲覧。
- ^ abcde 「Opera 7 for Windows 変更ログ」。Opera Software。2003 年 1 月 28 日。2011年2 月 28 日閲覧。
- ^ 「Opera の新機能」 Opera Software . 2017 年6 月 24 日閲覧。
- ^ 「Safari 12の機能を備えたSafari Technology Preview 58がリリースされました」。WebKit。2018年6月6日。 2019年3月3日閲覧。
- ^ 「Favicons. Finally」。Iconfactory。2018年6月7日。 2019年3月3日閲覧。
- ^ abcdefghijklmnopqrstu vwxyz aa Francis, Lewis (2007 年 12 月 11 日). 「最新ブラウザの favicon サポート状況の表」. informationgift.com . 2011 年2 月 23 日閲覧。
- ^ 「Firefox はファビコンを危険とみなし、アドレスバーから削除」Engadget 。 2012 年9 月 10 日閲覧。
- ^ 「Safari でファビコンを有効にしてタブ内のウェブサイトをグラフィカルに識別する方法」iDownloadBlog。2018 年 6 月 14 日。2020年10 月 14 日閲覧。
- ^ 「Opera 10.0 beta 2 for Windows の変更ログ」。Opera Software。2009 年 7 月 16 日。2011 年2 月 27 日閲覧。
- ^ 「IE9 RC マイナーチェンジリスト」。Microsoft。2011 年 2 月 11 日。2013 年11 月 16 日閲覧。
- ^ 「ピン留めされたタブアイコンの作成」。Apple Inc. 2016年12月12日。 2019年4月9日閲覧。
- ^ Jonathan T. Neal (2013年1月16日). 「ファビコンを理解する」。2013年5月23日時点のオリジナルよりアーカイブ。2013年5月30日閲覧。
- ^ Mathias Bynens (2010年4月14日). 「rel="shortcut icon" は有害であると考えられる」。2011年11月15日閲覧。
- ^ 「HTML Living Standard、セクション4.6.6.6 'リンクタイプ「アイコン」'」。WHATWG 。 2015年11月17日閲覧。
- ^ 「iPhone ウェブ アプリケーション向けヒューマン インターフェイス ガイドライン: メトリクス、レイアウト ガイドライン、およびヒント」。Apple Inc. 2010 年 6 月 4 日時点のオリジナルよりアーカイブ。2010年5 月 27 日閲覧。
- ^ abc 「Safari Webコンテンツガイド:WebクリップのWebページアイコンの指定」。Apple Inc. 2010年11月15日。2023年5月20日時点のオリジナルよりアーカイブ。2023年6月2日閲覧。
- ^ abcd McLellan, Drew (2008 年 1 月 17 日)。「あらゆるサイトに Apple Touch アイコンを設定する方法」。Allinthe head.com。2011年3 月 11 日閲覧。
- ^ 「Web アプリケーションの構成」。developer.apple.com。2021年7 月 3 日閲覧。
- ^ abc 「ウェブサイトにファビコンを追加する方法 - 最新ブラウザガイド」。Loqbooq Blog。2021年7月11日時点のオリジナルよりアーカイブ。2021年7月3日閲覧。
- ^ 「マテリアルデザイン」。マテリアルデザイン。 2021年7月3日閲覧。
- ^ 「ホーム画面に追加 - プログレッシブウェブアプリ(PWA) | MDN」。developer.mozilla.org 。 2021年7月3日閲覧。
- ^ 「バグ 111373 - アニメーション化されたサイトアイコン (ファビコン) を許可しない」。bugzilla.mozilla.org。2001 年 11 月 21 日。
- ^ 「Firefox Bug 111373 - アニメーションサイトアイコンを許可しない (mozilla.org)」。Hacker News。2015年7月7日。
- ^ Dubost, Karl (2005 年 10 月 24 日)。「サイトにファビコンを追加する方法」。World Wide Web Consortium。2011年2 月 25 日閲覧。
- ^ Marlinspike, Moxie (2011 年 2 月 21 日). 「Sslstrip を使用した SSL の無効化 (Marlinspike Blackhat)」(ビデオの説明を参照) . SecurityTube. 2011 年 7 月 13 日時点のオリジナルよりアーカイブ。2011 年7 月 9 日閲覧。
- ^ 「Firefox バージョン 14 の機能」。2012 年 7 月 18 日。2012年7 月 18 日閲覧。
- ^ Linus, Robin. 「あなたのソーシャル メディアの指紋」 。2016年10 月 14 日閲覧。
- ^ Goodin, Dan (2021年2月19日). 「新しいブラウザ追跡ハックは、キャッシュをフラッシュしたりシークレットモードで使用したりしても機能します」. Ars Technica . 2021年2月21日閲覧。
