第1回｜faviconの最小構成と多端末対応パターン

はじめに

とりあえずコピーして使い人向けに用意したので用途に合わせて使ってください。
プロジェクトの規模や対応範囲にあわせて、下の3パターンから選べばOKです。

Webサイト・最新ブラウザのみ最小構成

最新のChrome・Safari・Edge・Firefoxなど、現代ブラウザのみ対象にするならこれだけでOKです。

<!-- 基本ファビコン（最新ブラウザ対応） -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

用意するファイル

ファイル名	推奨サイズ	フォーマット	説明
favicon.svg	ベクター形式（サイズ自由）	SVG	メインファビコン。ベクターなので1ファイルでOK。

全てをカバーした構成

iPhoneやAndroidなどモバイルも含め、主要環境をすべてカバーしたい場合はこの構成にすると良いでしょう。
2025年時点で「迷ったらこれ」を使えば間違いなしです。

<!-- 基本ファビコン -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Apple iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

<!-- Chrome / Firefox / Edge -->
<meta name="theme-color" content="#ffffff">

最大構成（すべてのOS・デバイス対応）

商用サイトやブランドサイト、PWA（アプリ的なWeb）対応まで考えるなら、この“フル装備版”が完全版となります。

<!-- 基本ファビコン -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Apple iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

<!-- Windows -->
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">

<!-- Chrome, Firefox OS, Opera -->
<meta name="theme-color" content="#ffffff">

<!-- Safari macOSタブピン -->
<meta name="apple-mobile-web-app-title" content="MySite">
<meta name="application-name" content="MySite">