FC2ブログのアイコン・ファビコンを設定＆変更する方法

FC2ブログのタブに出るユニコーンのアイコンのままだと、自分のブログらしさが出ないな…と感じたことはありませんか。

この記事では、初めての人でも迷わずオリジナルのブログアイコンを設定できるように、流れをひとつずつ整理していきます。

この記事で分かること

FC2ブログのアイコンとファビコンの違いが分かる
おすすめの作り方と設定手順をまとめて確認できる
表示されないときのチェックポイントが分かる

結論を先に一言でいうと、専門的な知識がなくても、順番どおりに進めれば自分だけのファビコンを簡単に設置できます。FC2ブログのアイコンやファビコンを変えたい人は、気になるところから読んでみてください。

fc2ブログのアイコン・ファビコンを変えると何が変わる？
fc2ブログファビコン用アイコン画像の作り方
fc2ブログにアイコン画像をアップロードする手順
テンプレートにfc2ブログファビコンのコードを追加する
スマホ対応も意識したfc2ブログアイコン設定のコツ
fc2ブログファビコン・アイコンが表示されないときのチェックリスト
アイコンデザインのアイデアと実例イメージ
よくある質問
まとめ

fc2ブログのアイコン・ファビコンを変えると何が変わる？

ごとう

まずは、そもそもFC2ブログのアイコンとは何か、そしてファビコンを変えると何が良いのかを整理します。ここがあいまいだと、「自分がいま何を設定しようとしているのか」が分かりにくくなるので、最初に軽く押さえておきましょう。

fc2ブログのアイコンは主に3種類ある

FC2ブログで「アイコン」と呼べるものはいくつかあります。ここを先に整理しておくと、自分が知りたいのはどの設定なのかがはっきりします。

種類	どこに表示されるか	主な役割・設定場所
ファビコン	ブラウザのタブ、ブックマーク	ブログ全体の印象。テンプレートの<head>に設定
プロフィールアイコン	記事下のプロフィール、コメント欄など	書き手の顔。プロフィール設定画面から変更
サムネ・OGP系画像	SNSシェア時、一覧ページの画像	記事ごとの見出し画像。アイキャッチ設定など

多くの人が「変えたい」と感じているのは、一番上のファビコンです。ブラウザのタブに表示される小さなFC2ブログのアイコンを、自分のロゴや文字アイコンに変えたい、というイメージですね。

fc2ブログのファビコンを変えるメリット

FC2ブログのファビコンを変えると、見た目が変わるだけでなく、使い勝手や印象にも良い影響があります。

ブックマーク一覧の中で自分のブログを見つけてもらいやすくなる
「あ、このブログだ」と一瞬で認識してもらえる
デフォルトのユニコーンアイコンと差別化できる
小さなスペースでブログの世界観やブランドを伝えられる

複数のブログを運営している人や、リピーターが多いブログほどファビコンの効果は大きいです。タブをたくさん開いていても、自分のブログタブをすぐ探せるので、自分自身にとってもかなり便利だと感じます。

fc2ブログファビコン用アイコン画像の作り方

ごとう

次に、FC2ブログのファビコンとして使うための「元画像」の作り方を説明します。ここを丁寧に作っておくと、あとで「小さくしたらつぶれた…」という残念な仕上がりを避けやすくなります。

用途	おすすめサイズ	ファイル形式の例	メモ
もっとも基本のファビコン	16×16px	ICO / PNG	ブラウザのタブ表示向け
少し大きめの表示用	32×32px	PNG	拡大表示や高解像度向け
スマホ用アイコン	180×180px前後	PNG	ホーム画面ショートカット向け

デザインのコツ（シンプルが正義）

FC2ブログのアイコンを作るとき、ついやりがちなのが「情報を詰め込みすぎること」です。小さいサイズでの見え方をイメージしながら、できるだけシンプルに作るのがコツです。

文字は1〜2文字までにする（ブログ名の頭文字など）
線は太めにして、色の数も2〜3色に抑える
背景と文字のコントラストをはっきりさせる（白と黒、紺と白など）
ロゴをそのまま縮小せず、「アイコン用に簡略化したロゴ」を作るイメージで考える

画像編集ソフトは高機能なものでなくても大丈夫です。無料のオンラインツールやスマホアプリでも、FC2ブログのファビコン用なら十分なクオリティになります。むしろ機能が絞られているほうが、迷わずサクッと作れることが多いです。

fc2ブログにアイコン画像をアップロードする手順

ごとう

ここからは、実際にFC2ブログにアイコン画像をアップロードして、あとで使うURLを控えるところまでを整理します。この部分を丁寧にやっておくと、テンプレート編集のときに迷いにくくなります。

管理画面からファイルをアップロードする流れ

ざっくりした流れは、次のようなイメージです。

手順	操作のイメージ	ポイント
1	FC2ブログの管理画面にログインする	対象のブログを間違えないように選んでおく
2	「ファイル管理」や「アップロード」メニューを開く	メニュー名は管理画面の種類によって多少違う
3	作成したアイコン画像を選んでアップロードする	ファイル名は半角英数字にしておくと安心
4	アップロード後、画像のURLを確認する	あとで使うので、必ず控えておく

実際のボタン名や位置は、管理画面やスキンによって多少違いますが、基本的には「画像をアップロードして、そのURLをコピーする」だけです。ファイル名は「favicon.png」「blog-icon.png」のように、あとから見ても分かりやすい名前にしておくと管理しやすくなります。

アップロードしたファビコンURLを控えるコツ

FC2ブログのファビコン設定では、この「画像URL」をテンプレートに書き込むことになります。ここをいいかげんにしてしまうと、あとで自分でもどれがどのURLなのか分からなくなります。

アップロード画面で表示されるURLを、その場でメモ帳アプリなどに貼り付けておく
ファビコン用の画像は専用フォルダを作るなどして、他の画像と混ざりにくくしておく
ブログ記事の下書き内に、一時的にURLをメモとして貼っておくのもアリ

特に、httpとhttpsの区別は大切です。ブログのアドレスがhttpsなのに、アイコン画像のURLがhttpのままだと、ブラウザが画像の読み込みをブロックしてしまうことがあります。URLをコピーするときは、このあたりも軽く確認しておくと安心です。

テンプレートにfc2ブログファビコンのコードを追加する

ごとう

続いて、テンプレートのHTMLにFC2ブログのファビコン用コードを追加していきます。聞くと難しそうに感じるかもしれませんが、やること自体は「決まった場所に1行追加するだけ」です。

</head>直前に書く基本コードのイメージ

テンプレート編集の大まかな流れは次の通りです。

管理画面の「テンプレートの設定」から、いま使っているテンプレートを開く
「HTML編集」を選んで、ソースコードを表示する
ページ上部のほうにある「</head>」という文字を探す
そのすぐ上の行あたりに、ファビコン用の<link>タグを書き足す

たとえば、PNG形式のアイコンであれば、イメージとしては次のような形になります。

【稼げるキーワード教えます】
▼　　▼　　▼

慣れている人なら、16px用と32px用、スマホ用のアイコンをそれぞれ別の<link>タグで書き分けても構いません。

属性	設定例	役割
rel	icon	ファビコンであることをブラウザに伝える
type	image/png など	ファイル形式をブラウザに伝える
href	画像のURL	実際のファビコン画像の場所

コードを書き込んだら、「テンプレートを更新」ボタンを押すのを忘れないようにしてください。保存をしないと、せっかく追記したFC2ブログのファビコン設定が反映されません。

テンプレート編集時の注意点（バックアップなど）

FC2ブログのテンプレートは自由に編集できる反面、間違えるとレイアウトが崩れることもあります。最低限、次の点だけ意識しておくと安心です。

編集前にテンプレートを「複製」しておき、元の状態を残しておく
目的以外の場所の文字は消さない、書き換えない
不安な場合は、先に全文をコピーして別のテキストエディタで編集する
変更後、ブログを開いてヘッダーやレイアウトが崩れていないか確認する

このあたりを守っておけば、FC2ブログのファビコンを追加しただけでブログ全体が壊れてしまう、という事態はかなり避けやすくなります。慣れてきたら、ほかの細かいカスタマイズにも挑戦しやすくなりますよ。

スマホ対応も意識したfc2ブログアイコン設定のコツ

ごとう

ここでは、パソコンだけでなくスマホやタブレットで見たときの見え方も含めて、FC2ブログのアイコンをどう設計するかをまとめます。いまはスマホからのアクセスも多いので、どちらでも見やすいアイコンを目指したいところです。

マルチサイズのアイコンを用意する理由

最近の端末は画面が高解像度なので、昔ながらの16×16pxのアイコンだけだと、少しぼやけて見えることがあります。そこで、FC2ブログのファビコン用に複数サイズのアイコンを用意しておくと、表示がきれいになります。

16×16px … もっとも基本的なファビコン
32×32px … 少し大きめに表示される場面向け
180×180px前後 … スマホのホーム画面用アイコンとしても使いやすい

複数サイズをひとつのICOファイルにまとめる方法もあれば、PNGを複数用意して<link>タグをいくつか書く方法もあります。最初は「最低限16×16、余裕があれば32×32や180×180も用意する」くらいの感覚で大丈夫です。

PC・スマホで見え方をチェックするポイント

FC2ブログのアイコンを設定したあとは、実際にいくつかの環境でチェックしておくと安心です。

デバイス	チェックする場所	見ておきたいポイント
PCブラウザ	タブ、ブックマークバー	文字やマークが潰れていないか
スマホブラウザ	タブ一覧、ブックマーク	色が薄くないか、背景と同化していないか
スマホホーム画面	ショートカットアイコン	角丸になったときのバランス

背景色と文字色の組み合わせで、印象は大きく変わります。「パソコンでは見やすいのに、スマホで見たら薄く感じる」ということもあるので、時間があるときに一度まとめて確認してみると良いです。

fc2ブログファビコン・アイコンが表示されないときのチェックリスト

ごとう

ここでは、FC2ブログのファビコンを設定したのに「アイコンが変わらない」「表示されない」というときのチェックポイントをまとめます。原因が分かってしまえば、対応はそこまで難しくありません。

よくある原因と対処法一覧

表示されないときにありがちな原因を、一覧で整理しました。

症状	よくある原因	対処法
まったく変わらない	ブラウザのキャッシュが残っている	シークレットウィンドウで開き直す、キャッシュ削除を試す
一部のページだけ変わらない	テンプレートが複数あり、一部だけ編集した	使用中のテンプレートすべてにファビコン設定を入れる
アイコンが「×」マークになる	画像URLが間違っている、ファイルが削除されている	ファイル管理画面からURLとファイルの有無を再確認する
鍵マークが警告表示になる	httpsページにhttp画像を読み込んでいる	画像URLをhttpsのものに差し替える

FC2ブログのファビコンを変えた直後は、ブラウザ側が古い情報を覚えたままになっていることが多いです。まずはシークレットモードや別ブラウザで確認してみてください。それだけで解決するケースもよくあります。

それでもダメなときに試したいこと

上のチェックをしてもFC2ブログのアイコンが変わらない場合は、次のようなことも試してみてください。

ファイル名を変えて再アップロードする（例：favicon2.pngなど）
仮のシンプルなアイコン画像で試し、反映されるかどうかを見る
テンプレートの<head>部分に、同じファビコン設定が二重に書かれていないか確認する
いったんファビコンの行を削除して保存し、そのあと改めて書き直して保存する

私も、ファイル名を変えたら突然反映されたことがあります。ブラウザやサーバー側が、古いファイル名のキャッシュを持っているだけというパターンも意外と多いので、「別名で試す」は手軽で効果のある対策です。

アイコンデザインのアイデアと実例イメージ

ごとう

ここでは、FC2ブログのアイコンをどんなデザインにするか、ジャンル別にイメージをふくらませていきます。「どんなアイコンにしようかな」と手が止まっている人は、参考にしてみてください。

ブログのジャンル別・おすすめアイコン案

ブログのジャンルによって、相性の良いアイコンの雰囲気があります。

ブログジャンル	アイコンの例	ポイント
日記・雑記	自分のイニシャル1〜2文字	背景を好きな色にして「自分らしさ」を出す
イラスト・創作	簡略化したキャラの顔	線を太めにして、表情をシンプルに
ビジネス・副業	ロゴ風の記号、グラフっぽいマーク	落ち着いた色で信頼感を出す
趣味（ゲーム・旅行など）	コントローラーや飛行機などのシルエット	ジャンルが一目で伝わるモチーフにする

「絵心がないから無理…」という人でも、シルエットや単純な図形なら意外となんとかなります。オンラインデザインツールのテンプレートをベースに、色と文字だけ自分用に変えてFC2ブログのファビコンにしてしまう、というやり方も十分アリです。

私が実際にやってよかったアイコン変更のステップ

私がFC2ブログのアイコンを変えたときの流れも、ざっくり紹介しておきます。

まずノートに「ブログのテーマ」と「自分のイメージカラー」を書き出す
イニシャル1文字と簡単なマークを、いくつかラフスケッチしてみる
一番しっくりきた案をオンラインツールで作り直し、16×16と32×32を出力する
FC2ブログにアップロードして、テンプレートにファビコン設定を追加する
PCとスマホから見て「少し薄いかも」と思ったので、背景色だけ少し濃く調整する

自分のFC2ブログのファビコンがタブに表示されたときは、小さな変化なのにかなりうれしかったです。「ちゃんと自分のブログを育てているな」という感覚が出てきて、更新のモチベーションにもつながりました。

よくある質問

ごとう

ここでは、FC2ブログのアイコンやファビコンについて、よくある疑問にまとめて答えておきます。

Q1. FC2ブログのファビコンを変えたのに、タブのアイコンがすぐに変わりません。

A. FC2ブログに限らず、ファビコンはすぐには更新されないことが多いです。まずはブラウザのキャッシュを削除するか、シークレットウィンドウでブログを開き直してみてください。それでも変わらない場合は、ファビコン画像のURLが正しいか、テンプレートの<head>内にFC2ブログのファビコン設定がきちんと書かれているかを確認してみましょう。

Q2. FC2ブログのアイコンは、必ずICO形式で作らないとダメですか。

A. 以前はICO形式が主流でしたが、現在はPNG形式でも問題なく表示されるブラウザが多いです。FC2ブログでも、PNGで作ったアイコンを<link rel=”icon” type=”image/png”>の形で指定すれば、通常のファビコンとして使えます。ただし、古い環境まで幅広くカバーしたい場合は、ICO形式も用意しておくとより安心です。

Q3. スマホでホーム画面に追加したときのFC2ブログのアイコンも変えたいです。

A. スマホのホーム画面用のアイコンは、「apple-touch-icon」などの別設定になることがあります。180×180px前後の大きめの画像を用意して、ファビコンとは別に<link>タグで指定する方法です。まずは通常のFC2ブログのファビコンを設定してから、必要に応じてホーム画面用アイコンも追加していくと、作業の混乱を防ぎやすいですよ。