mashable.comのファビコン
- 14合格
- 7警告
- 9不足
- 4任意
mashable.comのメインのファビコンはfavicon-32x32.jpgで、32×32のWebPファイル(652 B)です。アイコンファイルは5件見つかり、合計は8.7 KBです。Google検索で使えるアイコンはありません。サイトのスコアは100点満点中47点で、合格14件、警告7件、不足9件です。不足: favicon.ico、JPG 512×512、SVGファビコンほか6件。
表示イメージ
見つかったファイルから生成しています。
ダークテーマのタブでもアイコンが見えるか確認してください。
iOSにはPNGが必要です。このファイルはWebPです。
マニフェストにアイコンがないため、Androidはスクリーンショットか頭文字を使います。
マニフェストに512 pxのアイコンがないため、インストールのプロンプトもスプラッシュ画面も表示されません。
mashable.comのファビコンファイル一覧
5件検出| ファイル | 検出元 | 形式 | サイズ | 容量 |
|---|---|---|---|---|
| favicon.svg | rel="mask-icon" | SVG | ベクター | 982 B |
| favicon-16x16.jpg | rel="icon" | WebP | 16×16 | 250 B |
| favicon-32x32.jpg | rel="icon" | WebP | 32×32 | 652 B |
| apple-touch-icon.jpg | rel="apple-touch-icon" | WebP | 180×180 | 3.3 KB |
| android-chrome-192x192.jpg | rel="icon" | WebP | 192×192 | 3.6 KB |
従来のファビコン
警告 3件 · 不足 2件favicon.ico
不足GET /favicon.ico – 見つかりません
- HTTP
- 200
HTMLで別のアイコンを宣言していても、ブラウザー、RSSリーダー、多くのクローラーは/favicon.icoをリクエストします。このURLは画像を返していません(image/x-icon)。
WebP 16×16
警告<link rel="icon" type="image/jpg" href="/favicons/favicon-16x16.jpg" sizes="16x16">
- 宣言値
- 16×16
- 実際の値
- 16×16
- 形式
- WebP
- ファイルサイズ
- 250 B
- HTTP
- 200
- Content-Type
- image/webp
type属性はimage/jpgですが、ファイルはWebPです。
WebP 32×32
警告<link rel="icon" type="image/jpg" href="/favicons/favicon-32x32.jpg" sizes="32x32">
- 宣言値
- 32×32
- 実際の値
- 32×32
- 形式
- WebP
- ファイルサイズ
- 652 B
- HTTP
- 200
- Content-Type
- image/webp
type属性はimage/jpgですが、ファイルはWebPです。
WebP 192×192
警告<link rel="icon" type="image/jpg" href="/favicons/android-chrome-192x192.jpg" sizes="192x192">
- 宣言値
- 192×192
- 実際の値
- 192×192
- 形式
- WebP
- ファイルサイズ
- 3.6 KB
- HTTP
- 200
- Content-Type
- image/webp
type属性はimage/jpgですが、ファイルはWebPです。
JPG 512×512
不足<link rel="icon" type="image/jpg" href="/favicons/android-chrome-512x512.jpg" sizes="512x512">
- HTTP
- 404
ファイルがHTTP 404を返しています。
SVGアイコン
不足 1件SVGファビコン
不足<link rel="icon" type="image/svg+xml" href="…"> – 見つかりません
SVGアイコンはどのサイズでも鮮明に表示され、ダークテーマのブラウザーでは色も切り替えられます。
Apple
合格 1件 · 警告 1件Apple touch icon
警告<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.jpg">
- 宣言値
- 180×180
- 実際の値
- 180×180
- 推奨
- 180×180
- 背景
- 未計測
- ファイルサイズ
- 3.3 KB
- HTTP
- 200
iOSにはPNGが必要です。このファイルはWebPです。
Safariのピン留めタブ(mask-icon)
合格<link rel="shortcut icon mask-icon" href="/favicons/favicon.svg">
- 色
- 未設定
- ファイルサイズ
- 982 B
旧仕様です。Safari 12以降は通常のファビコンを使います。
Webアプリマニフェスト
合格 1件manifest.json
合格<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
- HTTP
- 200
- Content-Type
- application/json
- JSON
- 有効
- ファイルサイズ
- 468 B
- 同一オリジン
- はい
- キャッシュ
- 30分
マニフェストのフィールド
合格 5件 · 警告 1件 · 不足 3件 · 任意 1件- nameMashable
- short_nameMashable
- start_urlインストールしたアプリの起動時に開くページです。未設定
- displaystandalone
- theme_color#ffffff
- background_color#ffffff
- icons · 192×192ファイルがHTTP 404を返しています。リンク切れ
- icons · 512×512ファイルがHTTP 404を返しています。リンク切れ
- icons · purpose: maskableないと、Androidは通常のアイコンを縮小して白い円の上に置きます。なし
- id未設定
Google検索
合格 1件 · 警告 1件 · 不足 2件- 対応しているファイル形式GoogleがサポートするのはBMP、GIF、ICO、PNG、JPEG、PPM、TIFFで、SVGとWebPは含まれません。PNGかICOも合わせて宣言してください。WebP
- 正方形で8×8 px以上Googleには正方形(1:1)のアイコンが必要です。正方形のアイコンなし
- 48×48 pxより大きいGoogleは、鮮明に表示するため48×48 pxより大きいサイズを推奨しています。宣言済みの96×96 PNGか、180 pxのApple touch iconで条件を満たせます。–
- トップページで宣言されているはい
メタタグと旧仕様
合格 1件 · 任意 3件- theme-color#00aeef
- ダークモード用のtheme-colormedia="(prefers-color-scheme: dark)"未設定
- msapplication-TileColorWindowsのタイル用。旧仕様です。未設定
- browserconfig.xmlWindowsのタイル用。旧仕様です。なし
配信とパフォーマンス
合格 5件 · 警告 1件 · 不足 1件- すべてのアイコンがHTTPS5件中5件
- 混在コンテンツなしhttp://リンク 0件
- リンク切れなし/favicons/android-chrome-512x512.jpg, /android-chrome-192x192.png, /android-chrome-512x512.pngエラー 3件
- キャッシュヘッダーアイコンはほとんど変わらないため、1日以上キャッシュさせてください。5件中0件 · 1日以上
- アイコンの合計容量8.7 KB
- リダイレクト0
- 重複するタグなし
<head>内のアイコンタグ
<link rel="shortcut icon mask-icon" href="/favicons/favicon.svg"> <link rel="icon" type="image/jpg" href="/favicons/favicon-16x16.jpg" sizes="16x16"> <link rel="icon" type="image/jpg" href="/favicons/favicon-32x32.jpg" sizes="32x32"> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.jpg"> <link rel="icon" type="image/jpg" href="/favicons/android-chrome-192x192.jpg" sizes="192x192"> <link rel="icon" type="image/jpg" href="/favicons/android-chrome-512x512.jpg" sizes="512x512"> <link rel="manifest" href="/manifest.json" crossorigin="use-credentials"> <meta name="theme-color" content="#00aeef">
mashable.comのファビコンに関するQ&A
mashable.comのファビコンはどこにありますか?
メインのファビコンはhttps://mashable.com/favicons/favicon-32x32.jpgにあります。
mashable.comのファビコンのサイズは?
favicon-32x32.jpgは32×32です。サイト内で最も大きいラスターアイコンはandroid-chrome-192x192.jpgで、192×192 pxです。
Google検索でmashable.comのファビコンは表示されますか?
現状では表示されません。Googleには、トップページで宣言された、ICO、PNG、GIF、JPEG、BMPのいずれかの正方形のアイコンが必要です。
mashable.comにApple touch iconとmaskableアイコンはありますか?
Apple touch iconは180×180です。マニフェストにmaskableアイコンがないため、Androidは通常のアイコンを縮小して白い円の上に置きます。