ファビコンをHPに設定する方法｜HTML・保存場所・アップロードまで

ファビコン画像を作ってHPフォルダへ入れただけでは、ページに自動表示されるとは限りません。HTMLへ「どの画像をファビコンとして使うか」を書き、画像とHTMLを公開サーバーへ送る必要があります。

この記事で分かること

設定から公開までの全体の流れ
実際の画像保存場所
<head>と<link>の意味
PNGとICOの指定方法
画像パスの読み方
FFFTPで送るファイルと確認項目

ファビコン設定の全体の流れ

1ファビコン画像を作る正方形で、小さくても見える画像を準備
2HPフォルダへ保存決めた画像フォルダへ入れる
3HTMLで場所を指定head内のlinkタグに画像パスを書く
4サーバーへアップロード変更したHTMLと画像をFFFTPで送る
5ブラウザで確認PCとスマホで表示を見る

ファビコン画像をどこへ保存する？

実際のAIはじめノートでは、共通して使う画像をassets/images/common/へ保存しています。存在しないimagesフォルダを新しく作るのではなく、現在の構成をそのまま使います。

AI活用サイト_PC移行用_20260814
├─ index.html
├─ articles
│  ├─ index.html
│  └─ favicon-setting.html
├─ assets
│  └─ images
│     └─ common
│        ├─ favicon-512.png
│        ├─ favicon-32.png
│        ├─ favicon.ico
│        └─ apple-touch-icon.png
├─ style.css
└─ script.js

favicon-512.pngは大きめの元画像、favicon-32.pngは32×32pxのPNG、favicon.icoはICO形式、apple-touch-icon.pngはApple端末向けの画像です。

HTMLの<head>って何？

<head>は、ページに直接見える本文ではなく、ブラウザや検索エンジンへページ情報を伝える部分です。ページのタイトル、説明文、CSSの場所、ファビコンの場所などを書きます。

<html lang="ja">
<head>
  ページの情報やファビコン設定
</head>
<body>
  画面に表示する本文
</body>
</html>

ファビコン用の<link>は、現在のサイトと同じように<head>の中へ書きます。

ファビコンを指定するHTML

articlesフォルダ内の記事から、実際の32×32px PNGを指定するコードです。

<link rel="icon" type="image/png" sizes="32x32" href="../assets/images/common/favicon-32.png">

この1行が「1つ上のフォルダに戻り、assets/images/common/にあるfavicon-32.pngを、このページのアイコンとして使う」とブラウザへ伝えます。

先頭の../をそのまま全ページへ貼らない

articles内の記事では../が必要ですが、ルートにあるindex.htmlではassets/images/common/favicon-32.pngです。HTMLが置かれている場所によって画像パスが変わります。

コードを1つずつ説明

<link>: 現在のHTMLと、別のファイルとの関係をブラウザへ知らせるタグです。終了タグは付けません。
rel="icon": リンク先のファイルが、このページを表すアイコンだと伝えます。relはrelationship（関係）の略です。
type="image/png": リンク先がPNG形式の画像だと伝えます。typeはファイルの種類を示すヒントです。
sizes="32x32": 画像が横32px・縦32pxであることを伝えます。
href="...": 実際に読み込む画像の場所を指定します。hrefの中が間違っていると画像へたどり着けません。

MDNでは、複数のrel="icon"がある場合、ブラウザがtypeやsizesを手がかりに適したアイコンを選ぶと説明されています。

favicon.icoを使用する場合

このサイトでICO形式を指定している実際の1行です。

<link rel="icon" href="../assets/images/common/favicon.ico" sizes="any">

hrefはICOファイルの場所です。ICOは昔からファビコンで使われ、複数サイズを一つに含められます。このサイトではICOだけにせず、32×32pxのPNGとApple用画像も続けて指定しています。

<link rel="icon" href="../assets/images/common/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="../assets/images/common/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="../assets/images/common/apple-touch-icon.png">

上から、ICO形式、32×32pxのPNG、Apple端末でホーム画面などに使われる画像の指定です。

画像パスとは？

画像パスは、HTMLから見た画像ファイルの保存場所です。次の3つが一致する必要があります。

ファイル名：favicon-32.png
実際の保存場所：assets/images/common/
HTMLに書いた場所：../assets/images/common/favicon-32.png

../は「今いるarticlesフォルダから1つ上へ戻る」という意味です。そこからassets、images、commonの順にフォルダを開きます。

画像パスで迷ったときは、画像パス・リンク切れ・スマホ表示を確認する方法でも図解と確認順を説明しています。

全ページに設定する必要がある？

サイトの作り方によって異なります。テンプレートや管理画面から共通のheadを出力する仕組みなら、1か所の変更が全ページへ反映される場合があります。

AIはじめノートは、複数の静的HTMLファイルを直接管理しています。現在の公開対象HTMLを確認すると、それぞれのページのheadにファビコン設定があります。そのため新しいHTML記事を作るときも、そのページのheadへ同じ設定が必要です。

既存ページを一括変更する必要はありません

今回は既存ページの設定がそろっていることを確認しました。新しい4記事へ同じ3行を入れるだけで、既存記事の本文や設定は変更していません。

サーバーへアップロード

PC内のファイルを直しただけでは、公開サイトは変わりません。次の順番でファイルを送ります。

PC内のHP→FFFTP→サーバー→公開HP

FFFTPは、PCとサーバーの間でファイルを送るためのソフトです。接続、public_html、左右の画面、上書き確認はFFFTPアップロード方法の記事で詳しく説明しているため、ここでは重複させません。

アップロードするファイル

新しく設定したときは、変更したものだけを選びます。

HTML：ファビコンの<link>を追加・変更したページ
PNG：新しく作った、または変更したファビコン画像
ICO：favicon.icoを使う場合はそのファイル
Apple用画像：作成してHTMLで参照した場合だけ

どの更新で何を送るか迷ったら、HP更新でアップロードするファイルの選び方を確認します。変更していない画像を全部送り直す必要はありません。

PCで確認

公開したページをブラウザで開きます。
タブの左側に新しいマークが見えるか確認します。
一度再読み込みします。
別の記事を開き、同じマークが表示されるか確認します。

古いマークが残っていても、すぐに画像作成の失敗とは決めつけません。ブラウザが前の画像を覚えている「キャッシュ」が原因の場合があります。

スマートフォンで確認

PCで見えたら終わりにせず、スマートフォンでも同じURLを開きます。タブ一覧、ブックマーク、ホーム画面への追加など、ファビコンが使われる場所はブラウザや端末によって異なります。

PCとスマホで違う画像が見えるときは、端末ごとのキャッシュや、別の画像を参照する設定がないかを確認します。

設定後チェックリスト

□ ファビコン画像が存在する
□ ファイル名が正しい
□ 保存場所が正しい
□ HTMLのhrefが正しい
□ head内に設定されている
□ サーバーへアップロードした
□ PCで確認した
□ スマホでも確認した

3ページ目のまとめ

画像の保存場所、HTMLのhref、アップロード先がつながって、初めて公開ページでファビコンを読み込めます。

設定したのに前の画像のままということがあります。次はその原因を一つずつ確認します。

SOURCE