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

2024/06/042025/04/16

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

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

この記事は2024年6月に作成し、2025年4月に2025年版のColissさんの記事を参考に加筆修正を加え、ファビコンの作成方法については個人的にわかりやすいサイトを利用して説明します。

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

結局、必要なファイルって？
headタグに記述するHTMLコードの具体例
ファビコンの基本的な設定方法
ファビコンの最適なサイズと形式

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

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

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

早速ですが、必要なファイルは下記の6つになります。

favicon.ico
faviicon.svg
apple-touch-icon.png
android-chrome-192×192.png
android-chrome-512×512.png
site.webmanifest

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

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

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

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

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

Android用のファイルについてはsite.webmanifestファイルの中に記述されてます。（URLの修正は必要）

上の画像は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
android-chrome-192×192.png
android-chrome-512×512.png
site.webmanifest

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

ウチノ

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

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

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

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

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

favicon.svgは以上です。

残りはfavicon.icoの一つです。

Faviconジェネレーター