FaviconとApple Touch Icon
ブラウザーのタブやホーム画面に表示されるアイコンを追加します
「FaviconとApple Touch Icon」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
favicon とは
favicon は、次の場所に表示される小さなアイコンです。
- ブラウザーのタブ
- ブックマーク一覧
- ブラウザーの履歴
- 検索結果（表示される場合があります）
複数のタブを開いているときに、サイトをひと目で見分けやすくします。
基本的な favicon リンク
head 内の link 要素で favicon を追加します。
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>favicon の形式
推奨される favicon の形式：
- SVG — ベクター形式で、どのサイズにもきれいに拡大・縮小でき、ファイルサイズも小さくなります（最初に使用します）
- PNG 32x32 — SVGに対応していないブラウザー向けのフォールバック
- ICO — 16x16と32x32のサイズを含むレガシー形式
ICO ファイルの配置
ドメインのルートにある favicon.ico ファイルは自動的に取得されます。
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">sizes 属性
sizes 属性は、アイコンの寸法を指定します。
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Apple Touch Icon
Apple Touch Icon は、ユーザーがサイトをiOSのホーム画面に追加したときに表示されます。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Android向け maskable アイコン
AndroidのPWAでは、アイコンの形状全体を埋める maskable アイコンを使用します。
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->ダークモード対応 favicon
ダークモードに対応したSVG faviconを用意します。
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->PWA アイコン用の Web App Manifest
Progressive Web App に必要な、完全なアイコン設定：
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->完全な favicon の設定
最新の favicon の完全な設定：
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>favicon のテスト
favicon の設定を確認する方法：
- ハードリロード（Ctrl+Shift+R / Cmd+Shift+R）で、キャッシュされた favicon を消去します
- Favicon Checker ツール（realfavicongenerator.net）を使用します
- Apple Touch Icon は実際のiOSデバイスでテストします
- Lighthouse → PWA監査でPWAマニフェストを確認します
クイックチェック
Apple Touch Icon の画像に推奨されるサイズは何でしょうか。
復習：favicon
favicon の要点：
- SVG favicon — 最新の形式で、拡大・縮小でき、ダークモードにも対応します
- PNG 32x32 — SVGに対応していないブラウザー向けのフォールバック
- ルートのICO — レガシーなIE向けのフォールバック
apple-touch-icon180×180 — iOSのホーム画面用- Web app manifest — AndroidのPWAアイコン用（192pxと512px）
よくある質問
「FaviconとApple Touch Icon」レッスンは無料ですか？
はい。「FaviconとApple Touch Icon」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「FaviconとApple Touch Icon」で何を学びますか？
ブラウザーのタブやホーム画面に表示されるアイコンを追加します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「FaviconとApple Touch Icon」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- titleとSEOにおける役割
- meta charset viewport author description
- 正規URLとrobots meta
- FaviconとApple Touch Icon