SeesaaブログでオリジナルのFavicon(ファビコン)を設定して他のブログと差別化を図ろう

【2016年12月5日追記】
本日(12月5日)、下記お知らせの通りファビコン設定機能がリリースされました!
【Seesaaブログ】ファビコン設定機能をリリースしました - Seesaaからのお知らせ

当該機能をご利用いただくことで、マイブログ内の操作のみでファビコンを設定することができますので、ぜひご利用ください!
※もちろん、本記事で紹介している方法でも設定は可能です。

ファミコンコントローラー

お久しぶりです。前回の更新から2ヶ月以上も空いてしまいました。
べ、別にサボってたわけじゃないんだからね、勘違いしないでよね!

更新が行われなかった2ヶ月間、世間ではブラジル・リオデジャネイロでオリンピックが開催されていましたが、日本人選手の活躍は本当に素晴らしかったですね。
個人的には、7人制ラグビー男子の部で、金メダル候補のニュージーランド代表に勝ったときは本当に興奮しました!


今回のテーマは「Favicon」

さて、今回ご紹介する内容ですが、もちろんオリンピックとはまったく関係ありません(笑)

「Favicon」("ファビコン"って読みます)ってご存知でしょうか?
※「ファミコン」とは無関係です。

ブラウザのアドレスバーやタブの先頭にアイコンが表示されていると思いますが、このアイコン(以下画像の赤丸で囲われたもの)が「Favicon」です。

  • Internet Explorer11の場合
    favicon_ie11.png
  • Google Chromeの場合
    favicon_gc.png
  • Mozilla Firefoxの場合
    favicon_fx.png

ただ、Seesaaブログの場合、ブログ作成直後はFavicon自体の設定がないため、自分で設定する必要があります。

ちなみにFavicon自体の設定がないブログ(ウェブサイト)では、以下の画像のような表示になります。

  • Internet Explorer11の場合
    ※Internet ExplorerのFaviconが表示されます。
    favicon-customrecipe_ie11.png
  • Google Chromeの場合
    favicon-customrecipe_gc.png
  • Mozilla Firefoxの場合
    ※アイコン自体の表示がなくなります。
    favicon-customrecipe_fx.png

オリジナルのFaviconを設定することで、他のブログやウェブサイトとの差別化をすることができます。また、ブログ訪問者がたくさんのタブを開いているときなどに、あなたのブログが見つけやすくなるかもしれませんね。

というわけで、今回は「SeesaaブログでFaviconを設定する方法」をご紹介します。


Faviconを設定する

今回は以下の手順でFaviconを設定していきます。

  • 今回の設定ではスマートフォン版ブログには反映されません。
  • SeesaaブログではスマートフォンでFaviconの設定を行うことはできません。

1. Favicon用の画像を用意する

Faviconを設定するためには、Favicon用の画像を用意する必要があります。自分で作成するなどしてお好みの画像を用意しましょう。

実際に表示されるFaviconサイズは「16×16ピクセル」となりますが、正方形の画像であれば、用意する画像は「16×16ピクセル」のものでなく、それ以上のサイズのものを用意して問題ありません。

今回は以下の画像を使います。マイブログ内にある当ブログカスタムレシピへのリンク用画像です。
Favicon用画像

2. 用意した画像ファイルをFavicon用のファイル形式「ico」に変換する

Faviconを設定する場合には「jpg」形式や「png」形式などの画像ファイルを「ico」形式のファイルに変換する必要があります。

「ico」への変換については外部のサイトを利用することで簡単に行うことができます。
以下の2サイトをご紹介しますので、こちらで「ico」形式への変換を行ってください。

3. 変換した画像ファイルをファイルマネージャにアップロードする

上でご紹介した外部サイトにて「ico」形式に変換し、ダウンロードした画像ファイル(ファイル名は通常「favicon.ico」になっていると思います)をブログのファイルマネージャにアップロードします。

ファイルマネージャへのアップロード方法については、以下のヘルプをご参照ください。

4. アップロードした画像のURLをHTMLに追加する

ファイルマネージャへのアップロードが完了したら、アップロードしたFavicon用画像の設定変更画面を開き画像URLをコピーして、以下のコードの「画像URL」に入れます。

<link rel="shortcut icon" href="画像URL" />

ファイルマネージャの設定変更画面については以下のヘルプをご参照ください。

コードへの画像URLの挿入が終わったら、マイブログのHTML編集画面を開き、HTMLの<head>から</head>の間の好きなところに画像URLを入れた上のコードを追加します。

HTMLの編集方法については以下のヘルプをご参照ください。


設定完了

上の手順が全て終わったら設定が完了です。
実際に設定を行うと以下の画像のような感じになります。

  • Google Chromeの場合
    ※Faviconが表示される他のブラウザでもこのような表示になります。 ファビコン設定後(GC)

まとめ

いかがでしたか。
今回ご案内の手順を参考に、オリジナルのFaviconを設定して他のブログとの差別化を図ってみてはいかがでしょうか。

※「ファミコン」は任天堂株式会社の登録商標です。