TOP > 記事を書いたら・・・ > title - ファビコンをつけよう!
ファビコンをつけよう!
「ファビコン」って言葉はたぶん聞いた事がないと思いますが、ほとんどの人が見たことはあると思います。今回はそんなファビコンの紹介と設置の仕方をします。
ファビコンとは正式名称はFAVorite ICONと言います。意味は「お気に入りのアイコン」です。大文字の所をつなげるとファビコン(FAVICON)と読めますよね。
他には気に入ったサイトを「お気に入り登録」をした時にお気に入り一覧に表示されるこのアイコンもファビコンです。
この様に自分で決める事ができるお気に入りのアイコンがファビコンなんです。
ちなみにファビコンを設定していないサイトの場合は、
この様な普通のアイコンがつくと思います。
ほとんどの人が今までに1回はファビコンを見た事があったのではないでしょうか?それでどうして違うアイコンがついているサイトがあるのだろうと思っていませんでしたか?
ファビコンをブログにつけるといい事がたくさんあるのでみなさんも是非つけてみて下さい。
具体的に何が良いのかと言うと・・・
一番良いのは単純に自分のブログのシンボルマークを決める事ができてそのマークをブログにつける事ができるので嬉しいですよね!!
他には、大きくて有名なサイトならほとんどファビコンが設定されていると思いますが、個人のブログなどはなかなかファビコンを設定しているブログも少ないです。だからこそファビコンを設定することによって自分のブログをよりアピールする事ができます!
そして[お気に入り]にしてもらえた時に、お気に入り一覧に色々なサイトがずら~っとサイトが並んでいても、アイコンを見ただけで見分けがつくので探しやすくて見ている人に便利です。
うちのブログのファビコンはこのファビコンです。初心者の人のブログなので芽が出たばかりのアイコンにしてみました。
ファビコンを設置する前に、まずどんなファビコンを設置するのかを自分で作るか見つけてこなければなりません。
「Favicon 素材」などで検索すると無料で使えるファビコンの素材サイトが見つかると思います。またファビコンジェネレーターを使うと簡単にファビコンを作る事ができます。
もしあなたがお気に入りの画像を持っていてその画像をファビコンにしたい場合には大きさを16×16に縮小させて、拡張子を変える必要があります。ファビコンに使える拡張子は[.ico]だからです。(拡張子がわからない人は拡張子って何?参照)
縮小・拡張子を変えるにはファビコン専門サイトのFavicon Japanに行けば変える事ができます。
Favicon Japanの[作成方法]に「手軽に作る方法を教えてください。」のコーナーがあるのでここで[参照]ボタンからファビコンに変えたい画像を選んで[Faviconを作成する]ボタンを押して下さい。
すると画像がファビコンに変わってプレビューで見る事ができます。気に入ったファビコンになったら[DownLoad]ボタンを押して保存します。
お気に入りのファビコンが見つかるか作れたら、そのファビコンをブログの管理画面のファイルアップロードからアップします。そしてそのファビコンのアドレスを覚えておきます。
次に[テンプレートの設定]→[編集]→[HTMLの編集]を開きます。そして</head>を探します。見つからなければ、「Ctrl」+「F」を押しての検索して下さい。
このブログの場合は・・・
この</head>の直前にこのタグを記入します。
このブログを例にすると、
自分のブログを「お気に入りに追加」をしてみてファビコンがつくか確認してみて下さい。もしつかなかったら[キャッシュの削除]してもう一度お気に入り登録してブラウザを再起動してみて下さい。
ファビコンって何?
ファビコンとは正式名称はFAVorite ICONと言います。意味は「お気に入りのアイコン」です。大文字の所をつなげるとファビコン(FAVICON)と読めますよね。
他には気に入ったサイトを「お気に入り登録」をした時にお気に入り一覧に表示されるこのアイコンもファビコンです。
この様に自分で決める事ができるお気に入りのアイコンがファビコンなんです。
ちなみにファビコンを設定していないサイトの場合は、

ほとんどの人が今までに1回はファビコンを見た事があったのではないでしょうか?それでどうして違うアイコンがついているサイトがあるのだろうと思っていませんでしたか?
ファビコンをつけよう!
ファビコンをブログにつけるといい事がたくさんあるのでみなさんも是非つけてみて下さい。
具体的に何が良いのかと言うと・・・
一番良いのは単純に自分のブログのシンボルマークを決める事ができてそのマークをブログにつける事ができるので嬉しいですよね!!
他には、大きくて有名なサイトならほとんどファビコンが設定されていると思いますが、個人のブログなどはなかなかファビコンを設定しているブログも少ないです。だからこそファビコンを設定することによって自分のブログをよりアピールする事ができます!
そして[お気に入り]にしてもらえた時に、お気に入り一覧に色々なサイトがずら~っとサイトが並んでいても、アイコンを見ただけで見分けがつくので探しやすくて見ている人に便利です。
ファビコンを設置
ファビコンを設置する前に、まずどんなファビコンを設置するのかを自分で作るか見つけてこなければなりません。
ファビコンを作成する
「Favicon 素材」などで検索すると無料で使えるファビコンの素材サイトが見つかると思います。またファビコンジェネレーターを使うと簡単にファビコンを作る事ができます。
もしあなたがお気に入りの画像を持っていてその画像をファビコンにしたい場合には大きさを16×16に縮小させて、拡張子を変える必要があります。ファビコンに使える拡張子は[.ico]だからです。(拡張子がわからない人は拡張子って何?参照)
縮小・拡張子を変えるにはファビコン専門サイトのFavicon Japanに行けば変える事ができます。


ファビコンを設置する方法
お気に入りのファビコンが見つかるか作れたら、そのファビコンをブログの管理画面のファイルアップロードからアップします。そしてそのファビコンのアドレスを覚えておきます。
次に[テンプレートの設定]→[編集]→[HTMLの編集]を開きます。そして</head>を探します。見つからなければ、「Ctrl」+「F」を押しての検索して下さい。
このブログの場合は・・・
title="<%nextentry_title>" /><!--/nextentry-->
</head>
<body>
この様になっていました。</head>
<body>
この</head>の直前にこのタグを記入します。
<link rel="shortcut icon" href="http://blog~~~.ico(ファビコンのアドレス)">
このブログを例にすると、
title="<%nextentry_title>" /><!--/nextentry-->
<link rel="shortcut icon" href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/futaba.ico">
</head>
<body>
この様になります。できたら最後に[変更]を押して保存をします。これで完成です!!<link rel="shortcut icon" href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/futaba.ico">
</head>
<body>
自分のブログを「お気に入りに追加」をしてみてファビコンがつくか確認してみて下さい。もしつかなかったら[キャッシュの削除]してもう一度お気に入り登録してブラウザを再起動してみて下さい。
コメント
- お久しぶりです
- 以前相互リンクさせていただきました萬次郎です。
私のサイトは現在もですが、まだ充実していないにもかかわらず相互リンクして
いただき誠に恐縮です。
さて、今回はファビコンにつきましてご質問させていただきます。
何故かファビコンが、設置後3~4時間くらいにデフォルトの馬に戻りました・・・。
原因として何が考えられますでしょうか?
実際に3~4時間は表示されていたので、アイコン作成、アップロード、タグ設置は
間違いないと思われます。
ちなみにブラウザ環境は FireFox2.0.0.3 になります。
何かありましたらご教授いただけますでしょうか。
- 追記
- 追記といたしまして、アップロードした画像を右クリックし、
プロパティを確認すると、壊れているようなことが確認できました・・・。
これが原因かと思われますが、壊れた原因が分かりません。。。
また、改めて作成しなおしてみます。
- 萬次郎さんへ
- SleipnirとFireFoxで見てみましたが、ちゃんと 黒背景に白字の「萬」のファビコンがみれましたよ。なので無事に解決みたいですね!!
- ご確認ありがとうございます
- こちらでも確認しておりますが、何故かTOPページのみ
デフォルトFavIconになってしまいます。
「次のページへ」などをクリックしたり、2階層へいくと「萬」アイコンになります。
でも、閲覧される方が見えるのであれば良しとしましょう。
お忙しいところご確認、誠にありがとうございました。
- 萬次郎さんへ
- 色々なページを見てみたのですが、TOPページではなくて「FavIcon簡単作成」の記事だけデフォルトFavIconになってしまうような気がします。
FireFoxでTOPページもデフォルトになるのは「FavIcon簡単作成」があるからだと思います。
<blockquote>&lt;link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico" /&gt;<br /><link rel="shortcut icon" href="/favicon.ico" /></blockquote>
引用文の中の赤字の部分を読み込んでしまってデフォルトになってしまうような気がします。
もしかしたら全然違うかも知れませんけど・・・。
- 有り難うございます
- 解決法が見当たらなく、偶然るんばばさんが仰った箇所を今日直していたら、ファビコンが TOPページから表示されるようになりました。
ということは、るんばばさんのご指摘が正解になりますね。
半分諦めていたので、もっと早くこちらを確認すればよかったです。
お手数おかけして申し訳ありませんでした。
- よかったですね。
- ファビコンが TOPページから表示されるようになってよかったですね!
- 私にも出来ました!
- いつも、お世話になります。
自分にはまだ難しいかな~と思ってましたが、るんばばさんの
記事の通りにやったら、なんとか出来ましたよ!
私にピッタリの「小豆ファビコン」がついたので、自分のブログに
ますます愛着が湧いてきました。
まだまだお恥ずかしいブログですが、生意気にも「相互リンク」
させていただきました。
ありがとうございます。
これからも、いろんな情報を教えて下さい。
ここがあると思うだけで、「自分にもできる!」ような気がするんです。
あ、でもこのコメント欄では、小豆ファビコン出ませんね~?
前の人は出てるのに…。 間違ってるのかしら?
- あずきさんへ
- 相互リンクありがとうございました!!
ファビコンって自分のブログに個性が出せて楽しいですよね。
このコメントにはなぜか小豆ファビコンでてませんね。でも間違っていないので時間が経てば表示されるのではないかな?と思います。
- 管理人のみ閲覧できます
- このコメントは管理人のみ閲覧できます
- 管理人のみ閲覧できます
- このコメントは管理人のみ閲覧できます
- 鍵コメさんへ
- ファビコンが無事に表示されたようで良かったですね!!
今回の様にブログを何かいじって変えた時は、これまでのパソコン自体に記憶されているものを一度削除してみたりすると、変更した箇所がちゃんと変わってるというケースが多いです。
今回の場合は、一度電源を切ったから良かったのだと思います。他には「キャッシュの削除」というのもあるので覚えておくといいかと思いますよ。
- faviconって、、、
- 初めまして、るんばばさん。
小説の出版に伴いブログを立ち上げてみたものの、まぁ何とも難しい。
ファビコンで足止めです。ご教授に従い操作してみるのですが、うまくいきません。どうにも素人ですが、少し手ほどきをお願いできますでしょうか。
- 柏木 龍世さんへ
- はじめまして!
柏木 龍世さんのブログを見させてもらったのですが、ファビコンの拡張子が「.png」になっているので表示されないのだと思います。.pngの後に「favicon.ico」がついていますが、付け加えるのではなく拡張子を変換させないといけないので「Favicon Japan」で拡張子を「.ico」に変えて設置してみてください。
- なんともはや
- 度々、龍世です。初心者でございます。
るんばばさん、どうにも僕は深みにはまっているようです。恐らく、初歩的で至極簡単な作業だと思うのですが、あぁファビコンがつかないのです。
icoへの変換ということでfavicon.japanで再度作り直しやらico変換が云々という箇所をクリックしていろいろ試してみたのですが、やっぱり馬が横を向いているですよ。
今日新たな原稿を上げたのですが、もうこのファビコンが気になって、もう。
再びご助力願えますか。
- あら不思議
- またたび龍世です。るんばばさん、どうにも妙なのですが、気づいたらこの質問コーナーのファビコンがちゃんとついているのですよ。あれから特にどこもいじってはいないのですが。やった、と思って自分のページをお気に入りにいれてみたならば、これは以前のまま。これはどういう病状でしょう?前項にあずきさんの質問がありますが、その場合とは逆。お手数ですがよろしくお願い申し上げます
- 龍世さんへ
- とりあえずこのコメント欄にファビコンが表示されたので一歩前進ですね!!
龍世さんのファビコンのアドレスhttp://blog117.fc2.com/k/kashiwagiryusei/file/favicon.ico
を見てみても画像が表示されないので、もう一度作ったファビコンの画像をブログに[ファイルアップロード]からアップロードしてみて下さい。
もしかしたらそれでファビコンが正常に表示されるかもしれません。
- ありがとうございます、、、
- 怪我の功名ではないですが、とりあえず前進。しかし、やはりファイルアップロードの作業をやりなおしてみても、その画面には「表示」という文字があるだけで肝心のファビコン映像がでてきません。「表示」をクリックして「画像を表示」とすると白紙画面の左上隅っこに作成したファビコンがでてくるのですが、結局、ファイルアップロードの画面にはでてこない。どうしてなのか、わかりません。全く素人のわからず屋ですがよろしくお願い申し上げます
- 龍世さんへ
- この記事で紹介している「Favicon Japan」だと変換が上手くいかない時があるかもしれないです。だから表示も上手くされていないかもしれません。
なので今度は、「ファビコン メーカー」http://favicon.webmeister-jp.com/
で、ファビコン元の画像(プロフィールの画像ですよね!)を、icoの拡張子に変換させてファイルアップロードしてみて下さい。
画像以外は完璧なので、たぶんこれで上手くいくと思うのですが・・・。
- るんばばさん、ありがとう
- こんなわからず屋の素人に懇切丁寧に何度もお付き合いいただいて本当にありがとう。無事、ファビコンは現れました。確かに決起の旗が揚がったようで心躍りますね。
ファビコン設置に当たりテンプレートの編集やら映像の取り扱いの初歩を学び、これからはブログアップ画面をもう少しスマートにしてみようと思います。今後も何かとお世話になるかと存じますが、どうぞよろしくお願い申し上げます。
- 龍世さんへ
- やっぱり変換が上手くいってなかったようですね!ファビコンがあると心躍りますよね!!
無事に設置できて本当によかったです。これからも頑張って下さい!
- こんばんは。
- 上の龍世さんが書いてるんですが、アップロードしても「表示」と書かれてアップロード画面にでてきません;
なので、るんばばさんが書かれてる「ファビコンメーカー」ってところでもやってみたのですが、それでも表示されません。
ブログを始めてからはけっこう経つのですが、パソコンの機能的なことはまったく理解できてません;
なので、イロイロといじってみることがわからずここに書き込ませてもらいました。
よろしくお願いします。
- お騒がせしました^^;
- 今日見てみたら、なぜか表示されてました。
また、わからないことがあったらよろしくお願いします。
- YUKAさんへ
- ファビコンがちゃんと表示されていますね!結果的に無事に表示されてよかったですね!
- ファビコン
- おかげさまで無事ファビコン設置できました^^
ありがとうございました。
- ファビコン
- はじめまして、こちらの記事を見せて頂いて、ファビコンに
挑戦しました。最初はうまくいかず、いろいろ試してみて
やっと、できました(できたと思う…)
TOPページ以外はでないようですが…
それで、会社のPCでちょっと見てみたのですが、
せっかくのファビコンが、馬になっちゃってるんですが
会社は、Windows2000で、もちろんIE6だからなんでしょうか
家のXPでは、ちゃんと見れました。
- ファビコン
- FC2ブログでなくJUGEMを使っているのですが、
このブログにはいつもたくさんのことを教えてもらっていて、助かっています。
(FC2ブログを使っている方がうらやましい・・・・)
他のブログ利用者なのに、以前も質問して丁寧に教えていただいたことがあり
また甘えて質問させていただきたいのですが。
ファビコンをつけようと思って無料素材からダウンロードして、JUGEMの画像管理へ
アップロードしたのですが「※ ファイル形式は .GIF .JPG .PNG でお願いします。」と
書いてあって、それでもアップロードしようとすると「MIMEタイプが不正です。」という
メッセージがでてアップされません
こうなると私のブログにファビコンをつけることは不可能なのでしょうか?
他のブログのことで本当に申し訳ないのですが、もしよければ教えてください
- matsudaさんへ
- ファビコン設置おめでとうございます。
- 黒兎さんへ
- はじめまして。ブログを拝見させていただきましたが、ちゃんとファビコンは設置されいましたよ。もちろんTOPページ以外の個別ページも表示されました。
環境によってはファビコンが表示されない事もありますが、それはしかたがないですね・・・。
- かずぴんさんへ
- ファビコンの拡張子は.icoなので(.GIF .JPG .PNG )しかアップロードできないのであればJUGEMではファビコンが設置できないと思います。
しかしどうしても設置したいということであれば、
http://support.jugem.jp/bbs/wforum.cgi?mode=allread&no=1286&page=0
こちらに書かれているように外部呼出し可能なサーバーを用意するとできると思います。
- ありがとうございます
- やはりファビコンはJUGEMでは素直に設置できないんですね。
外部呼出しサーバーという存在を知らなかったので、さっそく調べてみます。
いつもいつも他のブログのことなのにご丁寧に教えていただいて本当にありがとうございます。とても助かっています。また何かあったらよろしくお願いします!
- かずぴんさんへ
- 外部呼出しサーバーで上手くいくといいですね。頑張ってみてください。
この記事のトラックバックURL
http://rgrg.blog61.fc2.com/tb.php/179-80fff14c
ファビリーコンピューター?NO!「フェイバリットアイコン」!
- 先日、FC2BLOGにて新規登録をしたら何となく違和感が。 よく見たらアドレスバーに例の馬(一角獣?)のファビコンのせいでした。 今までこんなの無かったような気がするんだけど、気のせいかな。 ところで、 皆さんは「ファビコン」ってご存知ですか? ”ファビリーコンピュ
素材?New
- こんにちは♪今日はDQMJのお話しはありませんw今日もブログいじりにハマって いろいろしてました♪拙い素材ですが そのままゴミ箱行きは淋しいのでお披露目してみます♪興味がナイと思われますので スル
FCブログでオリジナルのサイトアイコンを表示させる方法
- FCブログでブラウザのアドレス欄やタブに表示されるサイト名に『ファビコン』を設置する方法。
ファビコン
- ファビコンってやつを作ってみた。URLの隣緑のEXITマークがあんだろ。あれなよーく見るとガキって書かれてるんだ。オレもガキだしこのブログも発展途上のガキンチョみたいな...
ファビコンをFC2ブログにつけてみた
- ファビコンというのは、WEBサイトをお気に入りに登録したときや、そのサイトを表示したとき、サイト名orそのURL表示の頭についている小さいマークのこと。図はわたしのPCの今の画面...
ひと月がたちました。
- アメブロからFC2へやって来て、ほぼひと月がたちました。 テンプレートを決めて、お正月中にいろいろいじくり回した後、地味にちょっとずつ...
ファビコンはじめました。
- FC2に引っ越してきてから、気軽にいろいろな機能を利用できるようになって・・・ウレシイ! というわけで、毎日どこかしらいじっているような...
ファビコンを日本タンに変更してみた~☆
- ブログを開設して5日目~☆ やっと「1番クリックした国が優勝」の記事も いくつか書けてちょっとほっとしました~ww でも、自分のブロ...
ファビコン付けてみた~~~
- 上のURLのところがフヌケ君になったのよ^^*うれしいのよwwww できれば動くファビコンにしたいんだけど、調べてもイマイチ動かし方が分からない...
お馬からマイアイコンへ!ファブコン作成 『Happy menu*Restaurant』
- 初めて自分が作成したブログを見た時、 ブラウザのタブのブログタイトル横に 【お馬アイコン】を発見してビックリ! うーん。何とかしてこ...
いろいろ改造中♪
- 今週も特に出かける予定がないので、ちょこちょこ家のことをやりながら 暇つぶしに・・・イヤイヤ、気分転換にテンプレートを替えてみました...
初心者でも簡単につくれるブックマークのアイコン☆(ファビコン)
- ブックマークの横にあるアイコンを自分で作るのって難しそうで避けてたんですが、 調べてみたら簡単につくれたのでご紹介します! まず正...
ミクロな自己主張 -ファビコン作ってみた-
- ■必殺!内職仕事人 昨日の11月16日、社内で仕事そっちのけでブログのテンプレカスタマイズをちまちまやっていた。 いつもだとここで「専務、...
ファビコンの設置成功!るんるん!
- ファビコンを設置してみました ファビコン(FAVICON)とはブラウザのアドレスの頭に自分おお気に入りのアイコンを表示させることです。 piyokobaraも日頃、色んなサイトを見ていて 可愛らしいアドレス...
透過画像を白い背景にする
- FC2ブログのFaviconを登録する。 参考はこちらのブログのお世話になりました。 初心者でもできる簡単FC2ブログの作り方 ついでにアイコン画像を登録しようとフリーの画像を探していたところ、 Iconfinde...
ファビコンを変更してみました
- 招き猫家のホームページ作成については、調べていくと色々あって、 まだどの方法で作っていくか決めかねています。 ちょっと息抜きがてら、このブログのファビコンを変更してみようかと、 ちょっと調べ...
ブログのファビコンを変更した
- ホームページ:nEST's SPACEで使用しているのと同じファビコンを、ブログにも設定した。 どこのHTMLをいじればファビコンを変更できるか、はこちらのブログ:初心者でもできる簡単FC2ブ
ブログのファビコンを変更した
- ホームページ:nEST's SPACEで使用しているのと同じファビコンを、ブログにも設定した。 どこのHTMLをいじればファビコンを変更できるか、はこちらのブログ:初心者でもできる簡単FC2ブ
ファビコン追加
- ブログを楽しもうということで 機能拡張してみました。 ファビコンとは ファミリーコンピュータと覇権を争ったという 懐かしきゲーム機の名前、、、 ではありません笑 というのが私が最初に思った印象です ◇タマメモ 【ファビコンってなに?】 お気に入りのサイトをブックマークすると多くのサイトは サイト名の横に一緒にでてくるアイコンそれがファビコンです。 ...