共有ページにファビコンを設定する方法

ファビコンの役割

ファビコンは、ブラウザのタブやブックマーク、履歴の横に表示される小さなアイコンです。サイトの顔として機能し、ユーザーが多数のタブの中から目的のページを素早く見つける助けになります。

設定していないと、ブラウザの初期アイコンや空白が表示され、やや未完成な印象を与えます。共有して見てもらうページなら、ファビコンがあるだけで丁寧な仕上がりに見えます。

ファビコンはHTMLのhead内で画像ファイルを指定して設定します。難しい仕組みではなく、画像とタグを用意するだけで反映できます。

ファビコン画像を用意する

まずアイコンに使う画像を準備します。小さく表示されるため、細かいデザインより、ひと目で識別できるシンプルな図形やロゴが向きます。

ブランドカラーや象徴的なマークを1つに絞ると、タブが小さくても認識されやすくなります。準備段階で押さえておきたい点を整理します。

• 正方形の画像を用意する
• 小さく縮小しても潰れない、シンプルな図柄にする
• 背景の有無（透過するか）を決めておく
• ファイルはページから到達できる場所に置く

最短手順：まずこの3ステップで完了

共有ページにファビコンを設定は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

HTMLに設定する手順

画像が用意できたら、HTMLのhead内にlink要素でファビコンを指定します。次の流れで進めます。

link要素はheadの中に置くのが基本です。relにiconを指定し、hrefで画像の場所を示すだけなので、コードの量はわずかです。

1. アイコン画像を公開ページ内のパスに配置する
2. HTMLのhead内に、rel属性をiconにしたlink要素を追加する
3. href属性にアイコン画像のパスを指定する
4. ページを開いてブラウザのタブにアイコンが出るか確認する
5. 出ない場合はキャッシュを消すか、別のブラウザでも確認する

表示されないときの対処

ファビコンはブラウザが強くキャッシュするため、設定直後に反映されないことがよくあります。タブを開き直したり、ブラウザのキャッシュを消したりすると表示されることがあります。

それでも出ない場合は、href指定のパスが正しいか、画像が実際にその場所にあるかを確認します。画像URLをブラウザで直接開いて、表示されるかを確かめると切り分けが早くなります。

ギガサイト便でファビコン付きページを共有する

ギガサイト便はCSS・JS・画像を含むZIPをドロップして公開できます。アイコン画像をZIPに含め、HTMLからlink要素で参照しておけば、〇〇.giga-site.com の共有ページにもファビコンが表示されます。

画像はCDN経由でHTTPS配信されるため、共有相手の環境でもアイコンが安定して読み込まれます。アイコンを差し替えたくなっても、同じURLのままファイルを差し替えられるので、リンクを送り直す必要はありません。

なお公開URLにはnoindexが付き検索には出ませんが、これは閲覧制限ではありません。限定して見せたいページは認証を併用してください。