Favicon 設置

Favicon 設置

Posted at August 7,2005 11:56 PM
Tag:[Customize, Favicon]

Favicon遅ればせながら Favicon を設置しました。
Favicon は「favorite icon(お気に入りアイコン)」の略で、サイト表示あるいはブラウザのお気に入りやブックマークに登録すると、そのサイトにオリジナルのアイコン(Favicon)が予め用意されていればそれがお気に入りリストやアドレスバーのURLの左側に表示されるというものです。当サイトではバナーの猫の顔をそのまま使ってみました。
以下作成&設置方法です。

1.Favicon 用画像作成
画像作成ソフトで正方形の画像を作成します。画像サイズは 16px×16px らしいので、私は最初からそのサイズで画像を作りました。画像を作成したら bmp / gif / jpg / png 等の形式で保存します。
なお次の変換作業で対応するファイル形式が異なるようです。また画像サイズを縮小してくれるサイトもあるようです。

2..ico ファイルに変換
Favicon は .ico 形式である必要があり、作成した画像を下記のサイトで変換します。変換サイトは他にも多く存在します。

例えば Favicon Japan を利用する場合、トップページにある「Favicon自動生成」フォームに作成した画像ファイルを指定し「Faviconを作成する」をクリックします。次のページに生成された Favicon が表示されますので、OKであれば「Download」をクリックして favicon.ico をダウンロードします。

3.ファイルのアップロード
favicon.ico をローカル・サイト・パス(index.html が置かれているディレクトリ)にアップロードします。

4.テンプレートの修正
各テンプレートに次の1行を <head>~</head> の間に追加します。

<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />

追加したら保存・再構築してください。

以上です。OSとブラウザによって対応が異なるようです。Browser Favicon 対応表によればWindows2000/XP のFirefoxは完全に対応しているようで、ページをリロードするだけで表示されるようになります。IEはお気に入りに追加することで表示されます。ブラウザのキャッシュや一時ファイルを削除するタイミングで表示される場合もあるようです。

参考サイトおよび、テンプレートご利用サイトを検索したところ、多数のエントリーがありました(純粋な Favicon 設置の記事のみ。とりこぼしありましたらお許しください)。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

ファ?ビ?コ?ン・・・。 from TOY COZY MUSEUM 別館
意味もなく伸ばしてみましたが(笑)、Faviconというものにチャレンジしてみました。・・・といってもチャレンジというに... [続きを読む]

Tracked on August 9, 2005 12:08 AM

[喜] ファヴィコン設置しました from 喜怒哀楽
小粋空間様:「Favicon 設置」/*TB*/ 前々から興味があったFavic... [続きを読む]

Tracked on August 9, 2005 10:26 AM

Faviconを設置しました from わたしのヒトリゴト あさきぬ工房
あさきぬ工房のサイトにFaviconを設置しました。FaviconとはFavor... [続きを読む]

Tracked on August 22, 2005 11:03 PM

favicon 設置方法 from STEVEN. WeBlog
ってなわけで、興味が沸いた方はさっそくfavicon設置してみましょう。 このカ... [続きを読む]

Tracked on October 22, 2005 3:04 AM

Favicon置いてみた from SO YOUNG BLOG
Faviconってやつを設置してみた。 ペイントソフトとかで16×16の画像を準... [続きを読む]

Tracked on November 6, 2005 10:14 AM

Faviconつけてました from Suzulog
昨日はhtmlの修正に集中してたらゴミを出すのを忘れてて、収集車の音楽でハッと気づき、ゴミ袋を両手に抱えて走って「待ってー!!」と叫んで呼... [続きを読む]

Tracked on January 17, 2006 8:56 AM

Faviconつけてみました from foodish:”雑”食記
一部ブラウザ(FirefoxはほぼOKらしい、IEはダメっぽい)では表示されていると思います。小粋空間さんのこちらのエントリを参考にしたら、すぐに設置でき... [続きを読む]

Tracked on January 27, 2006 8:26 PM

ころころFavicon from ころころのキモチ
アセラはファビコン設置出来ず・・・しょぼん [続きを読む]

Tracked on February 27, 2006 11:50 PM

Favicon Japan from ココロノコエ
小粋空間さんのサイトで、面白いサイトを発見。 自分で作成した正方形の画像を、縮小してico形式にしてくれるサイト、それが「Favicon Japan」。 ... [続きを読む]

Tracked on March 5, 2006 11:13 PM

FAVICONを作って貼ってみました。 from masamasa blog
FAVICONというのは… アドレスバーの左URLの先頭に小さく表示されるアイコンで、 ブラウザの種類によっては見れる見れないがあります。 MacOSXで... [続きを読む]

Tracked on March 5, 2006 11:58 PM

Favicon なるものを設置してみました from ツール・ド・もんち - Tour De MonChi -
この度、Favicon(ファビコン)なるものを設置してみました。 このFavic... [続きを読む]

Tracked on April 25, 2006 10:55 PM

「Favicon」を作ってみた from 漸之国 漸区 2960番地
今日は前々から興味のあった「Favicon」を作ってみました。 「Photosh... [続きを読む]

Tracked on May 29, 2006 7:49 PM

favicon設定! from HOLGA Fun
faviconを設定しました。これでお気に入りに画像が表示されるはずです。... [続きを読む]

Tracked on June 4, 2006 10:12 PM

favicon(ファビコン)の設置方法。 from バリごと。
小粋空間のfavicon設置というのを見ながら、favicon(ファビコン)を設置してみた。faviconというのは、h... [続きを読む]

Tracked on October 21, 2006 3:42 PM

ブログにFaviconを設置 from 暇人STRのブログ
小粋空間さんのサイトを閲覧していたところ「Favicon 設置」というエントリーを発見しました。 Favicon(ファビ... [続きを読む]

Tracked on December 10, 2006 8:54 PM

お気に入りアイコン(Favicon)の生成ができるサイト from アジャイルな社長が教える!自分をもっとレベルアップさせる裏技
ホームページをブックマーク(お気に入り)に登録した時に、表示されるアイコンをFa... [続きを読む]

Tracked on January 9, 2007 10:51 AM

Faviconの設置 from Hypersilverback's weblog02
 細かなweblogのデザインカスタマイズは続く。  オリジナルのFavicon... [続きを読む]

Tracked on January 28, 2007 1:55 AM

Favicon設置 モジュール化など from takubo blog
いろんなサイトをのぞくとブックマークのアイコンが特別なものがありますよね。 ヤフーやGoogleなどもそう [続きを読む]

Tracked on February 20, 2007 5:29 PM

Faviconつけてみました from どうでもいいこと
遅ればせながら、「どうでもいいこと」でもFaviconを設置してみました。 ブラ... [続きを読む]

Tracked on February 23, 2007 9:41 PM

再構築中(その3) from FFまっじも
Faviconなるものを付けてみました(・ω・) ブラウザのアドレスバーやお気... [続きを読む]

Tracked on March 8, 2007 7:28 PM

favicon設置しました from 青山ではたらく平社員のブログ
おはこんばんちは 「ユー、ちょっとファビコンをあげちゃいなよ」 「ファミコンですか?」 と上司にマジボケをしつつグーグル先生と相談しながらな... [続きを読む]

Tracked on February 27, 2008 10:54 PM

Favicon を設置する from PCオタ.com
Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことで Favorite icon(フェイバリット・アイコン)の略。 日... [続きを読む]

Tracked on July 13, 2008 5:30 PM

ファビコン設置しました♪ from ♪poohな毎日♪
お気に入りに入れるとサイト名の横に出るアイコンをファビコンといいますが、最近いろ... [続きを読む]

Tracked on October 13, 2008 8:50 PM

自分のブログを目立たせる方法ファビコン(favicon.ico)の作り方 from 小雪の情報商材アフィリエイトノウハウ大放出ブログ
ファビコンを設置してブログやサイトを目立たせる方法。ファビコンの設置方法や作り方、マルチファビコンの設定、デスクトップやお気に入りに追加でファビコン画像を... [続きを読む]

Tracked on February 18, 2010 8:53 PM
コメント

おはようございます。お気に入りに追加、させていただきました♪
なければなくてどうってことないものだけど、あるとちょっとしたアクセントになっていいですよね。

[1] Posted by さえら : August 8, 2005 6:56 AM

こんにちは!favicon、この間私も設置しました。あまりにもエラーログに「File does not exist: favicon.ico」ばかり記録されるので。。。

ご存知かもしれませんが、16x16だけでなく32x32も作成して、@icon変換というソフトで2つのiconをグループ化(マルチプルアイコンで保存)すると、デスクトップなどへドラッグした際に大き目のアイコンが表示されます。

[2] Posted by すみちゃん : August 8, 2005 10:13 AM

>さえらさん
こんばんは。
お気に入り追加、ありがとうございます。
一旦追加された後は削除しても大丈夫みたいです。(笑)

>すみちゃんさん
こんばんは。
ご連絡ありがとうございます。
私もどちらかと言えばエラー回避が目的です。(笑)

おっしゃる通り、32x32の記載は省略してしまいましたが一度試してみたいと思います。

[3] Posted by yujiro : August 9, 2005 12:07 AM

こんばんは。
FirefoxやSafariで見かけつつも、こういう方法で・・・と言うかFaviconというモノすら知りませんでした(恥)。
手順通りにサクッと設置出来ました。有り難うございます。
"Google"とか"asahi.com"とか一目瞭然なんですよね、アノ大きさで・・・。まるで米粒芸術の域デスナ?。

[4] Posted by toycozy : August 9, 2005 12:11 AM

Faviconつけたのに忘れてました(笑)
というのも、使ってるブラウザがSleipnirでして、未対応なんです・・・・
まもなく出そうな新しいプニルは対応らしいので、待っております。

[5] Posted by えてぽん : August 9, 2005 12:32 AM

>toycozyさん
こんばんはー。
ご無沙汰してます。
ということで早速の参照ありがとうございます。
ところで一体何のマークなんでしょうか…?(笑)

>えてぽんさん
こんばんはー。
あ、私もSleipnirなので大丈夫です(笑)。
次バージョンが楽しみですね!

[6] Posted by yujiro : August 9, 2005 12:42 AM

あらま。ファビコンまで設置して・・・今時のブログになっていく?。(笑)

でも、私、スレイプニル使いなので自分のファビコンさへ見えてないという。(苦笑)

[7] Posted by Border. : August 9, 2005 1:12 AM

>Border.さん
こんばんはー。
今時ですが、エラーログ回避が目的だったりします(笑)。

ネタ不足という噂も(笑)。

[8] Posted by yujiro : August 9, 2005 1:35 AM

トラックバックどうもありがとうございます!
yujiroさん、お久し振りです★
小粋空間さんもfavicon設置したんですねー。
お気に入り追加した時に、可愛いアイコンが表示されるのは、何だか嬉しいです(*^_^*)

[9] Posted by 祈由 : August 9, 2005 1:57 AM

え?と・・・マークの意味ですね・・・一応トップのバナーにも右側にデザインしている"HAL"なんですね。あの"2001年宇宙の旅"に出てくるヤツ・・・知的コンピュータの赤い目のようなランプ。
・・・・でもアイコンにするとただの赤玉だったりします・・・(笑)。

[10] Posted by toycozy : August 9, 2005 7:07 AM

yujiroさん、お久しぶりです。

私もようやくfavicon設置できました。
ありがとうございましたー。

[11] Posted by ミッチ : August 9, 2005 10:31 AM

TBありがとうございます。

ファビコンは今のところに移転してから設置してないのですよぅ(苦笑)
良い図柄探しもなかなか大変ですし、Sleipnirからは見えない(泣)

手間を惜しまないのも大事なので、近々考えてみます♪
良い機会になりましたぁ!

[12] Posted by 陽子 : August 9, 2005 12:12 PM

>祈由さん
こんばんは。
お久しぶりです。(笑)
気に入っていただけたようでなによりです。
思いつきで切り抜いたのですが、私もなかなか気に入ってます。

>toycozyさん
こんばんはー。
なるほど!わざわざお越しくださりありがとうございました!

>ミッチさん
こんばんは。
トラックバックありがとうございました。
バッチリ表示されてますね!

>陽子さん
こんばんはー。

>>移転してから設置してないのですよぅ(苦笑)
あら、そうでしたか。
新しいテンプレートのようにオシャレなFavicon、期待しています!

#URL修正しておきましたので、勝手ながら後のコメントはなかったということで。

[13] Posted by yujiro : August 10, 2005 1:12 AM

yujiroさーん。
コメントありがとうございました。

いや、実はコメント欄などにもfaviconを表示させる部分は、未解決なのです。

今のところ自分のところでは表示できているけれど、favicon設置してからすでに3日経過しましたが、お友達のMTではまだコメントやTB欄で表示されません。

この辺の謎は、なんなのか。
解決策があるのか、さっぱりです。

Σ(´Д`lll)

[14] Posted by ミッチ : August 11, 2005 7:56 AM

>ミッチさん
こんにちは。
なるほど、それは失礼致しました。

favicon.zip ダウンロードしてみます。

[15] Posted by yujiro : August 12, 2005 12:24 AM

yujiroさん!
わー。favicon.zip、ぜひいじってみて下さい!

そして、ぜひ、謎の解明をっ!?
頼ってばかりでスミマセン(つД`)

[16] Posted by ミッチ : August 12, 2005 9:02 AM

>ミッチさん
こんばんば。
ということで少し解明してみました。

[17] Posted by yujiro : August 13, 2005 9:31 PM

初めまして。
少し前からこちらのエントリを参考にさせていただいています。
おかげさまで出来は別としてですが、すごく簡単にFaviconを設置することができました。
どうもありがとうございました。
SerenBachについても色々とカスタマイズの方法を紹介していただき、とても参考になっています。
ぜひ今後ともどうぞよろしくお願いします。

[18] Posted by ish : January 27, 2006 8:35 PM

>ishさん
はじめまして。
記事参照&トラックバックありがとうございます。
うまく設置できたようでなによりです。

こちらこそ今後ともどうぞよろしくお願い致します。

[19] Posted by yujiro : January 28, 2006 1:17 AM

はじめまして、masamasaです。
yujiro様の記事参考にさせていただき、早速作ってみました。
TrackBackと記事参照させていただきました。
ソネットブログが重く現在難民状態のmasamasaですが、
いろいろと参考にさせていただくことが多いので、
今後もTBさせていただくことになると思いますので…。
どうぞよろしくお願いします。

[20] Posted by masamasa : March 6, 2006 12:19 AM

>masamasaさん
こんばんは。
ご利用&トラックバックありがとうございました。
うまく設置できて良かったです。
トラックバックはどしどし送信してやってください。
こちらこそ今後ともどうぞよろしくお願い致します。

[21] Posted by yujiro : March 6, 2006 8:16 PM

yujiroさん、古い記事にコメントでごめんなさい。
気になったことがあったので質問です。favicon設置できたは良いのですが、説明通りファイル名を「favicon.ico」としてもファビコンが表示されず結局「favicon.ico.png」としたのです。
ドットが2つ付くファイルってあまりないと思うのですがこれで問題ないんですかね?ちなみに「Favicon Japan」で作成したら初めからこのファイル名になっていました。

[22] Posted by ゆう : October 29, 2006 2:48 PM

>ゆうさん
こんばんは。
ご質問の件ですが、問題の有無につきましては申し訳ありませんが私では判断できかねます(ちなみに同じサイトでPNGファイルを与えたところ、.png という拡張子はつきませんでした)。
こちらからゆうさんのサイトを拝見してもファビコンは表示されているようですので、このままでも大丈夫ではないでしょうか。
それではよろしくお願い致します。

[23] Posted by yujiro : October 30, 2006 11:34 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)