---
title: "共有ページにファビコンを設定する方法"
description: "ブラウザのタブやブックマークに表示されるファビコンは、複数タブを開いたときにページを見分けやすくする重要な要素です。共有ページへのファビコン設定手順と、設定しても表示されないときの確認方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/set-favicon-howto"
markdown: "https://giga-site.com/articles/set-favicon-howto/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 共有ページにファビコンを設定する方法

ブラウザのタブやブックマークに表示される小さなアイコンがファビコンです。設定しておくと、複数のタブを開いていてもページを見分けやすくなり、サイト全体の見た目の完成度も上がります。この記事では、共有ページにファビコンを設定する手順と、表示されないときの注意点をまとめます。

> Source HTML: https://giga-site.com/articles/set-favicon-howto
> Article index: https://giga-site.com/articles/index.md

## ファビコンの役割

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

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

ファビコンは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が付き検索には出ませんが、これは閲覧制限ではありません。限定して見せたいページは認証を併用してください。

## よくある質問

### ファビコンはどんな画像を用意すればよいですか。

正方形で、小さく縮小しても識別できるシンプルな図柄が向きます。細かいデザインは潰れて見えにくくなるため、ロゴの一部や単純な図形が適しています。

### 設定したのにタブにアイコンが出ません。

ブラウザがファビコンを強くキャッシュするため反映が遅れることがあります。タブを開き直すかキャッシュを消し、それでも出ない場合はhrefのパスと画像の配置場所を確認してください。

### ZIPで公開する場合、アイコン画像はどこに置きますか。

ZIPにアイコン画像を含め、HTMLのlink要素からそのパスを参照します。ギガサイト便ではZIP内の画像もCDN経由でHTTPS配信されるため、共有先でも安定して表示されます。

### アイコンを後から変えられますか。

ギガサイト便は同じURLのままファイルを差し替えられます。アイコン画像を入れ替えて再アップロードすれば、リンクを送り直さずにファビコンを更新できます。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [ページタイトルと説明文を設定する方法](https://giga-site.com/articles/set-page-title-description/index.md)
- [誰が共有ページを開いたかアクセスログで確認する方法](https://giga-site.com/articles/access-log-check-who-opened/index.md)
- [OGP画像を設定してSNSのサムネを整える方法](https://giga-site.com/articles/set-ogp-image/index.md)
- [公開を始める日と終わる日を指定して共有する方法](https://giga-site.com/articles/set-publish-start-and-end/index.md)
- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "共有ページにファビコンを設定する方法",
  "description": "ブラウザのタブやブックマークに表示されるファビコンは、複数タブを開いたときにページを見分けやすくする重要な要素です。共有ページへのファビコン設定手順と、設定しても表示されないときの確認方法を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/set-favicon-howto",
  "url": "https://giga-site.com/articles/set-favicon-howto",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ファビコンはどんな画像を用意すればよいですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "正方形で、小さく縮小しても識別できるシンプルな図柄が向きます。細かいデザインは潰れて見えにくくなるため、ロゴの一部や単純な図形が適しています。"
      }
    },
    {
      "@type": "Question",
      "name": "設定したのにタブにアイコンが出ません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザがファビコンを強くキャッシュするため反映が遅れることがあります。タブを開き直すかキャッシュを消し、それでも出ない場合はhrefのパスと画像の配置場所を確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ZIPで公開する場合、アイコン画像はどこに置きますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ZIPにアイコン画像を含め、HTMLのlink要素からそのパスを参照します。ギガサイト便ではZIP内の画像もCDN経由でHTTPS配信されるため、共有先でも安定して表示されます。"
      }
    },
    {
      "@type": "Question",
      "name": "アイコンを後から変えられますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便は同じURLのままファイルを差し替えられます。アイコン画像を入れ替えて再アップロードすれば、リンクを送り直さずにファビコンを更新できます。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```