faviconの作り方：初心者向けの手順（画像→サイズ作成）
公開日
「faviconを設定したいけど、どうやって作ればいいの？」と思うことがあります。
faviconは小さなアイコンなので、作り方のポイントは
- 元画像を用意する
- favicon用のサイズにする
の2つが中心です。
この記事では、faviconの作り方をできるだけやさしくまとめます。
favicon作成に必要なもの
- 元になる画像（ロゴ、アイコン、イラストなど）
小さく表示されるので、シンプルな画像が向いていることが多いです。
faviconの作り方（基本手順）
1）元画像を用意する
おすすめは、正方形に近い画像です。
背景が白で気になる場合は、背景を透明にしてから使うとデザインに合わせやすくなります。
2）favicon用のサイズを作る
faviconは、複数サイズを用意することが多いです。
代表的には
- 16×16
- 32×32
などがよく使われます。
3）必要に応じて形式を選ぶ
環境によって違いはありますが、
- PNG
- ICO
などが使われることがあります。
Petanko Imageのfavicon作成ツールを使う
Petanko Imageでは、favicon用の画像を作成できます。
ブラウザだけで処理するため、画像ファイルを外部サーバーへアップロードしません「画像を用意→サイズ作成」の流れをシンプルに進めやすいです。
【画像例】
今後も、Web向け画像の準備がスムーズになるよう、改善を続けていきます。