こんなところも気を使ってみる
favicon（ファビコン）を設定する
faviconとは、favorite icon（お気に入りアイコン）のことで、ブラウザのお気に入りやアドレスバーに表示されます。また、タブブラウザではタブ上に表示もされます。
favicon（ファビコン）をお勧めする理由
ブラウザ上でサイトの見分けがしやすくなる！というのが私の考える最大の利点です。
- サイドバーでブックマークを開いた時の表示
- アドレスバーでの表示とタブでの表示
特にタブブラウザでタブをたくさん開いた時はfaviconでどのタブがどのサイトかということを判断しているので、faviconをつけているサイトはありがたいです。
favicon（ファビコン）の作り方
- 16×16（ピクセル）の画像を用意する
- ico形式に変換する（便利サイト・ソフト）
- アップロード
- htmlファイルの
<head>～</head>間に<link rel="shortcut icon" href="icoファイルまでのパス/favicon.ico">と記述。
favicon（ファビコン）作りに便利なソフト・サイト
- @icon変換 … 画像をico形式に変換できるフリーソフト
- Favicon Generator … 配色とテキストを設定しfaviconを作成
- FavIcon from Pics … アップロード画像をfaviconに変換
- Favicon Generator … アップロード画像をfaviconに変換
- Favicon Editor … ドット絵の要領でweb上で作成。pngアップロードも可
- 256 Pixels … ドット絵の要領でfaviconを作成。
- favicon.ico Generator … ドット絵の要領でfaviconを作成。画像アップロード可
- ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。 … 16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。
favicon（ファビコン）の裏技
…裏技って程のもんでもないですが。
動きのあるfaviconを設定する
実はgif形式のファイルもfaviconとして設定できます。16×16のアニメgifを作り、htmlファイルの<head>～</head>間に
<link rel="shortcut icon" href="icoファイルまでのパス/favicon.gif" type="image/gif">
と記述。
表示が不安定なfaviconを先読みさせる
ブラウザによってはfaviconが表示されたりされなかったり、不安定なようです。そんな時にjavascriptで先読みさせると言う対策があります。
<link rel="shortcut icon" href="icoファイルまでのパス/favicon.ico">の前に
<script type="text/JavaScript"> image = new Image(); image.src="favicon.ico（相対パスでfaviconのファイル名）"; </script>
と記述しておくといいようです。