2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
Post on:2024年2月28日
sponsors
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。
ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。
How to Favicon in 2024: Six files that fit most needs
by Andrey Sitnik
Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。
はじめに
最近のブラウザとデバイス用にファビコンをどうすればよいか、アイコンジェネレーターの狂気を止める時がきました。
フロントエンドのデベロッパーは現在、ブラウザのタブやタッチスクリーンでWebサイトの小さなロゴを表示するためだけに20個以上のPNGファイルを用意しなければなりません。この記事ではもっとスマートなアプローチを採用し、最新のニーズに合った最小限のアイコンセットで対応する方法を解説します。
ファビコンを設置するコードはたった2つのスニペットに要約できますが、何をすべきか正確に知ってもらうために解説も読むことをお勧めします。
ファビコンの設定方法 -ショートバージョン
20個以上のPNGファイルを用意する代わりに、必要なのは5つのアイコンと1つのJSONファイルだけです。
- favicon.ico
- icon.svg
- apple-touch-icon.png
- icon-192.png
- icon-512.png
- manifest.webmanifest
HTMLは下記のように記述します。
|
1 2 3 4 |
<link rel="icon" href="/favicon.ico" sizes="32x32"><!-- 32×32 --> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 --> <link rel="manifest" href="/manifest.webmanifest"> |
【訳者注】2023年版ではfavicon.icoにsizes="any"が設定されていました。詳しくは後述。
manifest.webmanifestのJSONファイルは、テキスト形式です。
|
1 2 3 4 5 6 |
{ "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "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をリクエストするだけで、わざわざ他の場所を探しません。
|
1 |
<link rel="icon" href="/favicon.ico" sizes="32x32"><!-- 32×32 --> |
SVGではなく、ICOファイルが優先されるChromeのバグに対応するには、.icoファイルの<link>にsizes="32x32"を記述します。
2. モダンブラウザ用のSVGアイコン（ライト・ダーク）
SVGは、ピクセルの代わりに曲線を記述するベクターフォーマットです。特にサイズが大きい場合は、ラスター画像よりも効率的です。この記事の執筆時点では、全ブラウザの72%がSVGアイコンをサポートしています。
HTMLページの<head>セクション内に<link>タグを追加し、rel="icon" と type="image/svg+xml"、そしてhrefにSVGファイルへのリンクを含めて記述します。
|
1 |
<link rel="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>セクション内にタグを記述する必要があります。
|
1 |
<link rel="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>セクション内にマニフェストファイルへのリンクを含むタグを記述する必要があります。
|
1 |
<link rel="manifest" href="/manifest.webmanifest"> |
マニフェストにはホーム画面に表示するための192x192と、PWAの読み込み中にスプラッシュ画面として使用される512x512の2つのアイコンにリンクするアイコンフィールドが必要です。
|
1 2 3 4 5 6 |
{ "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "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を下記のように記述していました。
|
1 |
<link rel="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をそれぞれのテーマ用の色に変更します。
|
1 2 3 4 5 6 7 8 9 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> - <path fill="#0f0f0f" d="…" /> + <path class="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に変換できます。
|
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 |
【訳者注】
オンラインツールSVG to ICOで、手軽にSVGファイルをICOファイルに変換できます。
favicon.icoが完成したら、画像を16×16に縮小し、アイコンの可視性を確認します。ぼやけてしまっている場合は、デザイナーに頼んで、カスタムで小さいバージョンのロゴを作成してもらうとよいでしょう。
16×16の別バージョンのアイコンを含めるには、
- GIMPで、32×32のfavicon.icoを開きます。
- 16×16のサイズで新規レイヤーを作成します。
- このレイヤーに16×16バージョンのアイコンを配置します。
- ファイルをエクスポートします。GIMPは別バージョンのアイコンを個別のレイヤーに保存できます。
または、ImageMagickで同じことができます
|
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」としてエクスポートします。
icon-512.pngとicon-192.pngについては、Inkscapeで同じことができます
|
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です。以下を実行します。
|
1 |
npx svgo --multipass icon.svg |
Squooshはラスターイメージを最適化する優れたWebアプリです。
- Squooshでicon-512.pngを開きます。
- Compress（圧縮）をOxiPNGに変更します。
- Reduce palette（パレットを減らす）を有効にします。
- Reduce paletteのColorsを64色に設定します。
- スライダーを動かして、圧縮前と圧縮後を比較します。差があるようなら色数を増やします。
- ファイルを保存します。
icon-192.pngとapple-touch-icon.pngもこれらの手順を繰り返して、最適化します。
Step 5: アイコンをHTMLに追加する
HTMLにfavicon.ico, icon.svg, apple-touch-icon.pngへのリンクを記述します。
|
1 2 3 4 |
<title>My website</title> + <link rel="icon" href="/favicon.ico" sizes="any"> + <link rel="icon" href="/icon.svg" type="image/svg+xml"> + <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
ただし、キャッシュバスターを生成するバンドラーを使用することをお勧めします（ファイル名にハッシュを含めてフィンガープリントとして使用）。Webpackでhtml-webpack-pluginを使用している場合は、
- index.htmlのテンプレートを作成します。
- テンプレートにプラグインオプションを追加します。
1new HtmlWebpackPlugin({ template: "./view/index.html" }); - リンクを含むHTMLテンプレートの定義 (下記は、HtmlWebpackPluginを使用してファイルをインクルードしていますが、お好みのテンプレート言語で構いません)
1234567891011121314151617<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>My website</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/svg+xml" href="<%=require('./icon.svg').default%>"><link rel="apple-touch-icon" href="<%=require('./apple-touch-icon.png').default%>"></head><body></body></html> - copy-webpack-pluginを使用して、ファイル名にハッシュを追加せずにfavicon.icoをコピーします。
ボーナス: ステージング用に別のアイコンを作成する
ファビコンは、本番環境とステージング環境（テスト環境）を区別するための良い方法です。ステージング環境用に別のアイコンを使用することは、混乱による損失を避けるために非常に効果的です。
同じロゴでfavicon-dev.icoを作成しますが、色を反転させます（または自分にとって分かるようにします）。SVGも同様に作成し、icon-dev.svgを作成します。
あとは、process.env.NODE_ENV === 'production'の条件に応じて、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 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="icon" href="/favicon.ico" sizes="any"> + <link rel="icon" sizes="any" href="<%= + process.env.NODE_ENV === 'production' + ? '/favicon.ico' + : require('./favicon-dev.ico').default + %>"> <link rel="icon" type="image/svg+xml" href="<%= - require('./icon.svg').default + process.env.NODE_ENV === 'production' + ? require('./icon.svg').default + : require('./icon-dev.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>"> </head> <body></body> </html> |
Step 6: Webアプリマニフェストを作成する
静的なHTMLの場合、manifest.webmanifestという名前のJSONファイルを作成します。
|
1 2 3 4 5 6 7 |
{ "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } |
HTMLにリンクを追加します。
|
1 2 3 4 5 |
<title>My website</title> + <link rel="manifest" href="/manifest.webmanifest"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
Webpackでは、webpack-pwa-manifestプラグインを使用できます。
|
1 2 3 4 5 6 7 8 9 10 |
plugins: [ …, new WebpackPwaManifest({ name: 'My website', icons: [ { src: resolve('./icon-192.png'), sizes: '192x192' }, { src: resolve('./icon-512.png'), sizes: '512x512 } ] }) ] |
終わりに
お読みいただきありがとうございました。この記事で解説したように、モダンWebスタンダードでは究極のファビコンセットを作成する作業は非常に簡単になります。手順を手動で実行するのにそれほど時間はかからないと思いますが、これらの工程を自動化できるツールがあれば、さらに素晴らしいものになるでしょう。もし、自動化ツールを作りたいのであれば、私のTwitterをフォローしてください。喜んでお手伝いさせていただきます！
sponsors
