広告 ブログ

AFFINGER6のファビコン設定方法【ブラウザタブアイコン】

2023年9月2日

悩んでいる人

AFFINGER6でファビコンの変更方法が分かりません。適した画像や設定方法が知りたいです。

こちらに関する質問をAFFINGER6使用歴1年以上の僕が答えていきます。

記事で得られること

  • ファビコンとは?
  • ファビコンの役割
  • AFFINGER6のファビコン設定方法

実績と信頼性

今回はファビコンについての簡単な概要から設定方法に関して紹介していきます。

サイトイメージのアピールにもつながる要素なのでしっかり理解して設定をしておきましょう。

たかいち

AFFINGER6を中心に紹介しますが、考え方は他テーマでも同様だと思います。

ブラウザのタブにあるアイコンがFavicon(ファビコン)

この記事は下記の記事の続きになります。サイト全体の設定方法の概要が知りたい方は先にこちらをご覧ください。

>>AFFINGER6のデザインをカスタマイズする方法【総まとめ】

まだAFFINGER6を利用していない方はこちらを参考にしてください

>>AFFINGER6公式

それでは本題に入りますね。

Favicon(ファビコン)とは?

まず、Favicon(ファビコン)とは何か?についてですが。

ファビコンとはラウザのタブの部分に使用されているアイコン画像の事を指します。

GoogleChromeブラウザ上部(タブ)

また、Googleで検索したときの検索結果に表示されるアイコンの部分にもなります。

必要性はあるの?

続いて必要性に関してですが、結構重要だったりします。

理由としては次があげられます。

  • ブックマークの時のアイコンにもなる
  • ○○ブログと言えばこのアイコン

読者がサイトをブックマークしたりした際などに表示されるアイコンの部分にも反映されます。

ブックマークは多くなって埋もれがちになることが多く、読者にアイコンから自分のブログのブックマークを見つけてもらうときにも役に立ちます。

もう一つの理由としては、サイトイメージの印象付けに繋がるからですね。

企業や会社にとってロゴが重要なようにサイトにとってのロゴになる部分なのでしっかりと設定しましょう。

AFFINGER6のファビコン設定方法

AFFINGER6でのファビコンの設定方法は非常に簡単です。

次のステップに従って変更していきましょう。

  • ファビコン画像を準備する
  • サイト基本情報からファビコンを設定する

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

ファビコンには適した拡張子とサイズが存在します。

AFFINGER6に適したファビコンの拡張子

一般的にファビコンに使用される拡張子は

ICO形式 (.ico)、PNG形式 (.png)、GIF形式 (.gif)

中でも良く使われるのがICO形式やPNG形式になります。

拡張子はPCがファイルの種類を識別するときの目印

AFFINGER6に適したファビコンの画像サイズ

ファビコン画像に適したサイズですが、

こちらは公式に下記が推奨されています。

サイトアイコンは512×512px以上の正方形

サイト基本情報からファビコンを設定する

WordPress基本画面から「外観」>「カスタマイズ」>「サイト基本情報」の順にクリックすると下図に遷移します。

クリック後に画像を選択し、最後に「公開」をクリックすれば変更完了です。

たかいち

簡単ですね!

※AFFINGER6のアップデートにより手順が変わる可能性あり(2023年9月時点)

AFFINGER6のファビコンを本格的にするには【イラストレーター外注】

僕が等サイトでファビコンに使用している画像ですが、

プロフィール画像としても使用しています。

以前まではフリー画像を使用していましたが、イラストレーターの方に似顔絵イラストを外注しました。

たかいち

個性があり、大変気に入っております!

イラストを外注して良かったこと

無料の画像や、フリー素材というのは見る人が見るとフリー素材ということがすぐに分かったりします

それを避けたいという方がイラスト制作をしますが、次のようなメリットがあります。

  1. 唯一無二で独自性が出せる
  2. 似顔絵で個性が出せる
  3. サイトの信頼度があがる

特に信頼度に関して言えば、イメージでもいいのでプロフィール画像があるとその人のイメージがしやすくなるので、信頼度や安心感につながります。

サイトで述べている内容の説得力にも関わる部分になるので少しは意識しましょう。

イラストの外注費用は?

イラストを外注したときの費用は大体3,000円前後でした。

似顔絵1枚だけですが、それでも様々なサイズと拡張子での納品もスムーズに対応してくださりました。

たかいち

僕はクラウドソーシングサイトを利用して発注しました

実際にプロのイラストレーターの方に依頼したときの内容を話した記事をご覧ください。

>>ブログアイコンをイラストレータさんに依頼してみた!

ファビコンを設定して読者に認識されるブログを作ろう

ブログに使用されるファビコンの必要性

  • ブラウザのタブ
  • ブックマークのアイコン
  • 検索結果のアイコン

これらに使用されるアイコンになるため、サイト全体の印象にもつながり見つけてもらいやすくするという役割も担っています。

サイトの顔にあたる部分なので早い段階で設定をしておきましょう。

また、AFFINGER6を中心に解説しましたが、まだ持っていない方は

今回紹介したテーマを実際に僕が使ったときの感想や価格について触れたレビューがあります。

気になる方はどうぞ。

>>【AFFINGER6】アフィンガー6を実際に使ってみた感想とレビュー

今回は以上です。

  • この記事を書いた人

たかいち

【ブログ運営と声ブログコミュニティ運営】【25歳】【未経験から独学でエンジニア転職 ➤ 仕事終わりに作ったブログを毎日更新 ➤ ブログで月5万達成 ➤ ライターとして活動】「今はブログやライティングで副収入稼ぎながら、マネタイズのコツを声ブログにて毎日配信してます。」

-ブログ