今回は、ファビコン（favicon）を表示させる方法をご紹介します。
ファビコンとは、ブラウザのタブやアドレスバー、ブックマーク（お気に入り）に表示される 16 x 16px のアイコンを指します。また、デスクトップに Web サイトへのショートカットを作成すると、このファビコンがデスクトップアイコンとして使用されることがあります（この場合は 32 x 32px）。
ブラウザに表示される小さなロゴマークのようなもので、サイトのビジュアルイメージをアピールする上で重要な要素のひとつと言えるでしょう。
ファビコンとは、ブラウザのタブやアドレスバー、ブックマーク（お気に入り）に表示される 16 x 16px のアイコンを指します。また、デスクトップに Web サイトへのショートカットを作成すると、このファビコンがデスクトップアイコンとして使用されることがあります（この場合は 32 x 32px）。
ブラウザに表示される小さなロゴマークのようなもので、サイトのビジュアルイメージをアピールする上で重要な要素のひとつと言えるでしょう。
ファビコンを作成する
Firefox ではアニメーション GIF や PNG 形式の画像でもファビコンとして表示させることが可能ですが、Internet Explorer では ICO 形式（Windows icon）のみとなっているので、ここでは ICO 形式でファビコンを作成することにします。
ファビコンの作成方法は、以下の記事にわかりやすく解説されていますのでご参照ください。Photoshop CS で ICO ファイルを保存可能にするプラグインについても言及されています。
「Photoshop で背景透過の美しい favicon (ファビコン) を作成する」
私がこのブログ用に作成したファビコンがこちら。
ファイル名は何でも構いませんが、私はいつも「favicon.ico」にしています。
ファビコンをアップロードする
ご存知の通り、ソラマメブログでアップロードできるファイル形式には制限があり、ICO 形式のファイルをアップロードすることが出来ません。その為、外部のオンラインストレージを利用します。
私がお薦めするのは、Dropbox というストレージサービスです。当ブログでは公開テンプレートをテキストファイル（.txt）で配布していますが、それらは Dropbox のパブリックフォルダにアップロードしたものです。
貴方も私も250MBのボーナススペースがもらえるDropbox招待リンク
Dropbox の利用方法については、以下の記事にわかりやすく解説されていますのでご参照ください。
「Dropbox徹底解剖 - 一度使ったら手放せなくなる! オンラインストレージサービスの本命 | Web担当者Forum」
HTML テンプレートに手を加える
手を加えるのはテンプレート「トップページ」「個別記事」「アーカイブ」の３つです。
head 要素（<head></head>）の中に以下の link タグを追記します。
<link rel="shortcut icon" href="ファビコンのURL" />
私は他の link タグとまとめることにしました。
以下は「トップページ」の追記例です。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<%CSSUrl%>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%RDFUrl%>" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%RSDUrl%>" />
<link rel="contents" href="<%SiteMapUrl%>" />
<link rel="shortcut icon" href="ファビコンのURL" />
<title><%BlogTitle%></title>
<meta name="description" content="<%BlogDescription%>" />
<meta name="keywords" content="<%BlogTitle%>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
完成
これでファビコンが表示されるようになりました。
Dropbox の補足
オンラインストレージは Dropbox の他にも様々なサービスがありますが、Dropbox の良いところは、このパブリックフォルダの存在です。
パブリックフォルダに入れたデータには誰でも（Dropbox ユーザーでなくとも）アクセスすることが可能です。しかし、フォルダ単位での閲覧は出来ません。ファイル毎に割り当てられる専用の URL を使うことで初めてアクセスが可能になるのです。
また、Dropbox は 無料アカウントでも
加えて、今回の ICO ファイルを始め殆どのファイル形式をサポートしていますから、様々なシーンで活用できると思います。
Wrote by Yume｜Comments(0)
Leave a Comment
Categories
Recent Articles
テンプレートのダウンロード方法を変更しました (11/22)
公開テンプレート「BlackFloral」 (11/18)
ブログ移動しません (8/26)
公開テンプレート「CheckerBlue（２カラム）」 (5/24)
公開テンプレート「CheckerRed（２カラム）」 (5/24)
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Search
Recent Comments
EugeneEterO / 公開テンプレート「WhiteStri･･･
Michaelreuts / 公開テンプレート「WhiteStri･･･
buy diploma online / 公開テンプレート「WhiteStri･･･
RaymondGen / 公開テンプレート「WhiteStri･･･
RaymondGen / 公開テンプレート「WhiteStri･･･
Profile
Yume
つぶやき
（2010.10.29）
随分と長い間ブログを放置していましたが、そろそろ新しいテンプレートの作成、記事の整理を行ったりしようかなぁと。思ってたりは、する。
随分と長い間ブログを放置していましたが、そろそろ新しいテンプレートの作成、記事の整理を行ったりしようかなぁと。思ってたりは、する。
Add Message
Subscribe Mail
QR Code
Login
新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。
Counter
