ファビコン作成
どんな画像からでも、ブラウザーが求めるサイズをすべて詰め込んだfavicon.icoを作ります。
アップロードなしでファビコンを作る
ファビコンは、ブラウザーがタブやブックマーク、ショートカットの横に表示する小さな画像です。その定番のファイルがfavicon.icoで、これは実は1枚の画像ではありません。ICOという容れ物に正方形のサイズがいくつも入っていて、ブラウザーが必要な大きさを選び出します。このページは出力をICO、サイズを定番の4種類にした状態で画像変換ツールを開くので、ロゴを置くだけでそのファイルが返ってきます。
処理はすべてブラウザー内で完結します。各サイズはキャンバスに描かれ、ICOの容れ物はページの中で1バイトずつ組み立てられます。ロゴが端末の外に出ることはないので、デザインがまだ公開前でも安心です。
ファイルに入るもの
| サイズ | ブラウザーが使う場面 |
|---|---|
| 16 px | タブとブックマークの一覧 |
| 32 px | 高精細ディスプレイ、アドレスバー、ピン留めしたタブ |
| 48 px | Windowsのショートカットや一部のデスクトップ表示 |
| 256 px | 大きなショートカットアイコンや、アイコンを拡大する場面全般 |
アイコンのサイズのメニューには、昔ながらの3種類「16・32・48 px」のほか、必要なものがはっきりしているときのために「256 px のみ」と「32 px のみ」も用意されています。サイズは固定の正方形なので、品質とリサイズはここでは効かず、ページ上でも非表示になります。
元画像の選び方
- 横長より正方形。正方形でない画像は透明な余白を足して正方形に収められるため、横長のロゴは中央に小さく収まります。あらかじめ正方形にトリミングするか、文字を含むロゴ全体ではなくシンボル部分だけを使ってください。
- 細かいものより単純なもの。16 pxでは1行の文字はただの灰色のにじみになります。見分けのつくファビコンの多くは、1文字か1つの図形、あるいは1つのシルエットです。
- コントラストをつける。アイコンはブラウザー自身の背景の上に載り、その背景はテーマによって明るくも暗くもなります。白の上でしか成立しない形はダークモードで消えてしまいます。
- 大きい画像から始める。最大サイズが引き伸ばされないよう、256 px以上の画像を用意してください。小さいサイズは縮小して作られるため、細部は自然に失われていきます。
サイトへの設置
favicon.icoをサイトのルートに置くだけで、どのブラウザーにも通じます。どれも既定でそこを見に行くからです。明示したい場合や、PNGも合わせて配信したい場合は、ページのhead内にlinkタグを追加します：<link rel="icon" href="/favicon.ico" sizes="any">。多くのサイトは.icoと一緒にapple-touch-icon用の180 pxのPNGを用意しますが、それも出力をPNGに戻してリサイズすればここで作れます。
ファイルを差し替えても古いアイコンが表示され続ける場合、それはファイルの不具合ではなくキャッシュです。ブラウザーはファビコンを長く保持します。スーパーリロードするか、linkタグに?v=2を付ければ解決します。
同じツールで作れる他の形式
この変換ツールはPNG、JPG、WebPも書き出せるうえ、KB単位の目標サイズまで圧縮できます。アイコンではなく普通の変換が目的なら、PNGをJPGに変換やPNGをWebPに変換が最初からその形式で開きます。