Website Tools: ファビコンの作成

Others

ファビコンの作成

1. 画像の作成
画像を作成（JPEG、GIF、PNG など）
　・透過を使う場合は、GIF か PNG
　・アニメーションの場合は、アニメーションGIF

2. ファイル変換
IE は 16×16、chrome、firefox、safariなどは 32×32 を使っている場合が多い。
古いIE が ico しか認識できない。

>> Favicon Generator（簡単操作）
>> ファビコン favicon.icoを作ろう!（マルチアイコンも作れる）

3. LINKタグ
<head> ～ </head> に記述
　（両方指定しておくと確実）

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

サーバーのルートディレクトリに favicon.ico を設置しておくと、指定が無くても認識する場合もある
LINKタグで指定する場合は、ディレクトリやファイル名を変えることもできる

※ ファビコンが表示されない場合

ファイルが壊れている	パソコンの画面上で、ico ファイルが表示できていないのなら、ico ファイルを作り直す
キャッシュが残っている	以前のページデータが残っていることも多い。キャッシュをクリアしてみる。
サーバーが認識していない	サーバー設定を直接変更できるのであれば、mime.types にファイルタイプを追加。 .htaccess が使えるなら［ AddType image/vnd.microsoft.icon .ico ］を追加。どちらもできないなら、ico ではなく、jpg や png の画像を使うしかない。