JPG からファビコンへ：写真をブラウザアイコンに変換

前回の撮影で美しくライティングされた商品写真をJPGとして保存したけれど、今度はそれをオンラインストアのブラウザタブに表示したいとお考えですか? 問題は、JPGファイルは透過をサポートしていないうえに、非可逆圧縮のアーティファクトを抱えており、そもそも16x16ピクセルまで縮小されることを想定していないという点です。専用のJPG to favicon converterは、これら3つの問題を1つのワークフローでまとめて解決します。

なぜJPGはファビコン用に特別な処理を必要とするのか

ファビコンは過酷なビジュアル環境に置かれます。ブラウザタブでは16x16、ブックマークバーでは32x32、iOSのホーム画面では180x180でレンダリングされます。こうした幅広いサイズが非可逆圧縮を苦しめます。というのも、拡大されたときにすべてのアーティファクトが可視化されてしまうからです。

また、JPGファイルはアルファチャンネルをサポートしていないため、アイコンはベタ色の背景(多くは白かブラウザタブの色)のうえに表示されることになります。クリーンなスタジオ背景の商品写真であれば問題ありませんが、ダークタブのうえに浮かべたいロゴにとっては実際に困る問題です。

Mzu favicondlは変換時にこれらの両方の問題を解消します。アップロードされた内容に応じて、不透明版と透過版の両方を含むマルチ解像度のファビコンパッケージを生成するからです。

JPG to Favicon Converterの使い方

JPGを用意してしまえば、変換ワークフローはほんの数秒で完了します。

Mzu favicondlを開き、アップロードエリアにJPGファイルをドロップします。
出力フォーマットを選択します。デフォルトのパッケージには、必要に応じてICO、PNG、Apple Touch Icon、SVGが含まれます。
16x16、32x32、180x180でレンダリングされたアイコンをプレビューし、可読性を確認します。
ZIPパッケージをダウンロードし、ファイルをサイトのルートディレクトリに配置します。

標準的なHTMLセットアップでは、<head>に以下のlinkタグを記述する必要があります。rel='icon'がファビコンを宣言するモダンな方法であることはHTML Living Standardで定義されており、WHATWG HTML仕様に文書化されています。

&lt;link rel='icon' href='/favicon.ico' sizes='any'&gt;
&lt;link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32'&gt;
&lt;link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'&gt;

写真ベースのファビコンに重要な機能

Mzu favicondlには、ベクターやPNGではなくJPGから始める場合に特に重要となる機能がいくつか備わっています。

スマートクロップ。画像のフォーカルポイントを検出し、被写体が16x16でも見えるようにクロップ位置を中央に揃えます。
ICCプロファイルの除去。カメラのJPGには埋め込まれたカラープロファイルが含まれており、ブラウザ間で色味がずれる原因になります。コンバーターはこれらをフラット化します。
マルチサイズICO出力。1つのICOファイルに16、32、48ピクセルのバリアントが含まれます。各サイズがなぜ重要かはfavicon sizes guideを参照してください。
PNGフォールバック生成。JPGをアップロードした場合でも、Mzu favicondlはそれを好むブラウザ向けに可逆圧縮のPNGバージョンを出力します。

JPGからファビコンへの変換におけるプロのヒント

写真は小さなサイズではファビコンとして不向きですが、いくつかのテクニックで可読性を保てます。

変換前にシンプル化する

JPGが情報量の多い商品写真の場合は、アップロード前に大胆にクロップしましょう。被写体がフレームいっぱいに収まった1:1のスクエアクロップであれば、横長の風景写真よりも16x16へのダウンスケールをはるかに良好に乗り切れます。あくまでヒーローイメージではなくサムネイルのように扱うのがコツです。

PNGを検討する

ソース画像に透過やシャープなエッジ(ロゴなど)が含まれているなら、PNGから始めるほうがほぼ常に優れています。PNG to faviconのワークフローは別記事で詳しく扱っていますが、手短にまとめると、PNGは可逆圧縮でアルファをサポートし、こうした用途のために設計されている、ということです。

まず最小サイズでテストする

出力を承認する前に、必ず16x16で変換後のアイコンをプレビューしてください。そのサイズでアイコンが何なのか判別できないなら、ユーザーが混雑したタブバーのなかでも判別できるはずもありません。強いシルエットの写真(コーヒーカップやスニーカー)は機能しますが、微妙なグラデーションの写真(夕焼けの風景)は通常うまくいきません。

ダークモードに対応する

明るいアイコンはダークなタブ背景のうえで埋もれてしまいます。サイトがダークモードをサポートしている場合は、prefers-color-schemeメディアクエリを使ったSVGバリアントを生成し、アイコンが自動的に切り替わるようにしましょう。Mzu favicondlは、入力がクリーンにベクター化できるほどシンプルであれば、SVGを出力します。

まとめ

JPG to favicon converterが存在するのは、JPGファイルがブラウザタブのために作られていないからです。Mzu favicondlは、カラープロファイルの除去、マルチ解像度ICOの生成、透過PNGフォールバックの生成までをワンストップで橋渡しします。写真をアップロードし、まず最小サイズをプレビューし、できる限りソースとしてPNGを選んでください。