ファビコンとは?

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

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

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でフォローしよう

おすすめの記事
ネット副業種類
目次1 イラストを描いて稼ぐ方法2 ココナラってなに?3 ココナラをするのに必要なもの4 ココナラでどうやって稼ぐの?5 イラストを売ってど...
FC2ブログ カスタマイズ初心者講座
目次1 FC2ブログの広告2 PC用テンプレートの広告の位置3 環境設定4 ページ上部の検索バーの広告を非表示にする5 記事下の広告を非表示...
はてなブログ カスタマイズ初心者講座
目次1 はてなブログのブログ横幅を変更する方法2 要素の説明3 まとめ はてなブログのブログ横幅を変更する方法 ブログを制作していると、サイ...