ファビコン設定これだけ！2026

2024/06/042026/03/09

ウェブサイトのファビコン設定、いつもやっている方法で本当にいいのか疑問に思ったことはありませんか？

ネット上には様々な情報があふれており、「結局何が正しいの？」と迷っている方も多いと思います。

この記事は2024年6月に作成し、毎年更新を踏まえ最近では、2026年3月にColissさんの記事を参考に必要な部分だけに絞り込み、ファビコンの作成方法についても個人的に使いやすいサイトを利用して説明します。

具体的には以下の内容になっております。

結局、必要なファイルって？
headタグに記述するHTMLコードの具体例
簡単だったファビコン作成方法

これらの情報を通じて、もうこれだけでいいんだと思っていただければ幸いです。

さあ、一緒にスッキリ解決しましょう！

ファビコン設定に必要なファイル

早速ですが、必要なファイルは下記の3つになります。（2025年までは6つとご紹介しておりました。少なくなって有り難いですね。）

favicon.ico
icon.svg
apple-touch-icon.png

これらはジェネレーターで作成出来ます。作成方法については後述しますので、ここではそれぞれのファイルの簡潔な説明をしたいと思います。

１．favicon.ico: 古いブラウザ用のファイルです。そのため中身は32×32サイズの1種類にする。そしてドメイン直下に設置する。　
２．icon.svg: メインで使用するSVGファイル。ファイル内にCSSを記述してライトモード・ダークモードに対応させたり出来る。
３．apple-touch-icon.png: iOSデバイス上でサイトをホーム画面に追加を選択したとき等に使われる。180×180サイズ。

以前は、アプリ化させたい場合に記述する site.webmanifestファイルを記載しておりましたが、不要な方（アプリ化させない人）が多いと思うので割愛しております。

ファビコン設定に必要なHTMLコードの具体例

下記のコードはheadタグへの記述例です。パスやファイル設置場所はicoファイル以外は任意です。

<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" href="img/common/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="img/common/apple-touch-icon.png">

<!-- 以下のファイルは任意です -->
<link rel="manifest" href="/manifest.webmanifest">

Android用のファイルについては、apple-touch-iconで共用します。

manifestファイルが、不要な方は次のファビコンの作成方法までとばしてお読み下さい。

上の画像はsite.webmanifestをエディタで確認したものです。URL等は環境に合わせて下さい。

ウチノ

site.webmanifestファイルはBasic認証を付けている場合はコンソールエラーが出るのでご注意下さい。

ファビコン作成方法

あわせて読みたい

Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.

上のサイトを訪問すると下の画像のページになります。そこで

赤枠のボタンをクリックしてファビコンに使用する画像（正方形）を選択します。

すると下の画像のような画面に遷移します。このページでは各アイコンの背景色を選択することが出来ますが、私はクライアントから指定がない限りはほとんど触ってないです。

最後にあるボタン（上の画像の赤枠に囲まれた部分）をクリックします。

すると次の画面になります。

ココをクリックと書いてあるボタンを押すとzipファイルがダウンロードされます。それを開くと

中身は上の画像のようになっております。その中から使用するファイルは以下のとおりです。

favicon.ico
safari-pinned-tab.svg
apple-touch-icon.png

次にsafari-pinned-tab.svgファイルを名前変更してicon.svgにします。

ウチノ

icon.svgをillustrator等で作成できる、もしくは依頼できるという方は、この次の作業は読まなくても大丈夫です！

そのあとにエディタで開いてコードを変更します。

上の黄色線を引いた部分を削除します。

次に下の画像で黄色枠で囲んだようにstyleタグでCSSを記述します。

<style>
  path {　　　// 色変更をする場合
    fill: #257E8F;
  }
  @media (prefers-color-scheme: dark) {　　　// ダークモード時に色を変更する場合
    path {
      fill: #fff;
    }
  }
</style>

icon.svgは以上です。

以上で作業は完了です。お疲れさまでした。