上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このブログ(高密度商業地域)を開始してからかなりの年月が流れたのですが、faviconを設定せず、ずっとFC2ブログ標準のfaviconが表示されていました。
さすがにこれはイカン、と思い、faviconを設定しました。

【Favicon】
Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。(Wikipedia


設定すると、以下の画像の通り、ブラウザに表示されるアイコンが独自のものになります
2013-06-30.png


【メリット】

「お気に入り」や「ブックマーク」のアイコンが独自のものとなるため、見た目にわかりやすくなる。
・(これはMRBだけかもしれませんが、)ブラウザでたくさんタブを開くので、どれがこのブログなのか判別しやすくなる。

ということで、FC2ブログにfaviconを設定する備忘録です。
元画像さえあれば、5分ほどで設定は完了です。


Windows パソコンで作る場合を前提とした手順です。
faviconを作成するところから解説します。

【1】
faviconの元となる画像を作成します。
特にこだわりがない場合は、既存の写真などを縮小しても構わないと思います。このブログのfaviconは、プロフィール画像(そしてTwitterの画像でもある)の流用です。

というわけで、保存したfavicon画像を右クリック、「編集」を選択しペイントを起動します。
2013-06-30_001.png

サイズを16x16ピクセルにします。
2013-06-30_002.png

フォーマットはPNGで、名前を付けて保存します。
名前は適当で構いません。
2013-06-30_003.png


【2】
作成したfaviconを、ICOという形式に変換します。
こちらのサイト(http://ao-system.net/favicon/)で簡単に作成できますので、利用させていただきましょう。

また、googleなどで「favicon 作成」と検索してもすぐ見つかります。

faviconをICO形式に変換したら、デスクトップなどにダウンロードして保存しておきます。
ファイル名はなんでも構わないのですが、分かりやすいようにfavicon(favicon.ico)としておくことをオススメします。


【3】
保存したfaviconを自分のFC2ブログにアップロードします。
とくに難しいことはなく、いつものファイルアップロードでOKです。


【4】
アップロードした画像のURLをコピーし、メモ帳(Notepad)などに控えておきます。
2013-06-30_004.png


【5】
ブログのテンプレートの編集画面を開きます(テンプレートの設定)。
開くと、ページの中段に「(適用しているテンプレート名) のHTML編集」という部分があります。
2013-06-30_005.png

その編集部分から </head> を探します。

その </head> 直前に、以下のfavicon設定のHTMLを追加します。
<link rel="shortcut icon" href="(【4】で控えたURL)" />


このブログでは、以下の様なかたちになっています。
<link rel="shortcut icon" href="http://blog-imgs-57.fc2.com/k/o/m/komitsudo/favicon.ico" />



追加後、「更新」ボタンをクリックして更新したら完了です!


自分のブログを確かめてみてください。
アイコンがFC2のものから、独自のものに変更されているでしょうか?

何か不明な点や、疑問があればコメント欄にお願いします。
Related Posts

Thoughts on スポンサーサイトFC2ブログでのfavicon設定方法(含:favicon作成方法)

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。