ブログやサイトにFavicon(ファビコン)を設置 – 赤い馬なんて嘘だっ!!
HPやブログをやっていくうちに、ちょっとやりたくなる小技なのが ファビコン ですよね(0ﾟ･∀･)ｂ
「ファビコンってなんぞ？(´・ω・｀)」という方も、実は見たことがある方が多いと思われます。
文章だけでは分かりずらいので、画像にしてみました┏Ｏ ﾍﾟｺﾘ
これは Firefox というタブブラウザで、当ブログとFC2ブログを開いているときのツールバー付近です。
上のURLが表示されている部分がアドレスバー。
下がブラウザのタブ部分です。 WEBページのタイトルが表示されていますね。
画像のSS(スクリーンショット)は、分かりやすいように影をつけて加工してあるのですが･･･。
わかりますか？この2種類の画像。 ヘンな家 と 赤い馬 が交互に表示されていますよね？
この画像が、Favicon (ファビコン) や お気に入りアイコン と呼ばれるモノですｃ⌒っﾟдﾟ)っφ
詳しくは、Wikipedia など。
グーグルで検索すれば、解説しているサイトを数多く拾えるので、ぐぐってみると良いです♪
赤い馬なんて(つД｀)ｲﾔｯ!! という方には必見!? 今日の記事は
「自分のブログやサイトにFavicon(ファビコン)を設置する方法の解説」だお ⊂⌒~⊃｡Д｡)⊃
FC2ブログ以外の方でも、ファビコンを設置することは可能ですので
ご自分のブログやサイトに、オサレなアイコンを飾ってみましょー！ｩﾘｳﾘ(*´Д｀)σ)Д`)ｧｩｧｩ
あっても・なくても困らないケド、あるとワンポイント的な存在のファビコン。
この子の活躍の場は、ブラウザによって若干異なるのですが、主に
アドレスバー / お気に入りフォルダ / タブ などで表示されます。
ただ、ファビコンを設定しているWEBページを開いても
なかなか表示してくれないツンデレなブラウザもおりますので、そのへんはご愛嬌。
「ん～。もぅ！IEタソったらぁ～ん(*´д｀*)」 と、軽く受け流してあげてください。
それではまず、準備をしましょう！必要なものは…
- 16×16(px) サイズのアイコン画像
- アイコン画像を .ico ファイル(ICO形式) に変換できるソフト
最近のブラウザは、GIF形式やPNG形式の画像でもファビコンとして
読み込むことができるようになってきていますが、多くのブラウザで表示させたい場合は
ICO形式の画像を準備して、設置することが好ましいです。
このICO形式の画像とは、拡張子が .ico になっている画像のことなのですが
小難しく考える必要はありません。例えば、
・写真などの画像は ***.jpg (JPEG形式)
・素材用などの画像は ***.gif (GIF形式) / ***.png (PNG形式)
これらと同じで、***.ico (ICO形式) は、Windows用アイコン画像の形式 なんです。
(Windows のデスクトップ等にあるショートカットアイコンの画像も、ICO形式です)
「***.jpg とか ***.gif とか、それなんて伏字？(´・д・｀)」
という方。拡張子というものをご存知無いのですね？わかります。
- 【拡張子を学んでみる参考リンク】
- つ 拡張子とは 【extension】 – 意味・解説 ： IT用語辞典
- つ 拡張子 – Wikipedia
- つ Windows XP でファイルの拡張子を表示する方法
- つ Windows Vista ヘルプ : ファイル名拡張子を表示または非表示にする
それでは、いよいよファビコンを表示させるための作業の手順です(つ･ω･)つ
*テンプレートやページソースを編集する際には、事前にバックアップをお願いします。
- 16×16(px) サイズの画像を準備し、サーバーにアップロードします。
- 【XHTML用】 <head> ～ </head> 部分に、以下のソースを貼り付けます。
赤い文字の部分は、アイコン画像のURLに書き換えてください。(アイコン画像がICO形式の場合)
<link rel=”shortcut icon” href=”***.ico” type=”image/vnd.microsoft.icon” />
<link rel=”icon” href=”***.ico” type=”image/vnd.microsoft.icon” />(アイコン画像がGIF形式の場合)
<link rel=”icon” href=”***.gif” type=”image/gif” />(アイコン画像がPNG形式の場合)
<link rel=”icon” href=”***.png” type=”image/png” />- 【HTML用】 <head> ～ </head> 部分に、以下のソースを貼り付けます。
赤い文字の部分は、アイコン画像のURLに書き換えてください。(アイコン画像がICO形式の場合)
<link rel=”shortcut icon” href=”***.ico” type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”***.ico” type=”image/vnd.microsoft.icon”>(アイコン画像がGIF形式の場合)
<link rel=”icon” href=”***.gif” type=”image/gif”>(アイコン画像がPNG形式の場合)
<link rel=”icon” href=”***.png” type=”image/png”>- きちんと表示されるか確認して、成功していれば作業終了です。お疲れ様でした┏Ｏ ﾍﾟｺﾘ
もし、ご自分のブログやサイトが XHTML / HTML のどちらか分からないという方は
ファイルやテンプレートのソース上部にある DOCTYPE や HTML 要素の記述で確認してください。
<!DOCTYPE html PUBLIC “***この部分***” …
*XHTML もしくは HTML という記述があればそれに該当します。<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” …
*html 要素がこのような記述であれば XHTML です。
また、アイコン画像がICO形式の場合 のソースは、2種類ありますが
どちらか1つを記述すれば、表示できるようです。(当ブログは後者1つのみ記述)
ただ、「多くのブラウザで表示するために出来る限りのことをしたい！」
という方は、2つとも指定しておけば良いと思います。
逆に、「表示できないブラウザは仕方ない。それよりソースが長いよ(‘A`)」という方は
type の部分をけずってしまっても構いません。
「画像をICO形式に変換したいんだけど、おすすめのソフトは？もちろんフリーで。」
という方には、Venoa が使用しているフリーソフトをご紹介。
@icon変換 / towofu’s SOFT様 (つ･ω･)つ http://www.towofu.net/soft/
最後に。「何回やっても表示されないんだけど(´Д⊂ ﾓｳﾀﾞﾒﾎﾟ」という方。
お使いのブラウザを全て閉じて、キャッシュのクリアを行ってから再度、確認してみてください。
それでは今日はこの辺で。
長文を最後までお読みいただき、ありがとうございました┏Ｏ ﾍﾟｺﾘ
こ の記事は過去ブログからそのまま移行していますので情報が古くなっている可能性が高いです。現在との比較や内容の確認・修正等は行っておりませんので、こ ちらの記事をご参考になる際には投稿日を必ずご確認ください。なお、記事に関するご意見等はいつでもお気軽にコメントください。