ファビコンジェネレーター

ファビコンとは、ブラウザのタブに表示され、ブックマークや履歴でサイトの横に並び、検索結果の隣にも現れる小さなアイコンのことです。小さな存在ですが、ブランドの中でも最も目につく部分のひとつです。誰かがあなたのサイトのタブを開くたび、その小さな四角は最初に認識されるものです。だからこそ、鮮明で認識しやすいファビコンは、そのサイズから想像される以上に重要なのです。このツールなら、良い画像が1枚と数回のクリックだけで、きちんとしたファビコンが作れます。

多くの人が想定していない落とし穴があります。ファビコンは1つだけでは不十分なことがほとんどなのです。デスクトップブラウザは16ピクセルと32ピクセルのファビコンを要求し、Android端末やプログレッシブウェブアプリは192と512を使用し、iOSのホーム画面は大きなタッチアイコンを求め、アプリストアは1024ピクセルの画像を要求します。これを手作業で全部のサイズに拡大縮小するには、デザインソフトを開き、キャンバスサイズを調整し、ファイルを1つずつ書き出す作業が待っています。このファビコン生成ツールなら、アップロードした1枚の画像を、適切なサイズのPNGアイコン8個に数秒で変換してくれます。

画像をアップロードすると、生成ツールは16x16、32x32、48x48、64x64、128x128、192x192、512x512、1024x1024ピクセルのアイコンを生成します。このセットは、ほぼあらゆる場面をカバーします。小さいタブアイコン、ブラウザやOSが要求する中間サイズ、モバイルのホーム画面やウェブアプリのマニフェストが使う大きなアイコン、アプリストアが要求するフルサイズの画像です。生成結果はプレビューグリッドで確認でき、実際に必要なサイズだけをダウンロードできます。

良い結果を得る最も簡単な方法は、正方形の画像から始めることです。アイコンは常に正方形で、ツールはソース画像を正方形のキャンバスに収まるようにスケーリングするため、正方形でない画像は引き伸ばされてしまいます。512x512以上の透過PNGが最適です。たとえばロゴの幅が1000ピクセルなのに高さが400ピクセルしかない場合は、生成ツールに歪ませるより先に、正方形にクロップしてからアップロードしましょう。

大きなロゴを16ピクセルまで縮小するのは、本当に難しい作業です。文字は消え、細い線はにじみ、繊細なグラデーションはノイズに変わります。この生成ツールはブラウザの高品質画像スムージングを使い、どのサイズでもエッジを可能な限りきれいに保ちますが、デザインが込み入っている場合はどんなツールにも限界があります。シンプルで大胆なシンボルに強いコントラストがあれば16ピクセルまで生き残りますが、複雑なアートワークはほとんど生き残りません。

プライバシーは、このアプローチが選ばれる主な理由のひとつです。変換処理はすべてブラウザ内のHTML5 canvas APIで行われます。画像がサーバーにアップロードされたり、保存されたり、どこかに送信されたりすることは一切ありません。未公開の製品、クライアントのロゴ、第三者のサーバーに置きたくないものなら何でも、このツールに適しています。作業が終わったらタブを閉じれば、アップロードの痕跡はすべて消えます。

このツールが何をしないのかも明確にしておきましょう。出力されるのはPNGアイコンで、これは実質的にすべての現代プラットフォームが受け入れます。.icoファイルを作成したり、すべてをzipアーカイブにまとめたり、ウェブアプリのマニフェストを生成したりはしません。実際にはこれはほとんど問題になりません。モダンブラウザは何年も前からPNGファビコンを普通に使っており、.ico形式は主に古い時代の遺物です。必要なサイズをダウンロードし、ページにいくつかのlinkタグを追加すれば完了です。

アイコンをウェブサイトに組み込むのは簡単です。ページのheadにメインのファビコンを指すlinkタグ（たとえば32x32のPNG）を追加し、iOS用のapple-touch-iconリンク、プログレッシブウェブアプリを運営しているならmanifest.jsonファイルに192x192と512x512のエントリも追加します。ファイルをサーバーにアップロードしてタグで参照すれば、タブ、ブックマーク、ホーム画面にアイコンが表示されます。

これが必要になる日常的な場面を考えてみましょう。ブロガーはWordPress用にきちんとしたサイトアイコンが欲しくて、Photoshopを開きたくありません。開発者はウェブアプリをリリースするために、プロジェクトフォルダにファビコンとPWAアイコンが必要です。スタートアップはApp Storeの掲載用に、小さなランチャーとしても機能する1024x1024の正方形アイコンを準備しています。学生は授業のプロジェクトを作り、完成した見た目にしたいと考えています。全員が同じツールを1分以内で使えます。

ここで重要なのはツールよりもデザインの選択です。ファビコンはロゴの最もシンプルな形に近づけ、ブランドカラーを使い、大きなサイズでしか意味を成さない文字は避けましょう。アイコンの背景が透明の場合は、ブラウザのタブにはライトテーマとダークテーマがあることを忘れず、両方でテストしてください。背景が単色なら、どこでも一貫して見えます。

もうひとつ実用的な注意点として、ブラウザはファビコンを積極的にキャッシュします。サイトのアイコンを更新した後も、しばらく古いものが表示され続けることがあります。ハードリフレッシュか、シークレットウィンドウでの素早い確認で、新しいアイコンが反映されているか確認できます。ファイルを小さく保つのも役立ちます。ファビコンはページの読み込みごとに要求され、最初に取得されるファイルのひとつになることが多いからです。

これを使うのにデザインの経験やインストール済みのソフトウェアは一切必要ありません。完全にブラウザ内で動作し、Windows、macOS、Linux、さらにはスマートフォンでも動作します。作成するアカウントも、支払うものもありません。好きなだけ、好きなときに画像をアップロードして、必要なサイズだけをダウンロードできます。驚くほど退屈な作業から静かに救ってくれる、そんな小さなユーティリティのひとつです。