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 設置の記事のみ。とりこぼしありましたらお許しください)。ありがとうございました。
- centreeblog:ブックマークアイコンを追加。
- 我楽:favicon アイコン
- やむやむ:お気に入りアイコン『favicon』つけた。
- ツキヘノトビラ:ちょこっとだけ。
- COLOR NO.A:faviconをつけてみた
- Treasure:+favicon表示+
- えてぽんの部屋:favicon アイコン
- Nonsense?:愛のfavicon(笑)
- Magic White:ファビコン表示対応しました。
- PHAT∴LOVESICK:コメントプレビューとファビコンつけてみた
- 猫派の読書空間:favicon作っちゃった
- Favicon をコメント・トラックバックに表示する
≫ ファ?ビ?コ?ン・・・。 from TOY COZY MUSEUM 別館
意味もなく伸ばしてみましたが(笑)、Faviconというものにチャレンジしてみました。・・・といってもチャレンジというに... [続きを読む]
≫ [喜] ファヴィコン設置しました from 喜怒哀楽
小粋空間様:「Favicon 設置」/*TB*/ 前々から興味があったFavic... [続きを読む]
≫ Faviconを設置しました from わたしのヒトリゴト あさきぬ工房
あさきぬ工房のサイトにFaviconを設置しました。FaviconとはFavor... [続きを読む]
≫ favicon 設置方法 from STEVEN. WeBlog
ってなわけで、興味が沸いた方はさっそくfavicon設置してみましょう。 このカ... [続きを読む]
≫ Favicon置いてみた from SO YOUNG BLOG
Faviconってやつを設置してみた。 ペイントソフトとかで16×16の画像を準... [続きを読む]
≫ Faviconつけてました from Suzulog
昨日はhtmlの修正に集中してたらゴミを出すのを忘れてて、収集車の音楽でハッと気づき、ゴミ袋を両手に抱えて走って「待ってー!!」と叫んで呼... [続きを読む]
≫ Faviconつけてみました from foodish:”雑”食記
一部ブラウザ(FirefoxはほぼOKらしい、IEはダメっぽい)では表示されていると思います。小粋空間さんのこちらのエントリを参考にしたら、すぐに設置でき... [続きを読む]
≫ ころころFavicon from ころころのキモチ
アセラはファビコン設置出来ず・・・しょぼん [続きを読む]
≫ Favicon Japan from ココロノコエ
小粋空間さんのサイトで、面白いサイトを発見。 自分で作成した正方形の画像を、縮小してico形式にしてくれるサイト、それが「Favicon Japan」。 ... [続きを読む]
≫ FAVICONを作って貼ってみました。 from masamasa blog
FAVICONというのは… アドレスバーの左URLの先頭に小さく表示されるアイコンで、 ブラウザの種類によっては見れる見れないがあります。 MacOSXで... [続きを読む]
≫ Favicon なるものを設置してみました from ツール・ド・もんち - Tour De MonChi -
この度、Favicon(ファビコン)なるものを設置してみました。 このFavic... [続きを読む]
≫ 「Favicon」を作ってみた from 漸之国 漸区 2960番地
今日は前々から興味のあった「Favicon」を作ってみました。 「Photosh... [続きを読む]
≫ favicon設定! from HOLGA Fun
faviconを設定しました。これでお気に入りに画像が表示されるはずです。... [続きを読む]
≫ favicon(ファビコン)の設置方法。 from バリごと。
小粋空間のfavicon設置というのを見ながら、favicon(ファビコン)を設置してみた。faviconというのは、h... [続きを読む]
≫ ブログにFaviconを設置 from 暇人STRのブログ
小粋空間さんのサイトを閲覧していたところ「Favicon 設置」というエントリーを発見しました。 Favicon(ファビ... [続きを読む]
≫ お気に入りアイコン(Favicon)の生成ができるサイト from アジャイルな社長が教える!自分をもっとレベルアップさせる裏技
ホームページをブックマーク(お気に入り)に登録した時に、表示されるアイコンをFa... [続きを読む]
≫ Faviconの設置 from Hypersilverback's weblog02
細かなweblogのデザインカスタマイズは続く。 オリジナルのFavicon... [続きを読む]
≫ Favicon設置 モジュール化など from takubo blog
いろんなサイトをのぞくとブックマークのアイコンが特別なものがありますよね。 ヤフーやGoogleなどもそう [続きを読む]
≫ Faviconつけてみました from どうでもいいこと
遅ればせながら、「どうでもいいこと」でもFaviconを設置してみました。 ブラ... [続きを読む]
≫ 再構築中(その3) from FFまっじも
Faviconなるものを付けてみました(・ω・) ブラウザのアドレスバーやお気... [続きを読む]
≫ favicon設置しました from 青山ではたらく平社員のブログ
おはこんばんちは
「ユー、ちょっとファビコンをあげちゃいなよ」
「ファミコンですか?」
と上司にマジボケをしつつグーグル先生と相談しながらな... [続きを読む]
≫ Favicon を設置する from PCオタ.com
Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことで Favorite icon(フェイバリット・アイコン)の略。
日... [続きを読む]
≫ ファビコン設置しました♪ from ♪poohな毎日♪
お気に入りに入れるとサイト名の横に出るアイコンをファビコンといいますが、最近いろ... [続きを読む]
≫ 自分のブログを目立たせる方法ファビコン(favicon.ico)の作り方 from 小雪の情報商材アフィリエイトノウハウ大放出ブログ
ファビコンを設置してブログやサイトを目立たせる方法。ファビコンの設置方法や作り方、マルチファビコンの設定、デスクトップやお気に入りに追加でファビコン画像を... [続きを読む]
おはようございます。お気に入りに追加、させていただきました♪
なければなくてどうってことないものだけど、あるとちょっとしたアクセントになっていいですよね。
こんにちは!favicon、この間私も設置しました。あまりにもエラーログに「File does not exist: favicon.ico」ばかり記録されるので。。。
ご存知かもしれませんが、16x16だけでなく32x32も作成して、@icon変換というソフトで2つのiconをグループ化(マルチプルアイコンで保存)すると、デスクトップなどへドラッグした際に大き目のアイコンが表示されます。
>さえらさん
こんばんは。
お気に入り追加、ありがとうございます。
一旦追加された後は削除しても大丈夫みたいです。(笑)
>すみちゃんさん
こんばんは。
ご連絡ありがとうございます。
私もどちらかと言えばエラー回避が目的です。(笑)
おっしゃる通り、32x32の記載は省略してしまいましたが一度試してみたいと思います。
こんばんは。
FirefoxやSafariで見かけつつも、こういう方法で・・・と言うかFaviconというモノすら知りませんでした(恥)。
手順通りにサクッと設置出来ました。有り難うございます。
"Google"とか"asahi.com"とか一目瞭然なんですよね、アノ大きさで・・・。まるで米粒芸術の域デスナ?。
Faviconつけたのに忘れてました(笑)
というのも、使ってるブラウザがSleipnirでして、未対応なんです・・・・
まもなく出そうな新しいプニルは対応らしいので、待っております。
>toycozyさん
こんばんはー。
ご無沙汰してます。
ということで早速の参照ありがとうございます。
ところで一体何のマークなんでしょうか…?(笑)
>えてぽんさん
こんばんはー。
あ、私もSleipnirなので大丈夫です(笑)。
次バージョンが楽しみですね!
あらま。ファビコンまで設置して・・・今時のブログになっていく?。(笑)
でも、私、スレイプニル使いなので自分のファビコンさへ見えてないという。(苦笑)
>Border.さん
こんばんはー。
今時ですが、エラーログ回避が目的だったりします(笑)。
ネタ不足という噂も(笑)。
トラックバックどうもありがとうございます!
yujiroさん、お久し振りです★
小粋空間さんもfavicon設置したんですねー。
お気に入り追加した時に、可愛いアイコンが表示されるのは、何だか嬉しいです(*^_^*)
え?と・・・マークの意味ですね・・・一応トップのバナーにも右側にデザインしている"HAL"なんですね。あの"2001年宇宙の旅"に出てくるヤツ・・・知的コンピュータの赤い目のようなランプ。
・・・・でもアイコンにするとただの赤玉だったりします・・・(笑)。
TBありがとうございます。
ファビコンは今のところに移転してから設置してないのですよぅ(苦笑)
良い図柄探しもなかなか大変ですし、Sleipnirからは見えない(泣)
手間を惜しまないのも大事なので、近々考えてみます♪
良い機会になりましたぁ!
>祈由さん
こんばんは。
お久しぶりです。(笑)
気に入っていただけたようでなによりです。
思いつきで切り抜いたのですが、私もなかなか気に入ってます。
>toycozyさん
こんばんはー。
なるほど!わざわざお越しくださりありがとうございました!
>ミッチさん
こんばんは。
トラックバックありがとうございました。
バッチリ表示されてますね!
>陽子さん
こんばんはー。
>>移転してから設置してないのですよぅ(苦笑)
あら、そうでしたか。
新しいテンプレートのようにオシャレなFavicon、期待しています!
#URL修正しておきましたので、勝手ながら後のコメントはなかったということで。
yujiroさーん。
コメントありがとうございました。
いや、実はコメント欄などにもfaviconを表示させる部分は、未解決なのです。
今のところ自分のところでは表示できているけれど、favicon設置してからすでに3日経過しましたが、お友達のMTではまだコメントやTB欄で表示されません。
この辺の謎は、なんなのか。
解決策があるのか、さっぱりです。
Σ(´Д`lll)
>ミッチさん
こんにちは。
なるほど、それは失礼致しました。
favicon.zip ダウンロードしてみます。
yujiroさん!
わー。favicon.zip、ぜひいじってみて下さい!
そして、ぜひ、謎の解明をっ!?
頼ってばかりでスミマセン(つД`)
>ミッチさん
こんばんば。
ということで少し解明してみました。
初めまして。
少し前からこちらのエントリを参考にさせていただいています。
おかげさまで出来は別としてですが、すごく簡単にFaviconを設置することができました。
どうもありがとうございました。
SerenBachについても色々とカスタマイズの方法を紹介していただき、とても参考になっています。
ぜひ今後ともどうぞよろしくお願いします。
>ishさん
はじめまして。
記事参照&トラックバックありがとうございます。
うまく設置できたようでなによりです。
こちらこそ今後ともどうぞよろしくお願い致します。
はじめまして、masamasaです。
yujiro様の記事参考にさせていただき、早速作ってみました。
TrackBackと記事参照させていただきました。
ソネットブログが重く現在難民状態のmasamasaですが、
いろいろと参考にさせていただくことが多いので、
今後もTBさせていただくことになると思いますので…。
どうぞよろしくお願いします。
>masamasaさん
こんばんは。
ご利用&トラックバックありがとうございました。
うまく設置できて良かったです。
トラックバックはどしどし送信してやってください。
こちらこそ今後ともどうぞよろしくお願い致します。
yujiroさん、古い記事にコメントでごめんなさい。
気になったことがあったので質問です。favicon設置できたは良いのですが、説明通りファイル名を「favicon.ico」としてもファビコンが表示されず結局「favicon.ico.png」としたのです。
ドットが2つ付くファイルってあまりないと思うのですがこれで問題ないんですかね?ちなみに「Favicon Japan」で作成したら初めからこのファイル名になっていました。
>ゆうさん
こんばんは。
ご質問の件ですが、問題の有無につきましては申し訳ありませんが私では判断できかねます(ちなみに同じサイトでPNGファイルを与えたところ、.png という拡張子はつきませんでした)。
こちらからゆうさんのサイトを拝見してもファビコンは表示されているようですので、このままでも大丈夫ではないでしょうか。
それではよろしくお願い致します。