シーサーブログにファビコンを設定する方法

今回はシーサーブログにファビコンを設置する方法を紹介していきます。ファビコンを設定する事でお気に入りやブックマークされた時、ウィンドウを沢山開いている時等に自分のサイトを見つけやすくなりますし、他のサイトとの差別化もできるのでこれはやっておく事をおすすめします。

ファビコンを設定すると自分のサイト名の左にアイコンが表示され、ブックマークやお気に入りされた時にも設定したアイコンが表示されるようになります。こんな感じ。

ファビコン-1

それでは早速準備と設置の仕方を解説していきます。

ファビコン設置の前準備

ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。表示されるアイコンのサイズは「16px」×「16px」ですが、このサイズで用意する必要はありません。

ただし、大きな画像を用意しても最終的にはこの「16px」×「16px」のサイズに縦横比が均等に縮小されるので正方形の画像を用意しておいた方がいいでしょう。

ちなみにこのブログのファビコンは「ペイント」で自分で作ってみましたが、自分で作れない場合はフリー素材から探してきてもOKです。

ファビコン設置の手順

先にファビコンの設置の手順を簡単にまとめておきます。

  1. ファビコン用画像を用意する
  2. 画像ファイルをファビコン用のファイル形式「.ico」に変換
  3. シーサーに変換した画像をアップロード
  4. 画像のURLをHTMLに追加

普通の画像を「.ico」形式に変換する必要がありますが、これは外部のサイトで簡単に変換する事ができます。

画像ファイルを「.ico」に変換

前述したようにファビコンを設置する場合には普通の画像ファイルではなくて「.ico」というファイル形式に変換する事が必要です。

そのため、画像を用意したらまずはファビコン用画像への変換をします。このサイトへ移動しましょう。

FavIcon from Pics

まずはこのサイトで「ファイルを選択」し、「Generate Favlcon.ico」をクリック。

ファビコン-2

使いたい画像が表示されている事を確認して「Download Favicon package」をクリック。

ファビコン-3

これでファビコン用に変換した画像をダウンロードできます。ダウンロードしたファイルを開いてみると複数のファイルがあると思いますが、このうち「favicon」というのを使用する事になります。

ファビコン-4

シーサーブログに変換したファビコン画像をアップロード

シーサーブログの管理画面から「ファイルマネージャ」をクリックして先ほどダウンロードした「.ico」形式の「fabicon」を選択しアップロード。

Seesaaブログファイルマネージャー

アップロードしたら下のファイル一覧という部分に「favicon.ico」という名前のファイルがあるのでこれをクリック。

ファビコン-8

すると右下に画像のURLが表示されるのでこれをコピーしてメモ帳等に貼り付けておきましょう。

ファビコン-9

この画像のURLをコピーしたらこのページには用はないので閉じてOKです。そして今コピーした画像ファイルのURLをこのコードの中に入れて下さい。

画像のURLという文字だけ消してコピーしておいたファビコンのURLを入れて用意しておきます。

HTMLにファビコン画像を追加

シーサーブログの管理画面に戻り「デザイン」⇒「CSS/HTML編集」と進み、適応中のテンプレートを選択。「HTML編集」をクリックします。

SeesaaブログHTMLの編集

HTMLの「head」と「/head」の中の好きな位置に先ほどのコードを入れて保存します。私の場合は「/head」の直前に入れてます。

ファビコン-12

設置できたら一番下の「保存」をクリックして完了。

これで自分のブログを表示させるとファビコンが表示されるはずです。

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

シーサーブログにファビコンを設定する方法”に13件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. しげぞう 投稿作成者

    ゆずMAN様

    返信ありがとうございます。解決に至らずすみません!私も確認してましたが、IEでの表示ができているのに、Chromeだと表示さませんね。ただ、別のブログではChromeで表示される所を考えるとHTMLの部分で何か相性の悪い記述があるのかも知れません。もし何か分かればブログの方にでもコメントさせて頂きますね。今後もどうぞよろしくお願い致します。