アイコンは小さい図形で情報や操作を知らせるものです。家の形はトップへの移動、虫眼鏡は検索のように使われますが、形だけで全ての人へ同じ意味が伝わるとは限りません。重要な操作には「検索」「案内の先頭へ」のように文字を添えて、結果が分かるようにします。

ファビコンはブラウザーのタブなどに出るサイトの目印です。ページ内のボタンとして押すものとは役割が違います。さらにスマホのホーム画面へ追加したときの画像は、通常のrel=iconだけでは同じ条件にならない場合があります。MDNはiOSのホーム画面用の指定と通常のiconを区別しています。

架空の練習では、一つの家形マークをページ内の「案内の先頭へ」と、タブの目印に使います。実際のブランドのマークではありません。マークを置けば認知や検索順位が上がるという成果は約束できません。操作を助けたいのか、サイトを見分けたいのかを先に決めます。

この章の根拠：出典3出典2出典1

画像編集やベクター図形を作るソフトで、新規の正方形を作ります。架空例は256×256px（pxは画面や画像の大きさを表すピクセルという単位）の紺の角丸背景に、白い家形と一つの入口だけを描きます。背景が透明な細い黒線だけの絵は、タブの背景によって見えにくい場合があるため、明るい背景と暗い背景の両方で確認します。

作業用の元データを残し、公開用のPNG（小さな点の集まりで画像を保存する形式）をmark.pngへ書き出します。拡張子を変更するだけでは画像形式は変わりません。完成例の図形を再現したい場合は、次のSVG（線や図形を文字のコードで記す画像形式）をmark.svgとして保存して開き、画像編集ソフトでPNGへ書き出す方法もあります。PNGの書出し操作は使うソフトで確認してください。

16px、32px、64pxで形を比べ、入口や屋根がつぶれるなら細部を減らします。Google検索の現行ガイドは正方形・8px以上、48pxより大きい画像を推奨しています。ここでの256pxは作成例の選択です。小さい画像へ会社名の長い文字を入れるより、既存の識別用の形を簡略化できるかを検討します。

この章の根拠：出典1出典2

画像だけでトップへ戻るリンクを作る場合、代わりの文章は「家の絵」より「トップへ戻る」が目的に合います。W3CのFunctional Imagesは、機能を持つ画像の代替文で行動を伝えることを説明しています。操作の目的が、画像を見ない人にも届くようにします。

完成例は画像の隣へ「案内の先頭へ」と書きます。同じ意味が既に文字で読めるため、imgのaltは空にして重複を避けます。空のaltは画像の説明を全て省いてよい意味ではありません。写真だけで意味を伝える場所や、画像だけのリンクとは条件が違います。SVGを直接埋める場合も、装飾か意味を持つ画像かで扱いを判断します。

押せる領域を画像の16pxだけに限定しないでください。画像と文字を一つのリンクにし、操作できる枠と余白を含めて確認します。検索や削除のように結果が違う機能へ同じ形を使わず、同じ役割のアイコンの線幅や大きさはそろえます。見た目だけを変えてリンク先を取り違えないことも確認します。

この章の根拠：出典3

icon-demoフォルダーへmark.pngとindex.htmlを置き、次のHTMLを保存します。ブラウザーでHTMLを開くと、本文に家形の小さい見本が出ます。タブのアイコンはブラウザーのローカルファイルの扱いによって確認できない場合があるため、必要なら管理担当がローカルのHTTPサーバーで同じファイルを表示します。公開サイトへいきなり上書きしません。

head内のlinkは、hrefで画像の場所、typeでPNG、sizesで256×256を指定します。本文へimgを置くことと、タブ用の画像を指定することは別です。既存のWordPressはサイトアイコンを設定する管理機能やテーマが指定を作る場合があります。既存のlinkと重複して貼る前に、実際のテーマと設定場所を確認してください。

画像が出なければ、ファイル名、保存先、hrefやsrc、画像として直接開けるかを確認します。本文には出るがタブが古いままなら、既存の複数のicon指定やブラウザーの保存した画像が関係することがあります。タブ用の指定を短時間に何度もURL変更せず、変更前の画像と設定を記録して切り分けます。

この章の根拠：出典2出典3

Google検索では、ホームページと画像をGooglebotが読めること、サイトを表す画像であること、固定した画像URLなどの条件があります。2026年10月10日に確認した形式一覧にはPNGなどが示されています。本例ではPNGを使います。SVGをブラウザーで表示できることだけを、検索での対応の証拠にしないでください。

Googleはホスト名ごとにサイトを扱い、同じホスト名の下の別フォルダーごとに別のファビコンを設定できるものではありません。条件を満たしても検索で表示される保証はありません。タブの表示を確かめた結果と、検索結果で採用されたかの確認は別に記録します。順位や売上の効果を結び付ける根拠にはなりません。

無料素材を使う場合は、配布元の利用条件、商用利用、加工、表示義務、再配布の制限を読みます。「無料」という表示だけで全部許可とは判断しません。他社のロゴやアプリのマークを自社の目印へ転用せず、作成者と入手先を残します。公開環境の変更は担当者が元画像・設定・保存先を控え、失敗したら前の画像と設定へ戻せる状態で行います。

この章の根拠：出典1出典2出典3

完成例では家形のPNGを使い、ページ内は「案内の先頭へ」の文字を添え、タブはheadのlinkで指定しました。小さい寸法の見本も同じページに置きました。役割に合う文章を付け、画像が読めない場合でも操作の意味を残します。

確認表へ用途、形式、保存先、使用条件、確認した表示場所を残します。アプリのインストール用画像や通知の状態を表すアイコンなどへ広げる場合は、その環境の仕様も別に調べます。一つのファビコン設定で全ての場所をカバーしたとは扱わないでください。

この章の根拠：出典1出典2出典3