ファビコンに必要なファイルとサイズ一覧

Webサイトには少数のアイコンファイルが必要で、そのほとんどはサイズの決め方に関わります。ブラウザのタブとWindows用に、サイトのルートに16・32・48ピクセルの画像を含むfavicon.icoを置きます。iPhoneやiPadのホーム画面用に180ピクセルのApple touch iconを追加し、ウェブアプリのマニフェストに登録する192・512ピクセルのPNGアイコンも用意します。ファビコン作成では、1つのロゴからこれらすべてを作成し、ページに貼り付けるHTMLの行も書き出せます。

ファイルとサイズ

生成ツールがダウンロードするZIPには、この7つのファイルがすべて入っています。favicon.icoは、16・32・48ピクセルの3つのPNG画像を1つのファイルにまとめたものです。どのアイコンも同じロゴを縮小して描いたものです。生成ツールは、画像の512ピクセル版を元に、各サイズを作成します。

HTMLの記述

生成ツールは、ページのhead部分に入れる4行を書き出します。

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

1行目はfavicon.icoを指し、48×48として宣言しています。2行目は32ピクセルのPNGを指定します。3行目はApple touch iconを指定し、4行目はマニフェストを指し、そこに192・512ピクセルのアイコンが登録されています。16ピクセルのPNGはZIPに入っていますが、これらの行には含まれていません。ブラウザは/favicon.icoも自動で探すため、1行目がなくてもファイルは見つかります。ファイルを別の場所に置いている場合を除き、パスはそのまま使ってください。

小さいサイズには単純な形が必要

16×16ピクセルのアイコンは、全体で256ピクセルです。48ピクセルのアイコンは2,304ピクセル、512ピクセルの元画像は262,144ピクセルです。16ピクセルまで縮小すると、ロゴの細部の多くは失われ、細い線や小さな文字はにじんでしまいます。シンプルなマークか、コントラストの強い1〜2文字を使うのがおすすめです。

文字モードでは、1〜2文字を入力すると、アイコンの中央に大きく描画されます。幅が広すぎる場合は縮小されます。形は正方形、角丸、円から選べます。プレビューには16・32・48・180・512ピクセルの結果が並んで表示され、明るい背景と暗い背景のタブも切り替えられるため、ダウンロード前に小さいサイズの見え方を確認できます。形、余白、背景を変更するとプレビューも即座に更新されるので、設定を試しながら調整できます。

余白、背景、Appleのアイコン

余白は「なし」「小」「大」の3つから選べます。「小」は各辺の10％を空けて、「大」は20％を空けます。画像モードの「なし」では、画像の中央の正方形に切り抜かれるため、横長のロゴの両端が失われます。余白ありの設定では、画像全体が正方形の中に収まるように配置されます。

背景は「透明」「白」「カスタム」から選べ、初期値は「透明」です。Apple touch iconは常に不透明です。画像モードでは、透明な部分は選んだ背景色になります。背景が「透明」の場合は白になります。文字モードでは、文字の背景色になります。Apple touch iconの透明部分は、iPhoneやiPadでは黒く表示されることがあるため、生成ツールで塗りつぶしています。ほかのサイズは、選んだ透明度をそのまま保持します。透過PNGが黒くなる理由で原因を説明しています。

ファビコンは正方形なので、横長のロゴはまず正方形の枠に入れる必要があります。正方形写真メーカーでは、画像全体を1:1の枠に収められ、ぼかし、白、黒、カスタムの縁を選べるため、何も切れずに済みます。画像のサイズ変更では、正確なピクセル数を設定できます。「縦横比を維持」をオンにして、幅と高さの両方を入力すると、画像は歪まずに枠内に収まります。写真のアスペクト比の解説では、よく使われる比率を紹介しています。

反映までに時間がかかる変更

ブラウザはファビコンをキャッシュに保存します。同じアドレスのファイルを変更しても、古いアイコンがしばらく表示され続けることがあるため、通常の再読み込みだけでは不十分な場合が多くあります。アイコンのアドレスを直接開いて、新しいファイルがサーバーにあることを確認してから、キャッシュを無視して再読み込みしてください。それでも古いアイコンが表示される場合は、新しいファイルに別の名前を付け、リンクをその名前に更新します。

fixmintでの作り方

1. 「画像」を選んでロゴを枠にドロップするか、「文字」を選んで1〜2文字を入力します。
2. 「余白」を「なし」「小」「大」から、「背景」を「透明」「白」「カスタムカラー」から設定します。
3. 明るい背景と暗い背景のタブで16・32・48pxのアイコンを確認し、180pxと512pxのプレビューもチェックします。
4. 7つのファイルをまとめて入手するには「ZIPをダウンロード」を、favicon.icoだけなら「favicon.icoをダウンロード」を押します。
5. 「HTMLをコピー」を押し、「ヘッドのHTML」の行を各ページのheadに貼り付けます。

注意すべきケース

• 画像は端末内に残ります。 生成はブラウザ内で行われ、何もアップロードされません。
• 2文字の文字。 2文字も入力できます。両方が収まるように小さく描画されるため、1文字の場合より16ピクセルでは読みにくくなります。
• ファイル名。 HTMLで使われている名前をそのまま使ってください。リンクがそのファイル名を指しているためです。
• 読み込めないファイル。 画像をアイコンに変換できない場合、生成ツールは「この入力からアイコンを作成できませんでした。別の画像をお試しください。」と表示し、出力を消去します。別のファイルを試すか、一般的な形式で画像を保存し直してください。