Movatterモバイル変換

[0]ホーム
URL:

コリス

2025年版、ファビコン画像の作成方法とHTMLの記述方法、さまざまなデバイスに対応させるには3つのアイコンが必要

サイト構築 -制作

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

Post on:2025年2月20日

sponsorsr

最近のデバイスやブラウザに対応させる最小限のファビコンセットには、3つのアイコンで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて3つだけです。

ファビコンに必要な3つのアイコン、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。

ファビコン画像の作成方法とHTMLの記述方法、さまざまなデバイスに対応させるには3つのアイコンが必要

How to Favicon in 2025: Three files that fit most needs
by Andrey Sitnik
Sitnik氏は、PostCSS,Autoprefixer,NanoIDの制作者です。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

2025/2/20: 元記事がアップデートされたので、当記事もアップデートしました。
2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。

はじめに

最近のブラウザとデバイス用にファビコンをどうすればよいか、アイコンジェネレーターの狂気を止める時がきました。

フロントエンドのデベロッパーは現在、ブラウザのタブやタッチスクリーンでWebサイトの小さなロゴを表示するためだけに20個以上のPNGファイルを用意しなければなりません。この記事ではもっとスマートなアプローチを採用し、最新のニーズに合った最小限のアイコンセットで対応する方法を解説します。

ファビコンを設置するコードはたった2つのスニペットに要約できますが、何をすべきか正確に知ってもらうために解説も読むことをお勧めします。

ファビコンの設定方法 -ショートバージョン

ブラウザに表示されるWebサイトに必要なのは3つのアイコンだけです。

  • favicon.ico
  • icon.svg
  • apple-touch-icon.png

HTMLは下記のように記述します。

HTML
1
2
3
<linkrel="icon"href="/favicon.ico"sizes="32x32">
<linkrel="icon"href="/icon.svg"type="image/svg+xml">
<linkrel="apple-touch-icon"href="/apple-touch-icon.png">

2024年版での変更点1: icoファイルのsize=anyをsize=32x32に変更、Chromeがicoファイルとsvgファイルの両方をダウンロードしてしまうバグを修正。

さらにPWA (プログレッシブウェブアプリ) の場合は、HTMLに以下も追加します。

HTML
1
<linkrel="manifest"href="/manifest.webmanifest">

2025年版での変更点1: ブラウザが通常のUIでWebmanifestアイコンの使用をやめたため、Webmanifestアイコンはオプションになりました。

manifest.webmanifestのJSONファイルは、テキスト形式です。

manifest.webmanifest
1
2
3
4
5
6
7
{
  "icons":[
    {"src":"/icon-192.png","type":"image/png","sizes":"192x192"},
    {"src":"/icon-mask.png","type":"image/png","sizes":"512x512","purpose":"maskable"},
    {"src":"/icon-512.png","type":"image/png","sizes":"512x512"}
  ]
}

たったこれだけでOKです。
私がどうやってここにたどり着いたのか、妥協した点、そしてこれらのスニペットをどのように組み立てのかを解説します。

ファビコンの設定方法 -ロングバージョン

ファビコンとは「favorite icon（お気に入りアイコン）」の略で、2000年代の初頭から存在しているコンセプトです。現在では主にブラウザのタブに表示され、そのかわいい画像は表示しているWebサイトを区別するのに役立っています。ユーザーはWebサイトにファビコンがあることを期待しています。ファビコンは、誰かがあなたのことを真剣に見てくれるようにするためのちょっとした工夫の1つです。

Appleは何年もの間、Safariでファビコンを軽視してきました。自社以外のアイコンが表示されるのは美しくないと不満を抱いていたAppleは、ついにあきらめ、現在ではすべてのデバイスで正しく表示されるようになりました。

一般向けに公開されているWebサイトを運営しているのであれば、ファビコンが必要です。悲しいことに、ユーザーから見えるのはたった1つのアイコンでも、実際には数多くのアイコンが必要です。

そのため、種類が増え続けるデバイスやスクリーンに対応した必要なアイコンファイルを作成するという大変な作業をファビコン生成ツールに任せるのが一般的です。まともな神経の持ち主なら、手作業で何時間もかけてファビコンを作りたいとは思わないでしょう。わたし達はWebサイトを構築するために仕事をしているのであって、ブラウザベンダーを喜ばせるために仕事をしているのではありません。

ファビコン生成ツールによって生成されたファビコンのセット

一般的なファビコン生成ツールによって生成されたファビコンのセット

NanoIDの制作者として、またミニマルなオープンソースの提唱者として、私は物事を別の側面から考える傾向があります。Webサイトのアイコンとして最も効率的なセットは何か？ 時代遅れのフォーマットはどれか？ 少しの妥協で置き換えることができるアイコンはどれか？

そこで私は、どんな場合でもあらゆるブラウザで機能する、最小限のファビコンのリストを作成することにしました。100％完璧ではありませんが、間違いなく機能します。

究極のファビコン設定方法

サイズの異なる画像をたくさん作成する代わりに、SVGとブラウザの縮小機能を頼りにすることにしました。もしパフォーマンスを心配しているなら、誤解を解いておきましょう。

  • ブラウザはファビコンをバックグラウンドでダウンロードするため、ファビコン画像が大きくてもWebサイトのパフォーマンスには影響しません。
  • SVGは、そもそもビットマップであるべきでない画像のサイズを縮小するのに適しています。ほとんどのファビコンでファイルサイズは、PNGよりもはるかに小さくなります。
  • この最小限のセットに含まれる3つのPNG画像だけで、高度なツールを使用してサイズを最適化できます。これにより、無制限のデータプランではないインターネットユーザーの問題が解決されます。

続いて、私がこれまでの調査と実践で考え出したアイコンの最小セットを解説します。このリストは新旧を問わず、すべての主要ブラウザとデバイスで正しくファビコンが表示されるはずです。

1. レガシーブラウザ用のfavicon.ico

ICOファイルは、実はディレクトリ構造を持っており、解像度の異なるファイルをパックできます。16×16に縮小されるとぼやけてしまう場合を除き、32×32画像1個だけにしておくことをお勧めします。その場合、小さなサイズでもちゃんと見えるように調整された特別バージョンのロゴをデザイナーに作成してもらうとよいでしょう。

フォルダ構造を変えたり、キャッシュバスターを使用するなど、変わったことはしないでください。なぜなら、https://example.com というWebサイトであれば、https://example.com/favicon.ico にファビコンを設置する必要があります。RSSリーダーなど一部のツールでは、サーバーから/favicon.icoをリクエストするだけで、わざわざ他の場所を探しません。

HTML
1
<linkrel="icon"href="/favicon.ico"sizes="32x32"><!--32×32-->

SVGではなく、ICOファイルが優先されるChromeのバグに対応するには、.icoファイルの<link>にsizes="32x32"を記述します。

2. モダンブラウザ用のSVGアイコン（ライトテーマ・ダークテーマ）

SVGは、ピクセルの代わりに曲線を記述するベクターフォーマットです。特にサイズが大きい場合は、ラスター画像よりも効率的です。2025年現在、全ブラウザの77%がSVGアイコンをサポートしています。

HTMLページの<head>セクション内に<link>タグを追加し、rel="icon" とtype="image/svg+xml"、そしてhrefにSVGファイルへのリンクを含めて記述します。

HTML
1
<linkrel="icon"href="/icon.svg"type="image/svg+xml">

SVGはXML形式になっているので、CSSを記述するための<style>タグを含めることができます。そのため通常のCSSと同様に、@media (prefers-color-scheme: dark)のようなメディアクエリを使用することが可能です。これにより、ライトテーマとダークテーマでアイコンを切り替えることができます。

3. Appleデバイス用の180×180のPNGアイコン

Appleデバイスのタッチアイコンは、iPhoneやiPadのホーム画面にショートカットとしてWebページを追加した場合に、Apple社のデバイスが使用する画像です。HTMLページの<head>セクション内にタグを記述する必要があります。

HTML
1
<linkrel="apple-touch-icon"href="/apple-touch-icon.png"><!--180×180-->

iOS 8以降、iPadでは180×180の解像度の画像が必要になりました。他のデバイスでは画像が縮小されますが、十分な品質の画像を使用していれば、縮小されてもエンドユーザーには影響しません（これについては後述します）。

メモ: Appleのタッチアイコンは画像の周りに20pxのパディングを確保し、背景にも色を与えておくと、より見栄えが良くなります。これは画像編集ソフトで簡単にできます。

4. Androidデバイス用の192×192と512×512のPNGアイコンを含むWebアプリマニフェスト

WebアプリマニフェストはJSONファイルで、ブラウザがWebサイトをシステムアプリケーションとしてインストールするためのすべての情報を含んでいます。このフォーマットは、GoogleからPWAイニシアチブを通じて提供されたものです。

HTMLページには、<head>セクション内にマニフェストファイルへのリンクを含むタグを記述する必要があります。

HTML
1
<linkrel="manifest"href="/manifest.webmanifest">

マニフェストにはホーム画面に表示するための192x192のアイコン、PWAの読み込み中にスプラッシュ画面として使用される512x512のアイコン、およびPWAの読み込み中にスプラッシュスクリーンとして使用される512x512のマスクアイコン、3つのアイコンにリンクするアイコンフィールドが必要です。

2025年版での変更点2: マスクアイコンが追加されました。Androidはシステムテーマに応じてアイコンを特別な形にカットします。

マスク可能なアイコンは、ランチャーによってデザインに合わせて切り取られるため、アイコンの周囲には大きめのパディングが必要です。安全領域は409x409のサークルです。マスクの状態はmaskable.appで確認できます。

manifest.webmanifest
1
2
3
4
5
6
7
{
  "icons":[
    {"src":"/icon-192.png","type":"image/png","sizes":"192x192"},
    {"src":"/icon-mask.png","type":"image/png","sizes":"512x512","purpose":"maskable"},
    {"src":"/icon-512.png","type":"image/png","sizes":"512x512"}
  ]
}

何かを忘れてる？

もちろん、世の中にはもっと多くの種類のファビコンがあり、中には非常にマイナーなものもあります。もしかしたら、あまり浸透しなかったフォーマットには別れを告げるときが来たのかもしれません。

Windowsのタイルアイコン

Microsoft Edgeは、Webサイトをスタートメニューにピン留めするための特別なアイコン形式をサポートしていました。しかし、Windowsの最近のバージョンでは、不要になりました。

Safariのピン留めアイコン

Safariには以前、ピン留めされたタブにアイコンを表示することが別途義務付けられていました。しかし、Safari 12からは、ピン留めされたタブに通常のファビコンを使用することができるようになりました。apple.comでもこのmask-iconは使用されなくなりました。

rel="shortcut"

多くの（現在では古くなった）チュートリアルには、ファビコンを設置するHTMLを下記のように記述していました。

HTML
1
<linkrel="shortcut icon"href="/favicon.ico">

shorcutは、現在では無効です。Mathias Bynensによる素晴らしい記事を読むと、なぜshorcutが必要なくなったのか、なぜrel="icon"で十分なのかが解説されています。

Opera Coast

iOS向けの実験的なブラウザであるOpera Coastは、228×228の特殊なアイコンを必要としていました。このブラウザは2017年にApp Storeから削除されました。それ以降にiOSは何度もアップデートされており、Opera Coastがアップデートに対応して動くかどうかは分かりません。

さて、倒れた仲間に別れを告げたので、現役で活躍しているブラウザのために、究極のファビコンセットを実装する方法を見ていきましょう。

ファビコン画像の作成方法

ファビコン画像を作成するには、6つのステップがあります。最初に必要なのは、使いたいロゴのSVGファイルだけです。

Step 1: SVGを準備する

SVG画像が正方形であることを確認してください。SVG画像をビューア（テキストエディタ可）で開き、画像の幅と高さをします。SVGのサイズは、どのSVGエディターでも簡単に調整できます。無料で利用できるInkscapeを使用した場合は、[ファイル]→[ドキュメントのプロパティ]でドキュメントサイズを変更し、[オブジェクト]→[整列と配置]でロゴを中央に配置することができます。

調整が完了したら、SVGファイルを「icon.svg」という名前で保存します。このSVGを使用して、OSのテーマでうまく機能するようにします。ダークテーマで色をどのように反転させたらよいかはデザイナーに尋ねてください (白黒のロゴは、黒を白に変えるだけです)。

次に、SVGファイルをテキストエディタで開きます。fillがダークテーマ用になっている<path>、またはfillがない<path>を探します。テーマ（ダークとライト）を変更するためにCSSメディアクエリを追加して、fillをそれぞれのテーマ用の色に変更します。

HTML
1
2
3
4
5
6
7
8
9
  <svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 500 500">
+  <style>
+     @media (prefers-color-scheme: dark){
+     .a{fill:#f0f0f0}
+    }
+  </style>
-  <pathfill="#0f0f0f"d="…"/>
+  <pathclass="a"fill="#0f0f0f"d="…"/>
  </svg>

Step 2: ICOファイルを作成する

icon.svgファイルをラスターグラフィックエディタで開きます。私はGIMPをお勧めします、無料でマルチプラットフォームで利用できます。

SVGをラスター画像に変換し、幅と高さは32pxになるように設定したら、「favicon.ico」にエクスポート（32 bpp, 8-bit alpha, パレットなし）します。

GIMPがない場合は、InkscapeとImageMagickをインストールして、ターミナルでSVGをICOに変換できます。

Terminal
1
2
3
4
inkscape./icon.svg--export-width=32--export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert./tmp.png./favicon.ico
rm./tmp.png

2024年版での変更点2: icoとpng生成のCLIコマンドを修正。

【訳者注】
オンラインツールSVG to ICOで、手軽にSVGファイルをICOファイルに変換できます。

favicon.icoが完成したら、画像を16×16に縮小し、アイコンの可視性を確認します。ぼやけてしまっている場合は、デザイナーに頼んで、カスタムで小さいバージョンのロゴを作成してもらうとよいでしょう。

16×16の別バージョンのアイコンを含めるには、

  1. GIMPで、32×32のfavicon.icoを開きます。
  2. 16×16のサイズで新規レイヤーを作成します。
  3. このレイヤーに16×16バージョンのアイコンを配置します。
  4. ファイルをエクスポートします。GIMPは別バージョンのアイコンを個別のレイヤーに保存できます。

または、ImageMagickで同じことができます

Terminal
1
convert./icon-32.png./icon-16.png./favicon.ico

Step 3: PNG画像を作成する

もう一度ラスターグラフィックエディタでSVGファイルを開き、512×512のPNG画像を作成します。「icon-512.png」としてエクスポートします。そして、画像を192×192にサイズ変更し、「icon-192.png」にエクスポートします。 最後に、画像を140×140にサイズ変更し、キャンバスを180×180に設定してから、「apple-touch-icon.png」としてエクスポートします。

次に画像を409x409にサイズ変更し、キャンバスを512x512に拡大し、「icon-mask.png」にエクスポートします。maskable.appでさまざまな形で正常に表示されるか確認し、必要があればアイコンを調整します。

2025年版での変更点3: マスクアイコンの作り方を追記。

icon-512.pngとicon-192.pngについては、Inkscapeで同じことができます

Terminal
1
2
inkscape--export-type="png"--export-width=512--export-filename="./icon-512.png"./icon.svg
inkscape--export-type="png"--export-width=192--export-filename="./icon-192.png"./icon.svg

Step 4: PNGとSVGのファイルサイズを最適化する

SVGを最適化する優れたツールはSVGOです。以下を実行します。

Terminal
1
npxsvgo--multipassicon.svg

Squooshはラスターイメージを最適化する優れたWebアプリです。

  1. Squooshでicon-512.pngを開きます。
  2. Compress（圧縮）をOxiPNGに変更します。
  3. Reduce palette（パレットを減らす）を有効にします。
  4. Reduce paletteのColorsを64色に設定します。
  5. スライダーを動かして、圧縮前と圧縮後を比較します。差があるようなら色数を増やします。
  6. ファイルを保存します。

icon-192.pngとapple-touch-icon.pngもこれらの手順を繰り返して、最適化します。

Step 5: アイコンをHTMLに追加する

HTMLにfavicon.ico, icon.svg, apple-touch-icon.pngへのリンクを記述します。

HTML
1
2
3
4
<title>Mywebsite</title>
+<linkrel="icon"href="/favicon.ico"sizes="any">
+<linkrel="icon"href="/icon.svg"type="image/svg+xml">
+<linkrel="apple-touch-icon"href="/apple-touch-icon.png">

ただし、キャッシュバスターを生成するバンドラーを使用することをお勧めします（ファイル名にハッシュを含めてフィンガープリントとして使用）。Webpackでhtml-webpack-pluginを使用している場合は、

  1. index.htmlのテンプレートを作成します。
  2. テンプレートにプラグインオプションを追加します。
    code
    1
    newHtmlWebpackPlugin({template:"./view/index.html"});
  3. リンクを含むHTMLテンプレートの定義 (下記は、HtmlWebpackPluginを使用してファイルをインクルードしていますが、お好みのテンプレート言語で構いません)
    HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPEhtml>
    <htmllang="en">
      <head>
        <metacharset="utf-8">
        <title>Mywebsite</title>
        <metaname="viewport"content="width=device-width,initial-scale=1">
        <linkrel="icon"href="/favicon.ico"sizes="any">
        <linkrel="icon"type="image/svg+xml"href="<%=
          require('./icon.svg').default
        %>">
        <linkrel="apple-touch-icon"href="<%=
          require('./apple-touch-icon.png').default
        %>"
      >
      </head>
      <body></body>
    </html>
  4. copy-webpack-pluginを使用して、ファイル名にハッシュを追加せずにfavicon.icoをコピーします。

ボーナス: ステージング用に別のアイコンを作成する

ファビコンは、本番環境とステージング環境（テスト環境）を区別するための良い方法です。ステージング環境用に別のアイコンを使用することは、混乱による損失を避けるために非常に効果的です。

同じロゴでfavicon-dev.icoを作成しますが、色を反転させます（または自分にとって分かるようにします）。SVGも同様に作成し、icon-dev.svgを作成します。

あとは、process.env.NODE_ENV === 'production'の条件に応じて、HTMLテンプレート内のアイコンを置き換えます。

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <!doctypehtml>
  <htmllang="en">
    <head>
      <metacharset="utf-8">
      <title>Mywebsite</title>
      <metaname="viewport"content="width=device-width,initial-scale=1">
-    <linkrel="icon"href="/favicon.ico"sizes="any">
+    <linkrel="icon"sizes="any"href="<%=
+      process.env.NODE_ENV==='production'
+        ?'/favicon.ico'
+        :require('./favicon-dev.ico').default
+    %>">
      <linkrel="icon"type="image/svg+xml"href="<%=
-      require('./icon.svg').default
+      process.env.NODE_ENV==='production'
+        ?require('./icon.svg').default
+        :require('./icon-dev.svg').default
      %>">
      <linkrel="apple-touch-icon"href="<%=
        require('./apple-touch-icon.png').default
      %>">
    </head>
    <body></body>
  </html>

Step 6: Webアプリマニフェストを作成する

静的なHTMLの場合、manifest.webmanifestという名前のJSONファイルを作成します。

manifest.webmanifest
1
2
3
4
5
6
7
8
{
  "name":"My website",
  "icons":[
    {"src":"/icon-192.png","type":"image/png","sizes":"192x192"},
    {"src":"/icon-mask.png","type":"image/png","sizes":"512x512","purpose":"maskable"},
    {"src":"/icon-512.png","type":"image/png","sizes":"512x512"}
  ]
}

HTMLにリンクを追加します。

HTML
1
2
3
4
5
<title>Mywebsite</title>
+<linkrel="manifest"href="/manifest.webmanifest">
<linkrel="icon"href="/favicon.ico"sizes="any">
<linkrel="icon"href="/icon.svg"type="image/svg+xml">
<linkrel="apple-touch-icon"href="/apple-touch-icon.png">

Webpackでは、webpack-pwa-manifestプラグインを使用できます。

Webpack
1
2
3
4
5
6
7
8
9
10
11
  plugins:[
    …,
    newWebpackPwaManifest({
      name:'My website',
      icons:[
        {src:resolve('./icon-192.png'),sizes:'192x192'},
        {src:resolve('./icon-mask.png'),sizes:'512x512',purpose:'maskable'},
        {src:resolve('./icon-512.png'),sizes:'512x512}
      ]
    })
  ]

終わりに

お読みいただきありがとうございました。この記事で解説したように、モダンWebスタンダードでは究極のファビコンセットを作成する作業は非常に簡単になります。手順を手動で実行するのにそれほど時間はかからないと思いますが、これらの工程を自動化できるツールがあれば、さらに素晴らしいものになるでしょう。もし、自動化ツールを作りたいのであれば、私のTwitterをフォローしてください。喜んでお手伝いさせていただきます！

sponsors

Related Posts

関連記事が見つかりませんでした。

  • Xでシェアする
  • Facebookでシェアする
  • はてなでブックマークする
  • Raindropに保存する

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • 1Password ソースネクストだけの3年版
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp