Webサイト用のファビコンの作り方

Web Photoshop

Webブラウザのタブの左端に表示されるアイコンをファビコン（favicon：favorite icon）という。
ファビコンはそのサイトのシンボルマークのようなものとなる。

今回はそのファビコンの簡単な作り方をまとめておく。

制作手順
  1. Photoshopで幅48px×高さ48pxの新規ファイルを作成する。
  2. 別途アイコンにしたい形を画像などから切り抜き、解像度を下げて48px×48px内に収まるように加工する。
  3. 準備ができた画像をコピペで48px×48pxのファイルに配置する。
  4. 色調補正で彩度を上げる（場合によってはMAXあたりまで）。
  5. 色調補正でコントラストを上げる（場合によってはMAXあたりまで）。
  6. 画像加工により潰れた部分があったら描き足す。
  7. 背景部分を適当な色で塗りつぶす。
  8. Web用で保存する。
  9. ファビコン生成サイトなどでファビコン（拡張子“.ico”）を生成する。参照http://ao-system.net/favicon/
  10. 上記サイトの指示通りに、URL部分を自分のものに書き換えてHTMLのhead部に2行のコードを貼り付ける。
  11. サーバーにHTMLとファビコンをアップして完了。

※制作手順1〜5は順番をある程度自由に変えてもOK。

制作例