FC2ブログにファビコン画像を設定する方法

ファビコンとは?

ブログをブラウザで表示すると、ブラウザのタブのところにはブログタイトルが表示されていますね。

その横には、↓このようにアイコン画像が付いていると思います。

FC2ブログにファビコン画像を設定する方法3 (1)

FC2ブログの初期設定状態では、このようなFC2の画像が表示されていますね。

この画像のことをファビコン(favicon)と言います。Favorite icon(フェイバリット・アイコン)の略です。

ファビコンはタブでの表示だけではなく、ブックマークのアイコンにも使われています。

実はこのアイコン画像は、オリジナル画像にカスタマイズができることを知ってましたか?

ということで、ファビコン表示をカスタマイズしてみましょう。

ファビコン画像を準備する

まずは表示するファビコン画像を準備しましょう。

画像のファイル形式は「gif」「png」「jpg」「bmp」などでも表示させることはできるようですが、古いブラウザだとサポートされていないので表示できない場合があります。

なので、主流である「ico」形式を使っておけば間違いないでしょう。

とは言っても、画像を作成するときには「png」等で作成すれば大丈夫です。作成した後で「png」等を「ico」形式に変換するだけです。

Google検索などで「ico 変換」と検索すると変換方法が見つかります。

ファビコン用の画像サイズはいろいろありますが、「16px x 16px」か「32px x 32px」か「64px x 64px」で作成すればいいでしょう。

くれぐれも著作権で保護されている画像は使わない様にして下さい。

ファビコン画像をアップする

「ico」形式の画像が準備できたらブログのサーバーにアップしましょう。

ブログで画像を使うための手順ですので難しくないです。

左側にある「ファイルアップロード」を押します。

FC2ブログにファビコン画像を設定する方法3 (8)

使う画像ファイルをドロップしてください。

FC2ブログにファビコン画像を設定する方法3 (9)

ファイルをドロップしたら、「アップロード」を押します。

FC2ブログにファビコン画像を設定する方法3 (10)

ファイル一覧にアップロードした画像が追加されました。

FC2ブログにファビコン画像を設定する方法3 (11)

アップロード画像のURLを使うので、コピーしてメモ帳などにメモしておきます。

テンプレートを編集する

FC2ブログにログインしたら管理画面より「テンプレート」を押します。

FC2ブログにファビコン画像を設定する方法3 (3)

テンプレートを複製

テンプレートを編集するときには、必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。

編集したいテンプレートの「複製」を押します。

FC2ブログにファビコン画像を設定する方法3 (4)

複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。

名称を変更したら、「更新」を押します。

FC2ブログにファビコン画像を設定する方法3 (5)

複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。

FC2ブログにファビコン画像を設定する方法3 (6)

編集する箇所

テンプレート管理画面の下に「HTML編集」という箇所があるので、ここを編集します。

FC2ブログにファビコン画像を設定する方法3 (7)

先ほどメモした画像のURLを使って、次のコードに画像URLを追加します。

<link rel="icon" href="ファビコン画像URL">

このコードを </head> のすぐ上に貼り付けてください。

FC2ブログにファビコン画像を設定する方法3 (12)

プレビューしてみましょう。

FC2ブログにファビコン画像を設定する方法3 (2)

まとめ

ファビコンを変更することができましたね。

あなたもオリジナルなファビコンを設定して、ブログをカスタマイズしてみましょう。

おすすめ参考記事

Twitterでフォローしよう

おすすめの記事
2013年ネット副業年収
ネット副業収入
今回は、ふくやり管理人ネット副業年収2013年について紹介します。 2013年7月からアフィリエイトを始めました。 2013年は、アフィリエ...
インフォトップに無料会員登録する方法
アフィリエイト
インフォトップについて 様々なノウハウなどの情報コンテンツを扱う情報商材に特化したASPの中でも最大の大手と言えるのが「インフォトップ(in...
占いで稼ぐ方法
ネット副業種類
占いをして稼ぐ方法 個人が占いをして稼ぐ方法なんてあるの?って思っている人がいると思いますが、実際に稼ぐことができるんです。 それができるサ...