はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
なぜfaviconは複数サイズが必要か？
昔はファビコンが表示されるのは、ほぼPCのブラウザタブだけでした。
しかし今は、
- PCのブラウザタブ（小さい）
- ブックマーク（小さい）
- スマホのホーム画面（大きい・高解像度）
- Windowsのタイル（大きい）
など、様々な場所で使われます。スマホのホーム画面に、ブラウザタブ用の小さなぼやけたアイコンが表示されたら不恰好です。それぞれの場所に合わせて、最適な大きさの綺麗なアイコンを表示させるために、複数サイズへの対応が必要になりました。
最新の対応方法
昔は何種類もサイズの違うPNG画像を用意していましたが、今はもっとシンプルです。SVGという画像形式を使えば、ほとんどの場面に対応できます。
現在のベストプラクティスは、以下の2つを<head>内に記述する方法です。
①SVGアイコンを設定 (最新のブラウザ向け)
SVGはベクター形式なので、どんなサイズにもぼやけずに綺麗に表示されます。これがメインのファビコンになります。
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
②Appleデバイス用アイコンを設定 (iOS向け & 旧ブラウザ向け)
iPhoneなどでホーム画面に追加したときのために、高解像度のPNG画像も用意します。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
この2つを設定しておけば、ほとんどのモダンな環境をカバーできます。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="朝活を始めるメリット">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/sunrise.jpg">
<meta property="og:url" content="https://example.com/blog/morning-start.html">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@google">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>フロントエンド1000本ノック 0019</title>
</head>
<body>
<main>
<article>
<h1>朝活を始めるメリット</h1>
<time datetime="2025-09-29">2025年9月29日</time>
<section>
<h2>体へのメリット</h2>
<h3>代謝が上がる</h3>
<p>ここに本文が入ります。</p>
<figure>
<img src="img/sunrise.jpg" alt="朝日を浴びて気持ちよさそうに伸びをする人物">
<figcaption>図1：朝日を伸びることで体内時計がリセットされる</figcaption>
</figure>
<h3>体重管理がしやすい</h3>
<p>ここに本文が入ります。</p>
</section>
<section>
<h2>心へのメリット</h2>
<h3>ストレスが減る</h3>
<p>ここに本文が入ります。</p>
<h3>集中力が高まる</h3>
<p>ここに本文が入ります。</p>
</section>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
<li><a href="#">関連記事3</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>