ファビコンとは、ブラウザのタブやブックマークにある Web サイトを識別する小さな画像です。名前の由来は「お気に入りのアイコン」。これにより、タブが狭すぎてタイトルが表示できない場合でも、開いているページの中からサイトを視覚的に見つけることができます。検索エンジンは、結果の横にサイトのファビコンを表示することもできます。 MDN のファビコン定義では、これらの一般的なブラウザの使用法について説明しています。
SearchVectorのオレンジ色のセグメント円は一例です。表紙の図では、実際のアイコン アセットを使用して、画像ファイル、ページの HTML、ブラウザー間の接続を説明しています。検索結果のスクリーンショットではなくティーチング図です。
実装する準備はできましたか? HTML セットアップ または アイコンが見つからないトラブルシューティング.
に移動します。ファビコン、ロゴ、ソーシャルイメージ:どれがどれです���?
ロゴは、ビジネスの広範な視覚的アイデンティティです。シンボル、フルネーム、キャッチフレーズが含まれる場合があります。ファビコンはそのアイデンティティの小さな応用であり、通常は小さなサイズでも認識可能な簡略化されたシンボルです。ワードマーク全体を縮小すると、文字が区別できなくなることがよくあります。
| アセット | メインジョブ |
|---|---|
| ファビコン | ブラウザタブでページを識別するか、ブックマーク |
| ヘッダーロゴ | ページレイアウト内のブランドを識別 |
| ソーシャルプレビュー画像 | 大きな画像で共有リンクを示します |
| ホーム画面アイコン | 保存されたWebサイトまたはインストールされているWebアプリを表しますデバイス |
ヘッダーロゴを変更しても、ファビコンが更新されるとは限りません。これらは、異なる設定によって制御される個別のファイルである場合があります。同様に、ソーシャル プレビュー画像を置き換えても、欠落しているタブ アイコンは修復されません。まず間違っているサーフェスを特定し、それを提供する設定を見つけます。
小さいサイズでも生き残るアイコンを選択
まずは正方形のキャンバスとシンプルなシルエットから。大きなソース イメージをエクスポートし、実際のデザイン チェックとして 16×16 および 32×32 でプレビューします。これらのプレビューは読みやすさをテストします。これらは、すべてのブラウザがアイコンを 1 つの固定サイズでレンダリングするという主張ではありません。消えたストローク、混雑したレタリング、タブの背景と融合した透明な領域を探してください。
明るい背景と暗い背景の両方でマークを確認してください。薄い暗い輪郭は暗いタブでは消えることがあり、淡いシンボルは明るいタブでは消えることがあります。意図的にコントラストを持たせた立体的な形状は、多くの場合、認識しやすくなります。色だけに依存しないでください。アイコンが視覚的に似ている場合でも、独特の輪郭が役に立ちます。
チームが編集できるソース ファイルを保存してください。ぼやけたサムネイルの大きなコピーをエクスポートしても、その詳細は復元されません。ブランド変更の場合は、メイン ロゴの横にある小さなアイコンを承認して、Web サイト、ブックマーク、保存されたショートカットが関連していると感じられるようにします。
実際のHTMLサンプルを使用してファビコンを追加
SearchVectorは、実際の 512×512 PNG を のファビコン画像 URLで提供します。この最小限の宣言は、SearchVector サイトの既存の資産を指します:
<リンク rel="アイコン"
href="/favicon.png"
type="画像/png"
size="512x512">宣言をドキュメントの内に記述します。ルート相対パスは現在のホスト名から解決されます。SearchVector では、SearchVector から /favicon.png を要求します。あなたのドメインでは、あなたのドメインからそのファイルをリクエストします。独自のサイトの場合は、独自のブランド アセットをアップロードし、その実際のパスを使用します。画像をアップロードせずにタグをコピーすると、壊れた参照が残ります。
rel属性は、リソースをアイコンとして識別します。 hrefは画像の場所を示し、typeはその形式を記述し、sizesは画像の寸法を記述します。 「512x512」と書いてもファイルのサイズは変更されません。エクスポートされた画像を検査し、宣言を正確に保ちます。
SearchVectorでは、SVG と ICO の代替案も宣言されています。ブラウザは、MDN のアイコン リンク リファレンスで説明されているように、タイプやサイズなど���属性を使用してアイコン宣言を選択できます。したがって、複数の宣言が自動的に問題になるわけではありませんが、古い代替案が矛盾した外観を説明する可能性があります。
CMS を使用している場合は、サイトアイコンの設定から始めます。フレームワークを使用する場合は、そのフレームワークで確立されたメタデータ メカニズムを使用します。次に、結果の HTML を検査します。管理画面でのアップロードの成功は、ジョブの一部にすぎません。既存のテンプレートが既に出力している内容を確認する前に、競合する 2 番目の設定を追加することは避けてください。
検索結果にGoogleが必要なもの
Googleのファビコンのドキュメントでは、少なくとも8×8ピクセルの正方形の画像が必要であり、48×48より大きい画像を推奨しています。リストされている形式には PNG と ICO が含まれます。ブラウザで動作する SVG が、Google の検索プレゼンテーションでのサポートを確立すると想定しないでください。���T26｠
ホームページはアイコンを宣言する必要があります。 Googlebot はそのホームページにアクセスする必要があり、Googlebot-Image はアイコン ファイルにアクセスする必要があります。アイコンの URL は固定し、サイトを表すマークを使用してください。 Google はホスト名ごとに 1 つのファビコンをサポートします。サブドメインは独自のファビコンを持つことができますが、サブディレクトリは別個の検索ファビコンを取得しません。
応募資格は展示を保証するものではありません。変更後、Google はホームページを再クロールして処理する必要があります。ドキュメントには、これには数日から数週間かかる可能性があると記載されています。サイト所有者は、URL 検査を通じてホームページのインデックス作成をリクエストできます。画像の名前を繰り返し変更することは、アクセスをチェックして処理時間を確保する代わりには役に立ちません。
ファビコンが見つからない、または古���場合のトラブルシューティング
HTML が何を宣言するか、画像 URL が何を返すか、ブラウザが何を表示するかという 3 つの観察を分離します。それらの間の不一致により、どこを調査すべきかが分かります。複数の設定を一度に変更するのではなく、ページ URL、アイコン URL、および結果を簡単に記録しておいてください。
| 症状 | 次へcheck | |
|---|---|---|
| どのページにもアイコンがない | アイコン宣言がないかヘッドを検査します。画像 URL を直接開きます | |
| ホームページは機能しますが、記事は機能しません | テンプレートとルート相対とページ相対を比較しますパス: T57:ウェブページ | リダイレクト、アクセス チャレンジ、またはフォールバック HTML 応答を確認します |
| ブラウザは動作しますが、検索は動作しません | ホームページ宣言、クロールアクセス、検索資格を個別に確認 |
サーバーがログイン ページまたは汎用 HTML フォールバックを送信する場合、200 というラベルの付いた応答では不十分です。ブラウザの [ネットワーク] パネルで、アイコン リクエストの最終 URL、応答コンテンツ タイプ、およびプレビューを検査します。 PNG は実際には PNG としてデコードされる必要があります。また、オリジンが更新された後も CDN が古いファイルを提供しているかどうかも確認してください。
キャッシュを調査するには、画像を直接開き、新しいブラウザ プロファイルと比較します。キャッシュをクリアすると原因の特定に役立ちますが、Web サイトが機能するためにユーザーが特別なリセットを実行する必要はありません。ローカル更新を永続的な修正として扱う前に、デプロイされたアセットとキャッシュ構成を確認してください。
実際の例: ネストされたページのアイコンが失われます
ホームページには正しいアイコンが表示され、/blog/の記事には表示されない架空のサイトを考えてみましょう。どちらのテンプレートにも、先頭のスラッシュのないhref="favicon.png"が含まれています。ベース URL オーバーライドがないと仮定すると、その相対パスは現在のページの横で解決されます。記事の別の場所をリクエストしているときにルートで動作する可能性があります。
開発者が記事のアイコン リクエストを開くと、画像の代わりにサイトの HTML フォールバックが���されることがわかりました。修正方法は、サイトのルートに画像が存在することを確認し、共有宣言をhref="/favicon.png"に変更することです。その後、ホームページや記事を再度チェックします。両方とも同じアセットを要求するようになりました。
これは実際に実行された診断例であり、報告されたSearchVectorインシデントではありません。その教訓は、アートワークを置き換える前に、要求された URL を検査する��とです。ネストされたテンプレートが間違ったファイルを要求した場合、完全に有効な画像は役に立ちません。
タスクを閉じる前の最終チェック
- ホームページとネストされたページを 1 つ開きます。両方とも意図したアイコンを宣言していることを確認します。
- 宣言されたそれぞれの代替案を開いて、それが現在のブランドに属していることを確認します。
- 認証や HTML フォールバックなしで意図した画像が読み込まれることを確認します。
- 明るいブラウザと暗いブラウザで小さなアイコンを検査します
- Googleの適格性を個別に確認し、変更を記録し、処理時間を許容します。
より広範な Web サイトのレビューについては、SearchVector の Website Checker またはその Web Page Crawler を続けてください。上記の直接画像と HTML チェックをファビコンの証拠として保管してください。一般的なページのレビューでは、検索エンジンがあなたのブランドをどのように��示するかは保証されません。
完成したファビコン タスクには、認識可能な画像、正しい宣言、およびページ テンプレート全体の作業リソース URL が含まれています。まずそれらの具体的な部分を確認してください。その後、遅延した更新と壊れたブラウザの実装を混同することなく、検索の表示を監視します。
