ファビコン(favicon)の作成方法【サイズとPNG,svgの違いについても解説】

サイトを立ち上げる際にファビコン（Favicon）は必ず作成して設定しておくべきですが、有耶無耶にされやすい存在です。ファビコンの作り方には色々な方法があるし、必要なサイズもめちゃくちゃ多いと言われています。

ファビコンの作成と設置方法は静的HTMLサイトとWordPressで方法が異なってくるため、今回は「どんな場面でも対応できる、ファビコンの楽な作成と設置方法」について解説していきます。実はファビコンのサイズは一種類用意すれば事足ります。

特にWeb制作を仕事にしている人なら知っていて当然の知識になるので、是非最後まで読んでFaviconの作り方を理解し、実践できるところまでいきましょう。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

ファビコンとはそもそも何なのか
Faviconのサイズ
WordPressでのファビコン作成と設置方位
WordPress以外のファビコン実装の基本方針(おすすめ)
ダークモード対応やホーム画面アイコンにこだわりたい人向け
どこまで対応するかは考える必要あり
OGPも確認しておこう

ファビコンとはそもそも何なのか

ファビコン（favicon）とは、「Favorite icon（お気に入りのアイコン）」が派生したIT用語で、internetExplore5から追加された機能です。

Googleなどのブラウザを開いた際にブラウザのタブに表示されます。

そのほかにも、スマートフォンでWebページを使用ブラウザの「お気に入り」「ホーム画面」にも設定したときには表示されます。

ブラウザを開いたときにタブに表示されるファビコン（favicon）は以下の画像です。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

ファビコンはブランドを表す貴重な指標ですが、未設定だととても味気ないものになります。Web制作の独学をしている人はかなりの高確率でファビコン未実装の人が多く、これではコーディングのポートフォリオの見栄えが落ちてしまいます。

よって、しょーごログのWeb制作ロードマップで取り入れているコーディング課題では、基本的にファビコン設置をお願いしています。

しょーご

個人的にファビコン未設定のサイトから物は買いたくないですね、SSLとかセキュリティ関連も手が抜かれてそうなので…

ってイメージを持たれる可能性も

Faviconのサイズ

ファビコンで頭が痛くなるのは、「多様なサイズを用意する必要があること」です。

その数20種類以上となりますが、現代で見ておきたいのはせいぜい下記4つです。

16px × 16px	Edge、Chrome、Firefox、Safariなどブラウザのタブ
32px × 32px	ブックマークのアイコン
48px × 48px	Windowsホーム画面のサイトアイコン(検索一覧にも必要)
180px × 180px	iOS、Androidなどのスマホのホーム画面アイコン

まさひろくん

う〜ん、でもこの4つすら準備がめんどくさい…

しょーご

大丈夫！！この後超ズボラ式ファビコン設定をご紹介しますし、WordPressなら秒で終わります。

WordPressでのファビコン作成と設置方位

WordPressの場合はとても簡単です。

まずデフォルトでは以下のような感じになっていますが、これを変更します。

管理画面から「外観→カスタマイズ」を選択。

その後、「サイト基本情報」を選択。

「サイトアイコンを選択」をクリック。

その後、ファビコンにしたい「512×512ピクセルのPNG」をドラッグ・アンド・ドロップ。

PNG形式のアイコンは自分で作るか、素材サイトから持ってきます。

ファビコンジェネレーター

Canva

独自のロゴが作れるロゴメーカー「Hatchful」

背景切り抜き「remove.bg」

アイコン素材ダウンロードサイト「icooon-mono」

その後、PNGをドラッグ・アンド・ドロップして適応させます。

すると、ファビコンが変わりました。

しょーご

WordPressの場合は簡単ですね！！

WordPress以外のファビコン実装の基本方針(おすすめ)

さて、WordPress以外の静的サイトの場合ですが、超ズボラに最低限だけ揃える方法を紹介します。

それがこちら。

ファビコン設定で必要なもの

48×48pxのPNG「1つ」のみ！！

メリット

あらゆるブラウザに対応
Googleの検索結果にも表示される(48の倍数のため)

48pxのPNGファイルだけでいいので、非常に楽です。

icon.pngという形で保存して、HTMLのheadに以下の記述を行えば良いです。

<link rel="icon" href="/icon.png"> <!-- 48x48px -->

ただ、この方法にもデメリットがあります。

48pxPNGの欠点

ダークモードに対応できない
iOSホーム画面でぼやける

まずダークモードに対応できないので、黒いファビコンだと背景と同化します。

これを防ぐにはSVGにするしかありませんが、結構未対応のサイトが多い印象ですね…

あと、ホーム画面というのは、スマホのアプリ一覧の画面ですね。

そこにWebサイトのファビコンも配置できるんですが、若干ぼやけます。

しょーご

まあ、ホーム画面にお気に入りのWebサイト登録する人がどれぐらいいるのかという感じがしますが…

ダークモード対応やホーム画面アイコンにこだわりたい人向け

もしこのあたりの問題を解决したいなら、以下の実装がおすすめです。

必要なもの

Safari以外のブラウザ向けにSVGを1点
SVGが使えないSafariのために .ico を1点（32x32px）
iOSのホーム画面用にPNGを1点（180x180px）

メリット

ダークモードに対応
あらゆるブラウザに対応
iPhoneホーム画面に対応
SVGはGoogleの検索結果にも表示される

上記のファイル群（SVG,ico,PNG）をまず用意してください。

SVGからICOへは様々なサイトでコンバートできます。

SVGからICOへのコンバーター

SVGとICO,PNGをプロジェクトのディレクトリ内に入れますが、icoは必ずトップディレクトリにファイルを置いてください。じゃないとSVGのフォールバックとして機能しません。

その後、headに以下のコードを追加します。

<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180x180px -->

headにico設定は書きません。svgより優先されることがあるようなので。

ダークモードに対応させる場合は、SVG内にCSSを書くことでダークモードに対応できます。

SVGをテキストエディタで開いて、<style>でダークモード用のCSSを書きます。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <style>
    path {
      fill: #212121; <!-- ライトモードの色 -->
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: white; <!-- ダークモードの色 -->
        opacity: 0.5; <!-- 他にも色々かける -->
      }
    }
  </style>

SVGの欠点

対応が手間