タブの小さなアイコン、どう作る？ファビコンをハッシー先生に聞いてみた

ファビコンってなぜ大事？

ファビコンは、ブラウザのタブやブックマーク、スマホのホーム画面などに表示される小さなアイコンです。タブをたくさん開いているとき、人は文字よりもこのマークで「どのページか」を見分けています。

設定されていないと、ブラウザの標準のマークが表示されます。内容がしっかりしたサイトでも、ここが空いていると、どこか作りかけのような印象を与えてしまいます。反対に、ロゴがきちんと出ていると、それだけで「ちゃんと運営されているところだな」と感じてもらえます。

園や学校、地域の団体のサイトでは、保護者の方や利用者さんが何度も見に来てくれます。スマホのホーム画面に追加してもらえたとき、そこにロゴが並んでいる。小さなことですが、信頼や親しみにつながる大切な部分です。

ただ、きちんと作ろうとすると、パソコンのタブ用、iPhone用、Android用と、いくつものサイズや形式が必要になります。ひとつずつ画像を作って、名前を付けて、設定を書いて……と考えると、後回しにしたくなる気持ちもよく分かります。

ツールの使い方

1. ロゴ画像を1枚ドラッグ＆ドロップするか、「ロゴ画像を選ぶ」から選びます。PNG・JPEG・SVG・WebPに対応していて、512px以上の正方形に近い画像だときれいに仕上がります。
2. タブ用アイコンの背景、余白、角丸、画像の収め方（全体を入れる・正方形に切り抜く）を調整します。ブラウザのタブ（明るい画面とダークモード）や、iPhone・Androidのホーム画面での見え方をプレビューで確かめられます。
3. 「まとめてZIPで保存」でファイルを書き出し、サイトのいちばん上の階層にアップロードします。表示された「貼り付けるHTML」をコピーして、各ページの <head> の中に貼り付ければ完了です。

ZIPには favicon.ico や apple-touch-icon.png、Android用の192px・512pxの画像、site.webmanifest などがまとめて入っています。画像の処理はすべてブラウザの中で行い、外部には送りません。

ロゴがまだ手元にないときは、「見本の画像で試す」でどんなものが作れるかを先に見ておくこともできます。ホーム画面に表示される名前も「サイト名」の欄で決められるので、長い正式名称ではなく、短く分かりやすい名前にしておくと親切です。

ここがポイント

• タブ用の余白は少なめに。タブのアイコンは16pxととても小さいので、余白は0〜5%がおすすめです。スマホ用は、角が丸く切られてもロゴが欠けないよう10〜15%ほど取ると安心です。
• 横長のロゴはマークだけを使う。社名の文字まで入れると、小さすぎて読めなくなります。「正方形に切り抜く」でマーク部分だけを使うと見やすくなります。
• 暗い色のロゴはダークモードで確認。黒いタブの上では見えにくくなることがあります。そのときはタブ用アイコンの背景に色をつけましょう。なお、スマホ用は透明のままだとiPhoneで黒く表示されるため、指定した背景色で塗られます。
• WordPressならHTMLの貼り付けは不要。管理画面の「外観」→「カスタマイズ」→「サイト基本情報」の「サイトアイコン」に、512pxの画像を1枚登録するだけで大丈夫です。HTMLと両方入れると重複するので、どちらか一方にしてください。

まとめ

ファビコンは、サイトの中でいちばん小さなデザインかもしれません。それでも、毎日のようにタブやホーム画面で目に入る、サイトの顔のひとつです。

ロゴがあれば、作業は数分で終わります。公開したまま空いているところがあれば、この機会にぜひ整えてみてください。

ファビコンを整えたら、スマホのホーム画面に自分のサイトを追加して、どんなふうに並ぶかも見てみてください。見に来てくれる人と同じ目線で確かめてみると、ほかにも整えたいところが見つかるかもしれません。

ファビコン一括作成を使ってみる

ロゴそのものを整えたい、設定してもアイコンが変わらないといったときは、お問い合わせからお気軽にご相談ください。