サイトアイコンの作成方法を初心者向けに解説｜サイズやデザインのコツから設定方法まで

サイトアイコンは、ブラウザのタブ、検索結果のサイト名の横に表示されます。

サイトアイコンは、別名ファビコンと同じものになります。

検索結果を見ると、web横に小さな画像が表示されているのを見たことありませんか？

小さい画像ながらも、ブログの印象を左右する存在でもあります。

設定しておくことで、タブやブックマークで見つけやすくなる効果もあるんですよね。

作成は、WordPressの機能や作成ツールを使うことで、初心者でも簡単に作ることができるのです。

杏

この記事では、サイトアイコンの基本から作成手順、見やすく仕上げるコツ、設定方法までわかりやすくお伝えしています

目次[閉じる]

• 1サイトアイコンとは？
  • 1.1設定しておくメリット
• 2サイトアイコンを作成する前に決めること
  • 2.1どんなデザインにするか決める
  • 2.2小さく表示されても見やすい形にする
  • 2.3 推奨サイズと画像形式を確認する
• 3サイトアイコンcanvaでの作成方法
• 4まとめ

サイトアイコンとは？

サイトアイコンは、Webサイトをひと目で見分けやすくするための小さな画像になります。

WordPressでは「サイトアイコン」と表示されてますが、一般的には「ファビコン」とも呼ばれています。

• ブラウザのタブ

• ブックマーク

• 検索結果に表示

など、サイトの印象や見つけやすさに効果があります。

設定しておくメリット

サイトアイコンを設定しておくと、まずユーザーが自分のブログを見つけやすいことです。

タブを複数開いたときや、ブックマークを一覧で見たときに判別しやすくなるんですよね。

またアイコンがあることで、

・ブログの見た目
・運営者の印象

などが、出しやすくなるのです。

サイトアイコンを作成する前に決めること

サイトアイコンは小さな画像だからこそ、先に方向性を決めておくといいですね。

思いつきで作ると、

• 表示したときに見えにくかったり
• サイト全体の雰囲気と合わなかったり

バランスが取れないこともあるので、よく考えた上で作成していきましょう。

WordPressでは正方形の画像を使って設定できます。

サイズは、512×512ピクセル以上の画像で作成可能になります。

どんなデザインにするか決める

最初は、ブログの印象に合うデザインを考えます。 

失敗しにくい例として、

・ブログ名の頭文字を使う
・ロゴの一部を使う

など、ブログと関連があるもので作成すると方向性がぶれにくくなります。

杏

ちなみに私は、プロフィール名「杏（anne)」の「a」を使い作成しています。小さな画像になるのでデザインはシンプルな要素を切り出したほうが見やすくなると思います

小さく表示されても見やすい形にする

サイトアイコンは、とても小さく表示されます。 

変に凝った作りにしてしまうと、細かい文字や複雑な装飾は見えにくくなります。

・形はできるだけ単純に
・色数も増やしすぎない

など、シンプルデザインのほうが判別しやすくなるんですよね。

小さい状態でもひと目でわかる、「色」「形」を意識し作成してみてください。

 推奨サイズと画像形式を確認する

WordPressは、サイトアイコンには512×512ピクセル以上の正方形画像が推奨されています。 

形式は一般的な画像形式に対応してます。

杏

サイトアイコン（ファビコン）は、デザインを無料でダウンロードできるサイトもありますが、キャンバで簡単に作成できので試してみてはいかがでしょうか

サイトアイコンcanvaでの作成方法

サイトアイコンは、特別な知識がなくてもキャンバで簡単に作成できます。 

トップページの上にある、「カスタムサイズ」を選択します。

選択すると「カスタムサイズの画面」になります。

サイズを「512と512」と記入し「ピクセル」であることを確認したら「新しいデザインを作成」をクリックします。

作成画面になるので、背景や素材、または文字を選んでデザインを作成していきます。

作成したら、ダウンロードし保存すればOKです。

WordPress管理画面から、サイトアイコンを追加し保存したアイコンを入れていきます。

終わったら、必ず表示されているか確認してくださいね。

まとめ

サイトアイコンは小さな画像ですが、サイトの印象や見つけやすさに関わってきます。

WordPressではサイトアイコンとして設定でき、

ブラウザのタブやブックマーク、検索結果、スマートフォンのホーム画面などで表示されます。

サイトアイコンは目立たないようで、実際にはユーザーがブログを見分けやすいといった効果もあるんですよね。

作成する上で大事なのは、

• ブログ名や

• ロゴとの雰囲気をそろえつつ

小さく表示されても見やすいデザインにすること。

そうすることで、ブログ全体の統一感や信頼感にもつながってくると思います。