ファビコン作成

ファビコンとは何か、どこに表示されるか

ファビコンは、ウェブサイトを表す小さな正方形のアイコンです。名前は「favorite icon（お気に入りのアイコン）」の略。最初にファビコンを表示したブラウザーがブックマークを「お気に入り」と呼び、その横に表示したことに由来します。

ブラウザーのタブでは、ページタイトルの横に幅16ピクセル、高精細な画面では32ピクセルで表示されます。ブックマークや閲覧履歴でも、サイトの目印になります。スマートフォンのホーム画面にサイトを追加すればアプリのアイコンになり、Googleの検索結果ではサイト名の横に表示されます。

どこに表示されても、役割は同じです。ほかのアイコンに囲まれていても、ひと目で見分けてもらうことです。

ファビコンが複数のファイルになる理由

表示される場所はそれぞれ別の時期に生まれ、求めるファイルも違います。上のファビコン作成ツールは、1枚の画像からそのすべてを作ります。

ブラウザーのタブ、ブックマーク、履歴で使われるのはfavicon.icoです。1つのファイルに16、32、48ピクセルの3サイズが入っています。最も古い形式で、ページでアイコンが指定されていなくても、ブラウザーは今もサイトのルートフォルダーでfavicon.icoを探します。

SVGから作ると、favicon.svgも付きます。SVGのアイコンを表示できるブラウザーでは、こちらが代わりに使われます。ピクセルではなく図形でできているため、どんな画面でも鮮明です。

iPhoneとiPadでは、サイトがホーム画面に追加されたときに、180ピクセル四方のapple-touch-icon.pngが使われます。iPhoneは透明な部分を黒で塗りつぶすため、このアイコンには必ず背景が付きます。選んだ色か、透明を選んだ場合は白です。

Androidのスマートフォンや、ブラウザーからアプリとしてインストールされたサイトでは、icon-192.pngとicon-512.pngが使われます。そのありかを伝えるのがsite.webmanifestです。小さなテキストファイルで、大きいアイコンの場所と、ツールで入力した場合はサイト名をブラウザーに知らせます。

16〜48ピクセルの単体のPNGは、PNG形式を求めるサービス向けの予備です。検索結果については、GoogleがトップページのHTMLにあるアイコンのリンクを読み取ります。

ファビコンをサイトに設定する方法

サイトのファイルをご自身や開発担当者が編集する場合、手順は2つです。

まず、ダウンロードしたzipを展開し、中のファイルをサイトのルートフォルダーに置きます。トップページがある、いちばん上の階層のフォルダーです。確認するには、サイトのアドレスの末尾に/favicon.icoを付けて開きます。アイコンが表示されれば大丈夫です。

次に、README（ツール上にも表示されます）にあるHTMLの行を、各ページのheadに貼り付けます。headは、HTMLの冒頭にある、ページのタイトルを入れる部分です。ICOファイル、Apple touchアイコン、マニフェストに1行ずつ、SVGがある場合はその1行も加わります。

通常はすべてのページで共通のテンプレートを使っているため、貼り付けは1回で済みます。古いアイコンの行は先に削除してください。残っていると、ブラウザーが古いアイコンを使い続けることがあります。

ホームページ作成サービスなら、どちらの手順も不要です。サイトアイコンの設定でicon-512.pngをアップロードすれば、HTMLはサービス側で追加されます。

16ピクセルでも伝わるロゴにするコツ

16×16ピクセルでは、アイコン全体がわずか256個の小さな色の四角になります。多くのロゴは、そんな大きさを想定して描かれていません。

名前ではなく、シンボルから始めましょう。8文字の名前を16ピクセルに詰め込むと、1文字に使える幅は2ピクセルです。シンボルがなければ、名前の最初の1文字を大きく太く使います。細い文字より太い文字のほうが、縮小してもずっと長く読めます。

次に、細部を減らします。極細の線や小さなすき間は周りとにじみ合い、キャッチコピーはつぶれて汚れのようになります。

大切なのは色そのものではなく、明暗の差です。タブはテーマによって明るくも暗くもなり、ネイビーのアイコンは暗いタブバーに溶け込んでしまいます。マークが暗い色ならツールで明るい背景を付け、明るい色なら暗い背景を付けましょう。

余白（ロゴと正方形の端とのすき間）は、さじ加減が大切です。多すぎるとタブの中でロゴが小さくなり、少なすぎると、ホーム画面のアイコンを角丸にするiPhoneで、ロゴの角が欠けてしまいます。

最後に、上の明るいタブと暗いタブのプレビューを、拡大せずに実際のサイズで確認してください。無料のロゴチェックなら、さらに詳しく調べられます。ロゴを32ピクセルに縮小し、細部がどれだけ残るかを測定します。

縮小せずにマークを描き直すべきとき

どうしても小さくできないロゴもあります。緻密なイラストや、陰影で立体感を出す3Dのデザインでは、細部こそがデザインで、16ピクセルでは消えてしまいます。このツールはロゴのサイズを変えられますが、描き直すことはできません。

悪いロゴだということではなく、大きな場所のために作られたロゴだというだけです。小さいサイズ用の版を、意図して描きましょう。簡略化したシンボルか、ブランドのフォントで書いたイニシャルです。色と形の特徴を残せば、見る人は2つを結び付けてくれます。ぼやけた縮小版を使うくらいなら、くっきりしたイニシャルのほうが断然おすすめです。

新しいマークが必要なら、AIロゴ作成をお試しください。ブランド名と、必要なら短い説明から、ロゴをデザインします。ロゴテンプレートのロゴは、シンボルがあるデザインなら、シンボル単体のファイルも付きます。DepthLogoで購入したロゴには、どれもファビコンのファイルが含まれます。