ファビコンの作り方｜サイズ・画像形式・背景を初心者向けに解説

01

最初に用意するもの

1. サイトを表すシンボル：小さくしても形や色が分かるマークを一つ決めます。
2. 正方形の画像：横と縦が同じ大きさの作業画面を用意します。
3. 画像の保存場所：あとから探せるよう、HPフォルダ内の決めた場所へ保存します。

このサイトでは、シンボルだけの512×512px画像を元画像として用意し、公開用のファビコン画像はassets/images/common/へまとめています。

02

なぜ正方形にするの？

ファビコンは基本的に正方形で準備します。横長のロゴをそのまま小さな正方形の場所へ入れると、左右の文字が読めなくなったり、全体が小さくなりすぎたりするためです。

正方形は「横と縦が同じ長さ」という意味です。たとえば512×512px、32×32pxは正方形です。

03

元画像は何pxで作ればいい？

完全初心者が最初に用意する実用例として、512×512px程度の正方形画像を元画像にすると管理しやすくなります。

04

ファビコンの画像形式

最初は、PNGとfavicon.icoを中心に覚えれば十分です。全部の形式を一度に作る必要はありません。

05

PNGとは？

PNG（ピーエヌジー）は画像を保存する形式の一つです。ファイル名の最後が.pngになります。

背景を透明にする「背景透過」に対応し、普段の画像として開いて確認しやすいため、初心者でも扱いやすい形式です。このサイトでは32×32pxのfavicon-32.pngも使っています。

06

ICOとは？

ICO（アイシーオー）は、昔からファビコンで使われてきた画像形式です。favicon.icoという短いファイル名をよく見かけます。

ICOは複数の大きさを一つのファイルに入れられます。PNGとどちらか一つしか使えないわけではなく、このサイトのように両方をHTMLで指定する方法もあります。

07

背景透過と白背景はどちらがいい？

どちらか一方が絶対の正解ではありません。背景透過は周囲になじみやすい一方、シンボルと表示場所が同じような色だと輪郭が消えることがあります。白背景は形を見せやすい場合がありますが、暗い画面では白い四角が目立つこともあります。

• 白い背景でもシンボルが見えるか
• 暗い背景でも形が分かるか
• 背景透過にしたとき輪郭が消えないか
• 実際のブラウザタブで見たときに違和感がないか

08

ファビコンに文字は入れる？

文字を入れてはいけない、という決まりではありません。ただし「AIはじめノート」という文字全体は、小さなタブではほとんど読めなくなります。

今回のサイトでは、文字付きの大きなロゴではなく、シンボルだけをファビコンに使う方が向いていました。一文字や単純な記号を使う場合でも、小さくした状態で読めるかを確認します。

09

良いファビコン・見えにくいファビコン

10

ファイル名は短く分かりやすくする

あとからHTMLへ書くため、半角英数字で短く、役割が分かる名前にします。

favicon.png
favicon.ico

大文字と小文字、ハイフン、拡張子まで正確に覚えにくいため、保存したファイル名をコピーして使うと間違いを減らせます。

11

作成後チェック

• □ 正方形になっている
• □ 小さくしても形が分かる
• □ 文字を詰め込みすぎていない
• □ ファイル形式を確認した
• □ ファイル名を確認した
• □ 保存場所を確認した

12

2ページ目のまとめ

元画像は大きめの正方形で用意し、小さくしたときの形、背景、色の差を確認します。最初はPNGとICOを中心に覚えれば大丈夫です。

画像を作っただけではHPには表示されません。次はHTMLと画像をつなぎます。

RELATED

一緒に確認できる関連記事