HOME  > Web design  >

ファビコンの作成


ファビコン(favicon)は、HTMLファイル(ウェブサイト)のシンボルとして登録するアイコンの俗称です。

ファビコンは、複数のサイズのアイコンを包含したもの(マルチアイコン)が一般的なため、マルチアイコンの作成手順について、簡単にまとめました。


1. 作成するアイコンのサイズ

  • 16 x 16 px
  • 32 x 32 px
  • 48 x 48 px
  • 64 x 64 px
  • 152 x 152 px

Webを検索すると、デバイス、環境により多くのサイズが存在していることを確認できますが、とりあえず、これだけあれば、大体は問題ないかと思います。152 x 152については、スマートフォン対応で念のため程度です。


2. アイコンファイルの作成

各サイズの画像を作成し、png形式で保存します。

Windowsであれば、標準のペイントで作成できます。グリッド線の表示を有効にして、最初に152 x 152のサイズを作成・保存したあと、サイズ変更でピクセルを指定して、各サイズの画像ファイルを作成します。サイズ変更した時に、必要に応じて画像を修正します。

周囲の余白部分を透明にすることで、見栄えを良くできますが、ペイントでは機能が無いため、PhotoShopなどで透過を設定します。


3. マルチアイコンの作成

Webサービス半透過マルチアイコンやファビコン(favicon.ico)作成 ギザギザの無い美しい影を持ったアイコンが作成できます。無料です。(https://ao-system.net/alphaicon/index.php)で作成できます。


4. ファビコンをHTMLで指定する。

ブックマークに登録される名前やアイコンを参照ください。