WordPressのサイトアイコン(ファビコン)を自力で作る方法

スポンサーリンク
WordPress
スポンサーリンク

サイトアイコン(ファビコン)とは?

あなたはWordPressのサイトアイコンを初期設定から変更しましたか?

 

まず、サイトアイコンはファビコンとも言われており、由来は、Favorite icon(お気に入りのアイコン)を略してfavicon(ファビコン)となったようです。

 

あと…お気に入りやブックマークに追加すると、左側に表示される画像です。

 

そして、サイトアイコンとは下記のようなもので…緑枠がGoogleのアイコンで、赤枠が私の初期設定のアイコンです。

サイトアイコン(ファビコン)画像

 

ところで…なぜ、このサイトアイコンを変更しようと思ったかといいますと…ある時、こんな情報を目にしたのです。

 

サイトアイコンもSEO効果がある

 

なんと!?まさか…

 

Googleも公式にファビコンについて公表しており…他のサイトと、ひと目で見分けがつくようにって事で、サイトアイコンの変更はSEO効果があるそうなんです。

 

ガイドラインについては、以下を参照して頂ければと思います。

 

検索結果の横にファビコンを表示するには、次のガイドラインに準拠する必要があります。なお、すべてのガイドラインが満たされても、ファビコンが検索結果に表示されるかは保証されません。

  • Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。
  • ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
  • ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
  • ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
  • わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

引用元:Search Console ヘルプページ(検索での見え方>検索結果に表示されるファビコンを定義する)

 

私はずっと初期設定のままだったのですが…その情報を目にしてから危機感を覚え、早速サイトアイコンを変更しようと思い、更に差別化を図っていくために「どうにか自力で作らねば!」と作業を進めていったのです。

 

まず最初に、下記のようにググっていきました。

  • サイトアイコン 作り方
  • ファビコン 作り方
  • サイトアイコン 自作 方法

ただ、いくら探しても…アイコンのファイルの拡張子の変換方法や、操作方法が難しいツールを使った作成方法ばかりでした。

 

あぁ、どうせ私みたいな初心者に、サイトアイコンの自作は無理だ…

 

 

なんて、諦めてはいけませんね!

 

なので今回は、私のような初心者でも、超簡単にWordPressのサイトアイコン(ファビコン)を自力で作る方法をお伝えしたいと思います。

 

WordPressのサイトアイコン(ファビコン)を超簡単に自力で作る方法

WordPressのサイトアイコン(ファビコン)を超簡単に、自力で作る方法とは…『ペイント3D』を使って作成する方法です。

 

ここでは、私のアイコンを作る過程と、ペイント3Dの操作方法を並行して、ご説明していきます。

 

ペイント3Dは、Windows10に無料で搭載済のツールなので…お金がかかったり、インストールする手間は不要です。

 

それでは、まずペイント3Dを起動して新規作成をクリックください。

 

ただ、ここでGoogleのガイドラインを確認すると…

 

ファビコンのサイズは48ピクセルの倍数になっている事

 

となっており…更に、WordPressのサイトアイコン挿入画面を確認すると、以下のようになっております。

WordPressのサイトアイコン(ファビコン)を自力で作る方法1

 

なので、『528×528』のサイズで作っていきたいのですが…ちなみに、私は最初512×512で作ってしまったので、最初からやり直しました(^^;余談です。

 

下記がペイント3Dの新規作成画面ですが…まず、赤枠のキャンパスをクリックし、出てきた緑枠のキャンパスのサイズ変更の『縦横比を固定する』のチェックボックスを外し…

幅に528ピクセル、高さに528ピクセルを入力する。

WordPressのサイトアイコン(ファビコン)を自力で作る方法2

 

それでは、肝心の画像を作成していきましょう。

 

WordPressのサイトアイコン(ファビコン)を自力で作る方法3

まず、のブラシを選択し、油彩ブラシを選択…磨かれた金属を選択し、の色を選択してペイントする。

 

一応で、それぞれ選んだ理由は以下です。

油彩ブラシ単調な仕上がりにならないから
磨かれたブラシ1番ツヤがあったからで、他にも…つや消し、光沢、くすんだ金属がある

 

しかしながら…このアイコンは、実際に表示されると…かなり小さくなるので、艶も何もないかと思いますが、私は作り終えて気づいたので…時間がない方は、そこまでこだわる必要はないでしょう。

 

続いて、下記画面で赤枠2D図形をクリックして【円】を選択し、枠いっぱいに円を書いていく。

WordPressのサイトアイコン(ファビコン)を自力で作る方法4

上記では、黒線の円ですが…実際は白色にして下さい。

 

次に…今描いた、円の外側を【ブラシ】項目の…消しゴムや塗りつぶしを使って、全て消していくと以下のようになります。(ここが1番面倒くさいかもですね)

WordPressのサイトアイコン(ファビコン)を自力で作る方法5

 

続いて円の中側を整えていきますが…ここも、以下のように白色の円を書いてください。

 

WordPressのサイトアイコン(ファビコン)を自力で作る方法6

 

上記のように、赤枠の『太さ』を大きくすると…中に残った色を消しゴムや塗りつぶしで、一気に消すだけなので便利です。

 

続いて、円の中に立体的な『T』のアルファベットを入れていきます。

 

下記画像のように3D図形を選択し、立方体のアイコンを選択して、ちょうど良い大きさの直方体に調整する。

傾きは黒丸の矢印で調整する。

WordPressのサイトアイコン(ファビコン)を自力で作る方法7

 

続いて、同じように縦棒を入れます。

 

WordPressのサイトアイコン(ファビコン)を自力で作る方法8

 

恐らく上記のように、横棒と縦棒がずれるので、下記画像のように赤丸をクリックしてドラッグ&ドロップで調整する。

 

WordPressのサイトアイコン(ファビコン)を自力で作る方法9

 

すると、アイキャッチ画像のようになって完成です。

 

あとは、ダッシュボード画面から

外観』→『カスタマイズ』→『サイト基本情報

で作った画像を、挿入すれば完了です。

 

まとめ

以上、WordPressのサイトアイコン(ファビコン)を『ペイント3D』を使って、超簡単に自力で作る方法をお伝えしました。

 

本当に、私のような初心者でも簡単に作成できたので、あなたにも必ずサクッとできます。

 

なので、これを機会に、あなたのサイト情報の顔とも言える、サイトアイコンを自力で作って、他のサイトと差別化を図ってみてはいかがでしょうか?

 

冒頭にも申し上げましたがSEO効果もあるので、一石二鳥だと思います。

 

お役に立てれば幸いです。

 

WordPress
スポンサーリンク
スポンサーリンク
たすくをフォローする
スポンサーリンク
Tasublog

コメント