ブログでサイトアイコンを作成してみましょう！

こんにちは、みよし之です。

サイトアイコンとは、検索した時に表示される一番左側にあるアイコンのことです。ファビコンともいわれています。

以前から、このサイトアイコンは気になっていたんです。

なぜなら、検索していると全く同じアイコンが表示されているのをよく見かけるからです。

ブログを始めてからサイトアイコンを作成していない場合、デフォルトのサイトアイコンになってしまいます。

そのため、自分の記事がどの位置に表示されているのか分かりにくくなってしまいます。

このようなことから、さっそくサイトアイコンを作成してみました。

ここでは、サイトアイコンの作成方法と注意事項、そしてサイトアイコンを表示させる設定について説明しています。

サイトアイコンの使い方について

まずは、サイトアイコンを使うとどのようなメリットがあるのかを説明します。

• 検索などの時に他のアイコンと差別化がしやすい
• 何度か訪問してくれたユーザーはこのアイコンを覚えてくれるのでクリックしてくれやすい
• 画面上にあるタブにも表示されるのでさらにユーザーに覚えてもらいやすくなる
• プロフィール画像であればSNSでも活用できるので幅が広がりやすくなる

検索して記事を探す時、このような経験はありませんか。

このように、しっかりした記事を書いていれば、ユーザーからも信頼感や安心感が生まれ、再びサイトに訪れてくる可能性が高くなるのです。

サイトアイコンやプロフィール・サイトのデザインなどは、ユーザーの記憶に残っていることも多いのです。

まずは、検索でのサイトアイコン、次にプロフィールやサイトのデザインなどとなってくるように思います。

ですから、サイトアイコンがデフォルトの場合はどうでしょうか。

よくあるアイコンだからユーザーへのインパクトは弱くなりますよね。

そういう訳なので、まずは簡単なものでもいいので作成してみましょう。

ちなみに、タブで確認してみるとすぐにわかりますが、私のサイトアイコンはブログタイトルの頭文字であるMです。

シンプルなのですが、似たようなアイコンにはまだ遭遇していません。

サイトアイコンを作る前に確認しておきたいこと

その前に、サイトアイコンを作成する前に注意点がいくつかあります。

• サイトアイコンのサイズは512×512ピクセルサイズにすること
• デザインが差別化されていること
• 商標権・著作権などが含まれていないこと

サイズに関しては、テーマによっても変わると思いますので、事前に確認しておきましょう。

XWRITEでは、このピクセルサイズとなっています。

また、特に難しいのが商標権・著作権などではないでしょうか。

特許庁ウェブサイトでは、商標登録できないものとして次のように書かれてあります。

v) 極めて簡単で、かつ、ありふれた標章のみからなる商標（商標法第3条第1項第5号）

（例）仮名文字の1字、数字、ありふれた輪郭（○、△、□等）、ローマ字（AからZ）の1字又は2字

出典：特許庁ウェブサイト　https://www.jpo.go.jp/system/trademark/shutugan/tetuzuki/mitoroku.htmlより引用

これをみてちょっと疑問に思いませんか。

条件はあるようですが、漢字1文字を使うのはありふれたにならないことがありますので、調べた上で使用するかどうかを判断した方がよさそうな気がします。

また、数字・アルファベット2文字とありますが、ここにはデザインが含まれていません。

他の人のデザインを真似して作成しないようにしましょう。

Canvaを使ってサイトアイコンを作りましょう

Canvaを使うと簡単にサイトアイコンを作成することができます。

CanvaはGoogleアカウントなどと連携することができ、登録が簡単です。

有料プランと無料プランがありますが、無料プランでも多くのテンプレートや素材が使えます。

文字を入力するのも簡単で、配置や角度・文字のデザインも楽に切り替えたりできます。

まずは、登録から始めましょう。

登録の仕方は簡単ですが、不明な方はこちらをご覧ください。

登録から使い方まで

Canvaの登録から使い方について！

こんにちは、みよし之です。 今回は、Canvaの使い方について記事を書いてみました。 アイキャッチ画像やヘッダー画像、サイトア…

2023年8月4日 2024年4月20日

まずは、デザインの作成する前に、ブログのテーマからサイトアイコンのサイズを確認してみましょう。

サイズが分かれば、そのサイズに合わせてキャンバスを表示させます。

1. Canvaのサイト画面右上にあるカスタムサイズをクリックする
2. 幅512・高さ512pxを入力
3. 新しいデザインを作成

これでキャンバスが表示されます。

私の場合は、ここにMと入力して大きさや色を変更して作成しました。

画面左上に検索する場所があります。ここにサイトアイコンもしくはロゴと入力するとそれにあったテンプレートや素材が表示されるので、気に入ったものを選ぶこともできます。

Canva Proを契約すると王冠マークのものを使うことができるようになります。

例えば、サイズの変更です。512×512pxで作成したものを500×500に変更するには、Canva Proが必要になります。もし、無料プランの場合だと、最初からそのサイズで作り直す必要が出てきます。

なので、必要なサイズは最初に考えておく必要が出てくるというわけです。

また、テンプレートをそのまま使うことはできません。テンプレートを基に自分オリジナルなものを作る必要がありますので、こちらも注意しておきましょう。

ダウンロードからファイルを保存しましょう

出来上がったサイトアイコンをパソコンにダウンロードしなければなりません。

1. 画面左上にあるファイルをクリックしてから、ダウンロードを選択する
2. ダウンロードするファイルの種類を選択
   画質を選ぶ場合はPNG、ファイルサイズを小さくしたい場合はJPEG
3. ダウンロードした後は、エクスプローラーを開いてダウンロードの項目を確認

アイコン素材サイトの紹介

ここでは、商用利用可能で簡単にアイコンを探すことができる素材サイトを2つ紹介します。

ICOOON MONO

デザインも豊富にあり、無料でダウンロードをすることができます。

Icon rainbow

こちらもデザインが豊富にそろっています。気に入ったものをすぐに無料でダウンロードすることができます。質問に対する返答が多数あるため、疑問が解決しやすいと思います。

サイトアイコンの設定について

それでは、作成したサイトアイコンを設定していきます。

サイトアイコンをアップロードする場所は、テーマによって少し違うかもしれません。

CocoonもXWRITEもサイトの基本情報からアップロードすることができます。

設置ができたら、公開をクリックします。

なお、すぐには反映されません。

しばらく経ってから検索画面にサイトアイコンが表示されるようになります。

念のため、似たような画像がないか確認してみてください。

確認の仕方は、画像を右クリックしてchromeだとGoogleで画像を検索、Edgeは画像検索で似たような画像が表示されます。

もし、サイトアイコンが反映されなかった場合について

私の場合、15時間以上たっても反映されていませんでした。

キャッシュが関係しているのかなと思って履歴を削除してみたところ、すぐにタブ上のアイコンは反映されましたが、検索上のアイコンはダメでした。気になる場合は、キャッシュを削除してみましょう。

• chromeの場合
  画面右上にある設定からその他のツールを選択して、閲覧履歴の削除から行う
• Edgeの場合
  画面右上にある人物マークのアイコンから設定、もしくは設定などから設定を開く
  プロファイルを開いてプライバシー・検索・サービスの項目の中から削除

なお、Cookieとパスワードのチェックを外してください。

次のような問題もありますので、安易にチェックを入れないことをおすすめします。

興味のある人はどうぞ！

ブラウザゲームが消えました！

こんにちは、みよし之です。 今回はEdgeによるブラウザゲームのデータが消えた原因についてを記事にしています。 ある日のこと…

2023年6月16日 2024年3月10日

なお、検索上ではなかなか反映されません。私の場合は、2週間くらい掛かりましたので地道に待つ方がよさそうです。

まとめ

サイトアイコンは、他のサイトと差別化することができユーザーにも覚えてもらいやすくなります。豊富なテンプレートがあるCanvaを使ってデザイン作成すると簡単に作ることができます。一方で、ICOOON MONOやIcon rainbowから素材をダウンロードして使うこともできます。これらはサイトアイコン以外にも幅広い使い道があると思います。上手に活用していきましょう。

ただし、事前に利用規約や禁止事項には目を通しておく必要があります。せっかく使わせていただいてるのでルールは守るようにしましょう。不明な場合は問い合わせて確認してみることもいいと思います。

なお、設定はワードプレス管理画面から行うことができます。設定してもすぐには反映されませんので後程確認してみてください。

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