faviconとはブラウザのタイトルが表示される横に出てくる16px×16pxの画像でのことです。
基本的な設定方法は以下のとおりです。
- 画像を用意する
- .ico形式に変換する
- HTMLにタグを埋め込んで指定する。
faviconを作る時に便利なツールや方法がいくつかあるのでまとめてみました！
webアプリケーションでfaviconを作る
WEBサイトにアクセスするだけで使えるのでネット環境があればすぐ作れます！
WEB上でイラストを描いて生成系
・favicon.ico Generator
http://www.favicon.cc/
faviconをブラウザ上で作成してしまうジェネレータ。
透過にも対応しています。
画像をアップしてから編集系
・Favicon Generator
http://www.degraeve.com/favicon/
画像を一度アップロードしてからブラウザ上で編集が可能！
・favikon
http://www.favikon.com/
画像をアップロードしてから部分的に切り出してfaviconを作成することができます！
画像を変換してくれる系
・favicon japan
http://www.favicon.jp/
言わずと知れたfavicon作成で有名なサイト。
手元にある画像を.ico形式に変換してくれるサイトです。
※GIF、JPG、PNGのみ対応しています。
・freefavicon
http://www.freefavicon.com/
こちらも画像をファビコン形式（ico）に変換するサイト
gif・jpg・png同時に生成してくれます。
ソフトウェアでfaviconを作る
画像を変換してくれる系
・@icon変換
http://www.towofu.net/soft/aicon.php
画像をfavicon形式に変換してくれるソフト。
ページ下のダウンロードからダウンロードできます。
photoshopでfaviconを作る
・Photoshop icoformatICO (Windows Icon) Format Plugin(Telegraphics)
http://www.telegraphics.com.au/sw/product/ICOFormat
Photoshopのプラグイン。
作成した画像をfaviconの形式である.icoの形式で保存することができます。
プラグインのインストール
Photoshop が起動していない状態で、ダウンロードした icoformat プラグインを
C:Program FilesAdobeAdobe Photoshop CSPlug-ins（win7の場合）
プラグインフォルダに入れ込みPhotoshop を起動するだけで使用できるようになります。
入っているかを確認するには、photoshopを起動させアプリケーションメニュー→プラグインについてでインストールされているかでわかります。
faviconの設置方法
設置方法はfavicon画像をサーバーにアップロードし、HTMLのhead内に一行を加えるだけで設置ができます。
rootディレクトリにfavicon.icoという名前のファイルを置いた例
<link rel="shortcut icon" href="./favicon.ico" />wordpressでテンプレートディレクトリのの直下にfavicon.icoという名前のfaviconを置いた場合の例
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
