ちょっとしたオシャレで効果絶大!オリジナルのファビコンをつくろう♪

今回は自身のサイトのシンボルマークとなる「ファビコン」と呼ばれているアイコンのつくり方と(WordPress Simplicityを使った)表示方法をご紹介します。

favicon02

ファビコンはサイトのシンボルマークで名の知れたサイトでは必ず分かりやすくセンスの良いアイコンが設定されています。

20160121-02

ファビコンを設定していない場合、上のような寂しいアイコンが表示されます。ご自身のサイトを立ち上げた時にはファビコン作成は必須作業と言っても言い過ぎではないでしょう。

スポンサーリンク

ファビコンとは

ファビコンとは「フェバリット(favorite)=大のお気に入りの、特に好きな」と「アイコン」を合成した俗語で、ウェブサイトを開いた時に表示されるシンボルマークを指します。

20160121-01

「Google」「Yahoo!JAPAN」「楽天市場」とアイコンを見るだけで何のサイトか判別する事ができます。ファビコンの大きさはとても小さいので色や形に特徴を付ける必要があります。

1.画像を探そう

絵心がある人なら、ペイントなどでアイコンを作ることも可能でしょう。

しかし、絵心のない著者はゼロからサイトのアイコンを作ることはできませんでした。

私がファビコンを作成するうえで参考にしたサイトを紹介しておきます。これらのサイトとWindows標準のペイントを駆使して作成しました。

「ICOOON MONO」

20160121-05

「ICOOON MONO」

ダウンロード手順

  1. 好きなアイコンを選ぶ。
  2. サイズ、色を選び、PNG形式でダウンロードする。

「Flaticon」

20160121-06

「Flaticon」

ダウンロード手順

1.好きなアイコンに、マウスのカーソルを合わせる。

2.「目」の絵が描かれたマークをクリックする。

3.「色抜きor色あり」を選び、「PNG」、「画像の大きさ」を順にクリックする。

4.無料でダウンロードする場合は「Free download」のボタンを選択する。

2.アイコンを白抜き加工しよう

センス良くアイコンを製作された方は問題ないのですが、私のように不器用な者が作ったアイコンはサイト上で表示されたときに白い枠が表示され見栄えが悪くなります。つくったアイコン画像の白抜きを行ってくれるのが次の2サイトです。

「PEKO STEP:画像に透過色をつける編集ツール」

20160121-10

「PEKO STEP:画像に透過色をつける編集ツール」

「画像を透過するツール」

20160121-12

「画像を透過するツール」

20160121-13

白抜き(画像を透過)することで上の画像の様に見栄えがよくなりました。

3.ファビコンを設定しよう

ここまでくればあとは簡単です。

1.ワードプレス管理画面「メディア」→「新規追加」を選択して、「ドラック&ドロップ」してファビコン画像を登録します。

2.「外観」→「カスタマイズ」へ移動します。「その他」内のファビコン項目「画像を選択」をクリックし、つくったファビコンを登録します。

※推奨されている画像ファイルの形式は(.png)です。

3.「保存して公開」ボタンをクリックして設定作業は終了です。

あとがき

ファビコンは簡単に作成、設定ができるのにも関わらず、サイトの印象がぐっと変わったよういに思いませんか?

沢山のアイコンを参考にオリジナリティ溢れるファビコンをつくってみてはいかがでしょう。

スポンサーリンク

シェアする

フォローする