グラフィックデザインからプロダクトデザインまでクリエイティブBLOG 
2007年03月12日

seesaaブログでファビコンを表示させる方法

最近多くのサイトで見かけるようになったアドレスの横に表示される小さいアイコン、ファビコン。ブログだと他ページと同じようなデザインになりがちで、個性を出すのは一苦労です。少しでもブログに独自性を持たせようと当ブログにもファビコンを設置してみました。せっかくですので、seesaaブログでのファビコンの設置手順を紹介したいと思います。

favicon.jpg
ファビコンは16×16ピクセルで表示されます。

詳しくは以下

まずは画像の準備、通常WEBで画像を表示させる場合は、pngとかgifとかjpgで画像を作りますが、ファビコンの場合は.icoと言う拡張子のファイルにしなければなりません。ソフトを使って変換する方法もあるのですが、今回はファビコンを制作してくれるWEBサービスも多々あります。

フリーソフトだと
GIMP
IconExtractor(Peaceful Wind)

WEBサービスだと
FavIcon from Pics
Favicon Japan

等です。

上記のどれかを使ってなんとかお好みの16*16のアイコンを作れたら次は設置です。

1.ファイルをアップロード
seesaaの記事投稿→ファイルマネージャから作成した.icoをアップロードします。

2..icoの絶対パスを取得
アップロードしたicoの絶対アドレスをメモもしくはコピーしておきます。

3.HTMLの変更
<link rel="shortcut icon" href="アップロードしたアドレス">
上記の一文をHTMLの<head>と</head>の間に加えます。

4.再構築

以上で完了です。問題なければ閲覧時にファビコンが表示されているはずですのでご確認ください。
この記事へのコメント
質問です。
3.HTMLの変更なんですが、
デザイン>コンテンツから入るブログデザインのカスタマイズページがありますよね?
どのHTMLを変更すればいいのでしょうか?
Posted by ☆組原理主義SAKAE at 2007年05月11日 12:45
Google:「Seesaa」「ファビコン」で辿り着きました。
お陰様でうちのSeesaaブログにも念願のファビコンが設置できました。
ありがとうございます m(_ _)m
Posted by いしやま at 2007年05月12日 16:18
☆組原理主義SAKAEさん>
返信遅れまして申し訳ありません。HTMLはデザインの中のHTMLです。個別のコンテンツのHTMLではありません。

デザイン>コンテンツ>任意のコンテンツ>HTML

ではなくて

デザイン>HTML

で編集してください。

いしやまさん>
無事にファビコン設置できたようで何よりです。これからもおもしろいカスタマイズがあれば紹介していきたいと思います。
Posted by 管理人 at 2007年05月17日 00:46
カテゴリー内の新規記事をリストアップ表示も参考にさせて頂いている者ですが、ファビコンも上手く設置出来ません

デザインのHTMLで、<head>のすぐ後に追加しました

<head>

<link rel="shortcut icon" href="http://8cats-house.up.seesaa.net/image/faviconCAMQW66H.ico">

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>
<meta name="description" content="<% blog.description | nl2br | tag_strip %>" />
<meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | remove_emoji | tag_strip %> <% extra_keywords | oneline | tag_strip %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" />
<% if:blog.has_foaf -%>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" />
<% /if -%>

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定


私の場合は、<script type="text/javascript">の下からコメントで絵文字が使えるように編集がしてありますが、関係ありますか?
Posted by クレア at 2007年06月26日 01:20
何度もすみません
管理人さんが承認したコメントのみが表示でしたね〜
ちゃんと確認せずに2度も送ってしまいました
どうもすみませんでした
Posted by クレア at 2007年06月26日 01:32
クレアさん>
ソースを拝見した限りでは、head内にファビコン表示もあるみたいで大丈夫なはずです。先ほどクレアさんのブログを拝見したところ、こちらの環境ではちゃんとファビコンが表示されていました。もしかするとブラウザ側の問題かもしれません。
Posted by 管理人 at 2007年06月26日 10:19
ありがとうございます

えっ!表示されているんですか??
う〜〜〜ん!私も見たいです
ブラウザの設定に何か問題があるのでしょうか?
どうしたら見えるようになりますか?
Posted by クレア at 2007年06月27日 02:10
クレアさん>
先ほど確認してきましたが、やはり見えています。ファビコンそのものにアクセスしてみても閲覧する事が出来ましたのでファイル自体は確かにあると思います。

ファビコン自体が確実に存在すると言う事は、サーバー側の問題では無いとは思います。当方の環境はMACOS10.4.10 firefox2.0.4です。クレアさんの環境が分からないので方法は分かりかねますが、一度違うブラウザでアクセスしてみてはどうでしょうか!?
Posted by 管理人 at 2007年06月27日 23:18
度々お手数かけてすみません
私の環境はWin XP Internet Explorer 7.0なんです
違うブラウザでアクセスなんてした事がないのでやり方も分かりません(^^;)

ファイルマネージャーでは、アップロードした画像に、マウスポインタを合わせるとちゃんと見えるのですが、icoの絶対アドレスを見に行ってプロパティを開くと画像が×になっています
この辺も何か関係しているのでしょうか?
初心者なのでなにぶん良く理解出来ていないのが現状なんですが・・・(^^;;;
お手数おかけして本当にすみません
Posted by クレア at 2007年06月28日 03:47
「Seesaa」「ファビコン」でGoogってきました。
念願のファビコンが設置できてとても嬉しいです。
ありがとうございました♪
とても素敵なblogなので、よろしければリンクさせて
いただいてもよろしいでしょうか☆・゜
Posted by miho at 2008年12月05日 20:03
miho様>
お役に立てて何よりです。
細かい所ですが、ファビコンは合った方が良いですよね。
リンクは是非宜しくお願い致します。
Posted by 管理人 at 2009年01月31日 15:28
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/35794197
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

seesaaブログでファビコンを表示させる方法
Excerpt: 最近多くのサイトで見かけるようになったアドレスの横に表示される小さいアイコン、ファビコン。ブログだと他ページと同じようなデザインになりがちで、個性を出すのは一苦労です。少しでもブログに独自性を持たせよ...
Weblog: 最新ITニュース:SpIT
Tracked: 2007-03-13 13:27

seesaaブログでファビコンを表示させる方法: DesignWorks
Excerpt: リンク: seesaaブログでファビコンを表示させる方法: DesignWork
Weblog: 石山城の DAILY BOOK MARKS and COMMENTS
Tracked: 2007-05-12 16:27