次の表は、主要なwebブラウザでのさまざまな機能のサポートを示しています。 ない限りは、バージョン番号表示のバージョン番号がサポートされた特徴です。
ファイル形式supportEdit
次の表は、ファビコンのイメージファイル形式のサポートを示しています。
- ^Safariは、バージョン12.0以降、非標準の
mask-icon
形式で単色SVGファビコンをサポートしています。,
さらに、このようなアイコンファイルは次のようになります16×16, 32×32, 48×48, または64×64ピクセルのサイズ、および8ビット、24ビット、または32ビットの色深度。 ICOファイル形式の記事では、さまざまなMicrosoft Windowsプラットフォームで256色以上のアイコンの詳細を説明しています。
faviconEditの使用
この表は、faviconを表示できるブラウザのさまざまな領域を示しています。
Opera Softwareは、Opera10の短縮ダイヤルでファビコンを変更する機能を追加しました。,
How to useEdit
この表は、webブラウザでファビコンを認識できるさまざまな方法を示しています。 標準実装では、ドキュメントのrel
属性を持つlink要素を使用して、<head>
セクションでファイル形式、名前、および場所を指定します。
- ^Firefoxは、
favicon.ico
ウェブサイトのルートで<link>
タグなしでbrowser.chrome.site_icons
の設定がtrue
に設定されている場合にのみ受け入れますtrue
about:config
., デフォルト値はtrue
です。false
に設定されている場合、これらのファビコンは無視されます。 - ^Operaは、
/favicon.ico
Multimedia/Always load favicon
opera:config
のオプションが1
に設定されている場合にのみ、Multimedia/Always load favicon
をロードします。 詳細はOperaサポートページを参照してください。
PNGとICOの両方のファビコンのリンクがある場合、PNG-favicon互換のブラウザは、使用する形式とサイズを次のように選択します。 FirefoxとSafariは最後に来るファビコンを使用します。, Mac用Chromeは、ICOフォーマットのファビコン、それ以外の場合は32×32ファビコンを使用します。 Windows用のChromeは、16×16の場合は最初に表示されるファビコンを使用し、それ以外の場合はICOを使用します。 前述のオプションのいずれも利用できない場合、両方のChromesはfirefoxとSafariの正反対のfaviconが最初に来るものを使用します。 実際、Mac用Chromeは16×16ファビコンを無視し、32×32バージョンを使用しますが、非retinaデバイスでは16×16にスケールダウンするためにのみ使用されます。 Operaは完全にランダムに利用可能なアイコンのいずれかから選択します。,
SeaMonkeyのみがデフォルトでwebサイトのルートにあるfavicon.ico
ファイルを取得しません。
デバイスサポートディレクトリ
iOSオペレーティングシステムのバージョン1.1.3以降を搭載したAppleデバイスおよび一部のAndroidデバイスでは、Safariの共有シート内の[ホーム画面に追加]ボタンを使用して、ユーザーがホーム画面に表示できるカスタムアイコンを提供することができます。, この機能は、webサイトが提供するドキュメントの<link rel="apple-touch-icon" ...>
<head>
セクションに<head>
を指定することで有効になります。 カスタムアイコンが提供されていない場合は、webページのサムネイルが代わりにホーム画面に表示されます。
このアイコンの推奨基本サイズは152×152ピクセルです。
iPadの場合、基本サイズは180x180ピクセルです。 Androidタブレットは192x192PNGアイコンを好む。
apple-touch-icon
によって参照されるアイコンファイルが丸い角を追加するように変更されました。, IOS7より前のバージョンのiOSでは、ドロップシャドウと反射シャインが追加され、apple-touch-icon-precomposed
アイコンが提供され、デバイスに画像に反射シャインを適用しないように指示することができます。
iOSによって追加された角の丸い
<link rel="apple-touch-icon" href="https://example.com/image.png">
これらのアイコンを取得するためにブラウザやモバイルデバイスではHTMLは必要ありません。 ウェブサイトのルートは、ファイルのデフォルトの場所ですapple-touch-icon.png
(優先順位の順)。,
複数のサイズのアイコンに対するHTML5の推奨事項edit
現在のHTML5仕様では、rel="icon" sizes="space-separated list of icon dimensions"
<link>
タグ内の属性を使用して、アイコンに複数のサイズを指定することを推奨しています。 Microsoftなどのコンテナ形式を含む複数のアイコン形式。icoとマッキントッシュ。icnsファイル、およびスケーラブルなベクターグラフィックスは、アイコンのコンテンツタイプをtype="file content-type"
<link>
タグ内に含めることによ,
iOS5以降、AppleモバイルデバイスはHTML5の推奨事項を無視し、代わりに上記の独自のapple-touch-icon
メソッドを使用します。 ただし、Google Chrome webブラウザは、ユーザーがアプリケーションの作成ショートカットを選択すると、HTMLヘッダーで提供されているものから最も近い一致するサイズを選.. “ツール”メニューから。
Animated faviconsEdit
Chrome、Firefox、Operaなどのさまざまなブラウザがfaviconのアニメーションをサポートしています。, バグレポートは、機能を無効にする方法を要求する2001年以来、Firefoxのために開かれています。
コメントを残す