アイコン(ファビコン)
アイコン(ファビコン)は、Webサイトを開いたりお気に入り登録したときサイト名と一緒に表示される画像です。
Twitterアイコンとは、別の物になります。Twitterアイコンはプロフィール画像ですが、今回紹介するアイコン(ファビコン)はサイトをイメージする画像です。
アイコン(ファビコン)は、サイトを一目で認識してもらえるように、サイトをイメージしたわかりやすいものにしなければいけません。
そのために、アイコン画像はシンプルで見やすく、他のサイトと被らないものを作りましょう。
シンプルなアイコン画像を作る方法を3つ紹介するので、ぜひ試してください。
画像サイズは、どれも200px×200pxで作っています。
シルエットイラストをダウンロードして使う
無料で、加工OKのイラストをダウンロードして色を変えたり組合わせたりして使いましょう。
例えば、下記のイラストは無料のイラストをダウンロードして背景に色を付けただけの物です。
どうですか？
これだけで、シンプルなアイコンになります。でも、これだけでは、シルエットをそのまま使っているので、ありふれた感じになります。
なので、画像に色をカラフルにしたり画像と画像を組合わせたりして、ありふれた感をなくしましょう。
ダウンロードしたイラストを、ちょっと加工しただけでアイコンになります。
この方法は、簡単なのでおススメです。
商用利用しているサイトのアイコンにするときは、商用可のダウンロードサイトを使いましょう。
今回私が使ったサイトは、シルエットイラストです。
図形を組合わせる
図形を組合わせるだけでアイコンになります。〇や△や□を組合わせるだけの単純なものです。
単純なので誰でもできます。誰でも、好きなように図形を組合わせるだけなので超が付くほど簡単にできます。
アレンジ自在です。好きな図形を組合わせて好きな色で塗ってみてください。それだけでアイコンになります。
でも、せっかくアイコンを作るなら自分のブログのイメージに合うように図形を組合わせましょう。
特に意味もなく、図形を組合わせて作ったアイコン↓
文字をアイコンにする
文字のアイコンが一番わかりやすいです。でも、多くのサイトで文字のアイコンを使っているので、個性をだそうとしても難しいです。
大手のサイトでは文字を使っているアイコンを採用しているところが多いです。例えば、GoogleだとＧを加工してアイコンにしていますし、Yahoo!だとＹ！というアイコンです。
文字をアイコンにする場合は、文字をそのまま使うのではなく、他のサイトと区別できるように工夫しましょう。
では、実際に文字アイコンを作ってみます。
以下の画像は、INという文字が書かれた画像です。
これだけでは、ありふれたアイコンです。文字だけでは寂しいし、このアイコンでは個性がありません。
個性を付けるために、少し加工します。
背景にランダムに〇を描いてみました。
よく似たアイコンはあるかもしれませんが、この画像の〇は適当に描いたものなので全く同じアイコンは存在しません。
適当に、描いた〇だけで文字のアイコンが華やかになりました。ただ、個性があるかと言われたら、個性は薄いかもしれないです。
でも、よく似たアイコンに出会わなければ特に問題はないです。
