favicon（ファビコン）とは、そのウェブサイトやブログのもつイメージを端的に表現したアイコンのことをいいます。
パソコンやスマホでウェブサイトを開いたときに、そのサイトの名前の前についている、あの小さい画像のことですね。タブに表示されているので、faviconという名前を知らなくても、見たことがある方がほとんどかと思います。
設定していない場合には、薄いグレーの地球マークが表示されるのですが、せっかく自分のウェブサイトを作ったわけですから心躍るようなデザインの自分だけのfaviconを作りたくないですか？
今回は、Canvaを使って無料でfaviconを作る手順とwordpressに設定するまでの流れをまとめました。
Canvaにログインしましょう
まずはCanvaにログインしましょう。
Canvaへの登録がまだの場合、ブラウザの検索バーに【Canva】と入力してCanvaのホームページを表示してみてください。
公式ページから無料で≪登録≫できますので、下記のいずれかの方法でアカウントを登録して≪Canvaに参加≫しましょう。
- Apple
- Microsoft
- Clever
- メールアドレス
- 仕事用メールアドレス
- 電話番号
カスタムサイズ（512×512px）でデザインを作成
Canvaに自分のページが作れたら、最初のページにある≪デザインを作成≫→≪カスタムサイズ≫をクリックします。プルダウンの画面に数字を入力する箇所があらわれますので、512×512pxと入力します。
512×512pxと入力したら、≪新しいデザインを作成≫をクリックしてみてください。
≪新しいデザインを作成≫をクリックしたら、左右に別れた画面が表示されます。
左側が素材などを検索する場所で、右側がデザインを作っていく場所になります。
今回は【王冠】モチーフのfaviconを作りますので、【素材】をクリックした後に表示された検索バーのなかに【王冠】と入力してみます。
上記で説明したとおり、faviconはタブなどにも表示される小さい画像です。あまり複雑な模様にしてしまうと見にくくなってしまい、かえって印象が悪くなる可能性も考えられます。
なので、❶画像はできるだけシンプルに、かつ、❷なるべく大きく表示されるように、画面いっぱいに広げておくと見やすくなりますよ。
好みの画像が完成したら、右上の【共有】をクリックして、表示された【ダウンロード】ボタンからダウンロードしていきましょう。
ダウンロードができたら、wordpressで設定する
無事にダウンロードができたら、今度はwordpressに設定していきます。
wordpressにログインすると、左上に【ダッシュボード】と書かれたページが表示されます。そのなかの【外観】をクリック→つづけて【カスタマイズ】をクリックします。
さらに、【カスタマイズ】をクリックして表示された【サイト基本情報】をクリックすると、ようやく【サイトアイコン】と書かれたところが見つかりました。
サイトアイコン ＝ favicon（ファビコン）
その【サイトアイコン】と書かれた場所に、さきほどダウンロードした画像をアップロードしてみると……。
すぐにウェブサイトやブログの名前の前に【王冠】のアイコン（マーク）が表示されました！
＼ 無料なので透過は使えませんが、小さいものなのであまり気になりません ／
faviconは小さいけれど大切な表現ポイント
faviconについては「こだわらない」、「べつに気にしない」という方もいらっしゃるかもしれませんが、ほかのヒトの作成したウェブサイトを見たときのことを思い出してみてください。
灰色の地球（何も設定していないデフォルトの状態）が表示されているものより、自分のサイトだけのfaviconが表示されるウェブサイトの方が、なんとなくしっかり管理されている感じがしませんか？
パンのブログならパンの絵柄、読書ブログなら本のデザイン、っていうのも、わかりやすくて良いね
ブログ名の頭文字（フォント1字）で作るのもスッキリして良いかも！
小さな画像ですが、こだわりをもって作ったものが、ウェブサイトやブログの信頼性をあげるとともに、オリジナリティあふれる個性的なウェブサイトにすることができる。
そう考えると、自分のウェブサイトを表現する唯一無二のfaviconを作るのも楽しくなってきますね。
それでは、また☻
コメント