ファビコンってちゃんと作ってる？設定方法から自分で綺麗に作成する方法まで一挙紹介

こんにちは、マツコです。

いきなりですが、「ファビコン」ってご存知ですか？サイト運営者ならほとんどの方が知っている言葉だと思いますが、独自ドメインでブログを開設したばかりの方には分からない方もいると思います。

ちなみにこれ↓

…ではないですよ(笑)

そこで今日はファビコンの設定方法から自分で綺麗に作成する方法まで紹介していきたいと思います。

ファビコンとは？

「そもそもファビコンってなんぞや？懐かしのゲームですかいな？」という方に向けて簡単にファビコンについて説明していきます。

ファビコンとはウェブサイトのシンボルマークのことです。

インターネットを開くとタブの横にマークがあるのを見たことありませんか？私のサイトでいうと次の画像の赤線で囲ったところのことです。

“マツコのマツコラム”というサイト名で、イメージカラーがこの深めの青なので、分かりやすくこのファビコンを作成しました。かな～りシンプルなのでいずれ変更するかもしれません。

画像からも分かるように、ファビコンを設定していると、タブを複数開いている場合などに、誰にサイトにアクセスしているか明確になります。また、顔と名前が一致するように、ファビコンとサイト名をセットで覚えてもらえるかもしれません。

ちなみに、ファビコンが未設定だと次の画像が表示されます。

これでは誰のどんなサイトか分からないですよね。よって、ファビコンの設定が必須になってくるというわけです。

ファビコンの設定方法

ここではワードプレスのファビコンの設定方法について紹介していきます。(他のブログサービスを使っている方はすいません)

WordPress管理画面から「外観 > カスタマイズ」へと進みます。

次の画像のようにライブプレビュー画面になるので、「サイトの基本情報」をクリックしてください。

すると、サイトの基本情報の詳細画面へと移ります。この中にファビコンを投稿・設定する場所があります。※画像はTCDのCOREを参照にしていますが、ワードプレスなら似た画面が表示されるはずです。

画像内ではすでにファビコンが設定されていますが、ここの新規で画像をアップロードすることになります。

ファビコンの規格

ファビコンのアイコンサイズの主な規格は、タスクバーに表示されるもので「16px×16px」、デスクトップのショートカットで「32px×32px」となります。

また、スマホのウェブクリップアイコンは「114px×114px」となります。

ファビコンを簡単に自作する方法

ここからは綺麗なファビコンを簡単に自作する方法を紹介していきます。

Favicon Generator

リンクはこちら：
http://www.degraeve.com/favicon/

ドット絵でファビコンを作れるサイトです。ちなみに私も今のファビコンをこのサイトで再現してみたところ、1分もかからず出来上がり…ってクオリティーが…(笑)

絵心がある方は凝ったファビコンを作ることができるかも？

その他

他には画像をアップロードしてファビコンの規格に変更するサイトもありますが、私的にはFavicon Generatorを使うか、パソコンに最初から入っているペイントを使って自作すれば十分だと思います。

Photoshopが使えるならさらに美しいファビコンを作成できるでしょう。

まとめ

ファビコンはサイト運営では欠かせない要素なので、できるだけ早く設定しておくことをおすすめします。もしどうしてもデザインが決まらない場合はフリー素材の画像をファビコン規格にするだけでもいいので、まずはチャレンジしてみることから始めましょう。

 

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