当サイト使用中のテーマ「SWELL」のレビューはこちら

【SWELL】ファビコンを設定して差別化しよう!【Canvaで画像生成】

【PR】この記事には広告を含む場合があります。
アッフィー

こんな悩みを解決できる記事をご用意しました!
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で5桁のアクセスを達成することができました。

ブログの印象を大きく左右するファビコンは、あなたのブログを「プロ級」に見せるための第一歩です。

ブログにファビコンを設定できれば、自分のブログに愛着がわくと同時に、自信にもつながります。

この記事では、現役ブロガーである私がファビコンについて徹底解説します。

ブログの信頼性やブランドイメージを高め、他のブログと差別化したい方は、この記事を読んで、あなたのブログを次のレベルへ引き上げましょう!

目次

ファビコンとは?

ブログの顔とも言えるファビコン。

ウェブサイトを識別するための小さなアイコンですが、実はブログの印象を大きく左右する重要な要素です。

サイトを覚えてもらえる

ファビコンとは、ブラウザのタブやブックマーク、Googleの検索結果などに表示される、あなたのブログを象徴する小さなアイコンのことです。

ブラウザのタブに表示されるファビコン
ブラウザのタブに表示されるファビコン
検索で表示されるファビコン
検索で表示されるファビコン

例えば、お気に入りのサイトをたくさん開いている時、タブに表示されるマークを見て「このサイトだ!」と瞬時に判断できますよね。

それがファビコンの役割です。

このアイコンがあるだけで、あなたのブログを覚えてもらいやすくなります。

サイトの信頼感・認知度が向上する

ファビコンを設定しないと、WordPressのデフォルトアイコンが表示されてしまい、どこか「作りかけ」のような印象を与えてしまいます。

せっかく魅力的な記事を書いても、読者に「素人っぽい」と思われたらもったいないですよね。

ファビコンはブログの信頼感を高め、読者に安心してアクセスしてもらうための大切な要素であり、あなたのブログのブランディングにも繋がります。

サイトがクリックされやすくなる

ファビコンを設定しても、直接的なSEO効果はありません。

しかし、検索結果に表示された際にあなたのブログがアイコン付きで目立つことで、クリック率(CTR)の向上が期待できます。

ファビコンは、SEO(検索エンジンの最適化)にも間接的に良い影響を与える可能性があるということです。

読者が「このアイコンのブログ、知ってる!」「なんか面白そう」と感じてクリックしてくれれば、結果として検索順位の向上に繋がるかもしれませんよ。

ファビコンのサイズ・画像形式

ファビコン作成で迷うのが、適切なサイズや画像形式ですよね。

ここでは、ブログ初心者でも迷わない選び方をお伝えします。

ファビコンは「正方形」で「512px以上」がおすすめ

ファビコンは、どんなデバイスやブラウザで見てもキレイに表示されるよう、

正方形の画像を用意しましょう。

特にWordPressでは、512px × 512px(ピクセル)以上のサイズが推奨されています。

サイトアイコン設定画面

このサイズで作成しておけば、自動的に各ブラウザ向けのリサイズ画像が作成されるため、手間なく最適なファビコンを設定できますよ。

まずは、512px以上で作成することを意識しましょう。

画像形式は「PNG」を選ぼう

ファビコンの画像形式は、「png(ピング)」形式がおすすめです。

ファビコンの画像形式はpngがおすすめ

PNG形式は背景を透過(透明に)できるため、ファビコンが丸く表示される際にも、アイコンの周りに余計な白い枠などが付かず、スッキリと見せられます。

せっかく作成したデザインを損なわないようにするため、透過できるPNG形式で保存するようにしましょう。

画像は無料ツールCanvaで簡単に作れる

「自分で画像のデザインなんて無理…」と感じるかもしれませんね。

でも大丈夫です!

デザインツール「Canva(キャンバ)」を使えば、誰でも簡単に素敵なファビコン画像が作れます。

豊富なテンプレートや素材から好きなものを選んで、色や文字を変えるだけで、オリジナルのファビコンがあっという間に完成。

次の章でCanvaで作る手順を説明しますので、ぜひ試してみてください。

ファビコンを作る手順【Canva】

ここからは、無料のデザインツールCanvaを使って、ファビコンを実際に作成する手順を解説します。

難しい操作は一切ないので安心してくださいね。

STEP

Canvaで新しいデザインを作成する

まず、Canvaのトップページから「作成」をクリックします。

Canva_「作成」をクリック

次に、画面左側にある「カスタムサイズ」を選びましょう。

「カスタムサイズ」をクリック

ここでファビコンの推奨サイズである「512px × 512px」を入力し、「新しいデザインを作成」をクリックしてください。

「新しいデザインを作成」をクリック

新しいデザイン画面が開いたら、いよいよファビコン作りスタートです!

画面が開く
STEP

テンプレートや素材を選んでデザインする

デザイン画面が開いたら、左側のメニューから好きな「テンプレート」や「素材」を選んでみましょう。

ブログのテーマやあなたの雰囲気に合わせて、アイコンやテキストを配置します。

今回私は、「素材」から「波」の画像を選びました。

「素材」から「波」の画像を選ぶ

大きさを整え、波の色を変更し、画像に「SWELL」というテキストを追加しました。

10画像に「SWELL」というテキストを追加

画像を選んでから完成までの手順は以下のとおりです。

STEP
大きさを整える

まずは、画像の大きさを整えましょう。

図形の四隅をドラッグして大きさを調整してください。

画像を大きくする

大きさが整いました。

画像が大きくなった
STEP
図形の色を変更する

次に、図形の色を変えましょう。

図形を選択して、ブロックツールバーの色のついた〇をクリックしてください。

左側に色を選択できる画面が表示されます。

ブロックバーの色をクリック

レインボーで囲まれた「+」をクリックすると、下にカラーパレットが開きます。

カラーパレットの中の〇印を移動させて、お好みの色に変更してください。

カラーパレットで図形の色を変える
STEP
テキストを挿入する

最後にテキストを追加しましょう。

画面左の「テキスト」をクリックし、お好みの大きさのテキストボックスをクリックしてテキストボックスを追加してください。

「テキスト」をクリックしてテキストを追加する

テキストは、ツールバーを使って大きさ・文字の間隔などを変更しましょう。

テキストを調整する

Canvaの豊富な素材を試しながら、あなたのブログにぴったりのファビコンを作ってみてくださいね。

STEP

作成した画像をダウンロードする

デザインが完成したら、右上の「共有」ボタンをクリックし、「ダウンロード」をクリックしましょう。

この時、ファイルの種類は必ず「PNG」を選択してくださいね。

Canva Pro(有料版)の機能「背景透過」を使えば背景を透明にもできます。

「共有」⇒「ダウンロード」をクリック

ダウンロードした画像は、ファビコンの設定で使うのでわかりやすい場所に保存しておきましょう。

WordPress「SWELL」でのファビコンの設定手順

Canvaでファビコンが作成できたら、いよいよWordPressのSWELLテーマに設定していきましょう。

とても簡単な作業なので、一緒に進めていきましょう!

STEP

WordPress管理画面から「カスタマイズ」を開く

まずはWordPressの管理画面にログインしてください。

左側のメニューの「外観」⇒「カスタマイズ」の順にクリックします。

「外観」⇒「カスタマイズ」の順にクリック
STEP

「WordPress設定」から「サイト基本情報」へ進む

この「カスタマイズ」画面は、ブログのデザインや設定を細かく調整できる場所です。

カスタマイズ画面左側のメニューの「WordPress設定」をクリックしましょう。

「WordPress設定」をクリック

次に、「サイト基本情報」をクリックします。

「サイト基本情報」をクリック

表示された画面がファビコンを設定する場所になります。

STEP

「サイトアイコンを選択」で画像をアップロードする

「サイト基本情報」の画面に移動すると、「サイトアイコン」という項目があります。

ここにある「サイトアイコンを選択」ボタンをクリックしてください。

「サイトアイコンを選択」ボタンをクリック

すると画像アップロード画面が表示されるので、Canvaで作成してダウンロードしたファビコンの画像をアップロードしましょう。

ファビコンの画像をアップロード
STEP

画像を公開して設定完了

画像をアップロードしたら、画面上部に表示されている「公開」ボタンを忘れずにクリックしてください。

「公開」ボタンを忘れずにクリック

この「公開」ボタンを押すことで、設定がブログに反映されます。

これで、あなたのブログにオリジナルのファビコンが設定されます!

ファビコンが設定された

ファビコンが表示されない場合の対応

ファビコンの設定お疲れ様でした!

でも実は、設定後すぐに表示されないこともあるんです。

焦らないで、これからお伝えするポイントを確認してみてください。

ファビコンの反映には時間がかかることがある

ファビコンを設定しても、ブラウザのタブやGoogleの検索結果にすぐに表示されないことがあります。

これは、情報がインターネット上に浸透するまでに時間がかかるためです。

個人差はありますが、数日から長いと2週間ほどかかる場合もあります。

アッフィー

私も検索結果に反映されるまで10日ほどかかりました

すぐに表示されなくても心配せず、気長に待ってみましょう。

設定したファビコンが表示されない時の確認ポイント

もし数日経ってもファビコンが表示されない場合は、いくつか確認しておきたいポイントがあります。

まずは、ファビコンの画像サイズが「512px × 512px以上」になっているかチェックしてください。

また、ファビコンのURLを頻繁に変更していないかも重要です。

Googleのガイドラインでは、URLは固定しておくことが推奨されています。

  • ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
引用:Google for Developers

そのほか、ファビコンのデザインがGoogleのガイドラインに定められている不適切なデザインになっていると、ファビコンは表示されません。

不適切なデザインになっていないかどうかの確認も必要です。

  • わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
引用:Google for Developers

これらを確認することで、問題が解決することでしょう。

まとめ:ファビコンを設定してサイトを差別化しよう!

この記事では、ブログの顔とも言えるファビコンの重要性から、SWELLでの設定方法までを徹底解説しました。

ファビコンは、サイトを覚えてもらいやすくし、信頼感や認知度向上、さらにはクリック率の向上にも繋がります。

最適なファビコンのサイズは512px以上の正方形、画像形式は背景を透過できるPNGです。

デザインツールCanvaを使えば、初心者の方でも簡単にプロ並みのファビコンを作成できます。

作成後は、WordPressの管理画面からSWELLテーマに設定するだけで完了です。

ファビコンを設定して、あなたのブログをさらに魅力的に、そしてプロフェッショナルに見せましょう!

本ブログではWindowsテーマにSWELLを使用しています。

あなたもSWELLにしませんか?

このブログではSWELLを使用しています

今回は以上です。

最後までお読みいただきありがとうございました。

この記事が気に入ったら
フォローしてね!

シェア頂けると嬉しいです!よろしくお願いします!
  • URLをコピーしました!
目次