ファビコンの設定方法：HTML への書き方と favicon.ico の置き場所

ファビコンの設定は 2 ステップです。アイコンのファイルをサーバーにアップロードし、HTML の <head> にリンクを書くだけです。

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

ファビコンのファイルは、サイトの ルートフォルダ（トップページの index.html や index.php と同じ場所）に置きます。多くのレンタルサーバーでは public_html や www がルートです。

まだファイルがない場合は、ファビコン作成ツール で一式を作成できます。

2. HTML にコードを書く

すべてのページの <head> 内（共通ヘッダーがあればそこ）に、次のコードを貼り付けます。

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

SVG のファビコンもある場合は、1 行目のあとにこの行を追加します。

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

パスは「/」から始める

href="/favicon.ico" はいつでもサイトのルートを指します。href="favicon.ico" のようにスラッシュがないと、今いるフォルダを基準にするため、/blog/記事 のようなページではアイコンが表示されません。「トップページだけファビコンが出る」原因でいちばん多いのがこれです。

favicon.ico だけでも表示される？

ブラウザは HTML に指定がなくても /favicon.ico を自動で探すので、多くの場合は表示されます。それでも <link> を書いておけば、より鮮明な PNG・SVG を使ってもらえ、iPhone や Android のホーム画面用アイコンも正しく指定できます。

WordPress の場合

WordPress では HTML を編集する必要はありません。外観 → カスタマイズ → サイト基本情報 → サイトアイコン に 512×512 以上の正方形の画像をアップロードすれば、必要なサイズが自動で作られます。

設定できたか確認する

ファビコン チェッカー にサイトの URL を入力すると、各ファイルが読み込めるか、足りないものがないかを確認できます。変わらない場合は、ブラウザのキャッシュが原因のことが多いので、シークレットウィンドウで開き直してください。