faviconについて必要なこと


faviconを作るにあたって必要な事をまとめたので何か便利に使って下さい。

◆最終目的
「favicon.ico」という.ico形式の画像ファイルを、サーバーにUPする。
※URL直下(ルートディレクトリ)にfavicon.icoを置かない場合は、HTML中に以下タグを記述してUPする。

<link rel="shortcut icon" href="http://●●●/favicon.ico">

面倒だし、普通はルートディレクトリにおきましょ。

◆以下はfavicon.icoの作成方法。(@icon変換で作るマルチアイコン)

(1)まず正方形で 16px×16px 32px×32px の2種類 画像を用意する
(16px–アドレスバーとかに表示用 32px–デスクトップとかで表示用)

画像が無いって人はオンラインで作成出来るリンクを。
favicon.ico Generator
Favicon Generator

(2)マルチアイコンにして .ico形式で画像を保存

16pxと32pxの画像を【@icon変換】ソフトで開く。
@icon変換DL

@icon変換に、「小さい方が上」「大きい方が下」にして読み込んで、読み込んだら2つの画像をまとめて選択し
ツールバーの「マルチアイコンに保存」を押す。
保存する時に「favicon.ico」という名前にする。
→UPして完成!

●16pxだけでいい人、もっと簡単に作りたい人、Photoshopで作りたい人

【簡単UPするだけ・16pxのみ】
Favicon Japan (やさしくfaviconの説明もしてくれています)
Favikon (簡単なトリミングも出来る)
FavIcon from Pics

【Photoshopプラグインでfavicon.icoを作る】

Photoshopプラグイン ICO (Windows Icon) Format
(右のFree downloadを押す→何かページが開くが右下のdownloadを押せばOK)

解凍フォルダ内の「ICOFormat.8bi」ていうのを、Photoshopのプラグインフォルダ内、ファイル形式のフォルダの中に入れる。C:\Program Files\Adobe\Adobe Photoshop CS\Plug-ins\File Formats

これで、Photoshopの画像保存時に、
【ICO (Windows Icon) 】形式が選択出来るので「favicon.ico」が作れます。