Movable Type
サイトにfaviconを付けてみよう。
サイトにfaviconを付ける方法。faviconって何と思われる人の方が多いと思いますので、簡単に解説しますとWebブラウザーのアドレス欄やブックマークなどの名称の前にちっちゃいアイコンが表示されていますよね。あれのことです。結構難しいとか面倒とか思っている方が多いのか、あまりやっていない方が多いですよね。やり方さえ解れば、簡単です。
まず、グラフィックソフトで32×32pixelの大きさの画像を作ります。最初からこの大きさで作る必要はありませんよ、素になるサイズ大きい画像を縮小して32×32pixelにすればOKです。この時、複雑な図形は避ける方がいいです。文字とか入れたい場合は最初の1文字程度にしておいた方がいいと思います。形式はお好みでどうぞ、背景を抜きたい場合は透明色が効く.gif、.png形式にしておくといいでしょう。
次に作った画像をアイコンエディタに取り込みます。自分がよく使っているのは｢あまつぶ｣さんのところで配布しているフリーソフトの｢IconParty｣です。ちなみにMac専用です。
ソフトが起動して画像を表示し、編集が終わったら(する必要がなければそのまま)別名で保存を選択し、名前をfavicon、形式はWindowsICONで保存します。
そうすると、favicon.icoという画像ファイルが生成されるので、それをサイトのindex.htmlと同じ階層に置きます。
次に、favicon.icoを表示させたいhtmlファイルのメタの部分に、(だいたい<head>の下あたりですかね。)
<link rel="shortcut icon" href="favicon.icoの位置指定">
を1行追加します。MOVABLE TYPEのテンプレートに使う場合は、
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico">
とすると良いでしょう。これで表示させる準備はOKです。
で、一連のファイルをサーバにアップすれば表示されます。自身のサイトにアクセスしてみて確認してみて下さい、今まで共通アイコンが表示されていた所にオリジナルアイコンが表示されているはずです。
ただ、この方法はHTMLファイルの<head>の部分が直接いじれる場合に限ります。プロバイダのblogサービスでサイトを作っている場合だと難しいかな〜。