ファビコンとは?

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

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

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)

まとめ

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

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

  • FC2ブログにファビコン画像を設定する方法
  • FC2ブログのサイドバーにバリューコマースのテキスト広告を貼る方法
  • スマホ用FC2ブログの記事一覧に忍者Admaxのネイティブ広告を貼る方法
  • FC2ブログのサイドバーにA8.netのテキスト広告を貼る方法

Twitterでフォローしよう

  • アフィリエイト
    プロアフィリエイターの作業環境やツール、サイト11個紹介
    2018年5月11日
  • ネット副業収入
    いままでのネット副業収入実績
    2018年1月7日
  • アフィリエイト
    アフィリエイト初心者におすすめのASP一覧 11選
    2018年8月18日
  • ネット副業種類
    モノオク登録方法、自宅の空き部屋、空きスペースを貸すだけの副業
    2019年6月19日
  • アフィリエイト
    無料ブログでのアフィリエイト危険性4つの理由
    2018年6月2日
おすすめの記事
FC2ブログ カスタマイズ初心者講座
目次1 投稿日時の表示2 テンプレートを編集する3 テンプレートを複製4 編集する箇所5 日時表示を編集する6 サイドバー「最新記事」の日付...
はてなブログ カスタマイズ初心者講座
目次1 はてなブログの背景色を変更する2 まとめ はてなブログの背景色を変更する はてなブログにログインし、ダッシュボードから「デザイン」を...