ファビコンは、ブラウザのタブで表示される時やスマホで表示される時など、サイトの顔になる部分です。
しっかりとしたものを設置しておくことで、他のサイトと差別化できますよ。
プロに依頼することが一番いいですが、もちろん自分で作る子ともできます。
この記事では、ファビコンを作成する方法を3つ紹介するので、ぜひ参考にしてみてください。
そもそもファビコンとはどんなもの？
- タブの左にある画像
- 一目でわかりやすいデザインが良い
- wordpressではサイズが512×512px以上
- 使える画像のフォーマットは3つ
まずは、ファビコンとはどんなものがおさらいしておきましょう。
基本的なことなので、わかってる人はスルーして大丈夫ですよ。
① ファビコンはタブの左にある四角い画像
ファビコンとはブラウザで開いたときに、そのタブの左側にある画像のことです。
この画像を使っているのが、このサイトだぜっていうのをアピールできます。
スマホで検索するときはそれぞれのURLの隣に表示されるので、サイトを認識してもらいやすいように分かりやすいものにしましょう。
たくさんタブを開いていると、どのサイトを開いていたかわからなくなることがありますよね。
その際にファビコンでサイトを差別化しておくことで、見分けやすくなるので絶対に設定しておくのがいいですよ。
② 一目で分かりやすいデザインにするのが良い
ファビコンは、分かりやすいデザインにしておくことが一番です。
というのも、小さな画像なので複雑なデザインでは細部を見ることができません。
デザインが複雑だと分かりづらいというもあり、シンプルなデザインにするのがいいですよ。
サイトをイメージした画像やサイトタイトルの最初の1~3文字目までを入れるなど、誰が見てもすぐにわかるようにしておきましょう。
シンプルかつ目を引く色使いにすると、より目立たせることができます。
③ wordpressなら512×512px以上のサイズ
- 16×16px：IEタブ
- 24×24px：IE9のピン留め
- 32×32px：Chrome、Firefoxなどのタブ
- 512×512px：wordpress
ファビコンをwordpressで利用する場合は、サイズは512×512px以上が推奨されています。
ワードプレスで利用しようとしている場合は、ファビコンの画像サイズを間違えないようにしましょう。
また、一般的なファビコンの画像サイズは、上記のようになっていますね。
ブラウザによってはうまく縮小できないことがあるので、ワードプレス以外の場合は16×16pxと32×32pxの二つは最低限用意しておくと安心です。
④ 使用できる画像のフォーマットは3つ
- .png
- .gif
- .ico
ファビコンには、一般的にこれらのフォーマットが利用可能です。
ブラウザが古い場合には表示されない形式があるので、.icoを使うのが無難ですね。
また、ワードプレスの場合はPNGやJPGで問題ないですよ。
僕は、wordpressのファビコンはPNGでアップしており問題なく表示されています。
ファビコンを作成する3つの方法
| 作成方法 | クオリティ | オリジナリティ | 値段 | おすすめ度 |
| プロに依頼 | 高い | 高い | 高い | ☆☆☆☆☆ |
| 無料素材 | そこそこ | 低い | 安い | ☆☆☆ |
| 自作 | スキル次第 | 高い | ソフト次第 | ☆☆☆ |
これはあくまで僕の主観になりますが、それぞれの作成方法の特徴です。
しっかりとしたものを作りたいのなら、お金が掛かりますがやっぱりプロに任せるのが一番ですね。
それぞれの方法を解説していくので、ぜひ参考にしてください。
① プロに依頼して作成してもらう
ファビコンを作成するのであれば、プロに依頼するのが一番です。
自分でファビコンを作る技術がないという人は、お金はかかりますがプロに依頼するのがクオリティもたかく作ってもらえるので安心ですね。
ファビコンを依頼して作ってもらう際に利用したいサイトがあり、それがココナラです。
ココナラはイラストレーター以外にも様々な技能がある人が登録しているので、ブログやサイト制作をする上で色々と活用することができます。
ココナラのサイトロゴ(ファビコン)依頼をするときの相場や口コミ・評判を別の記事で紹介しているので、そちらも参考にしてみてくださいね。
② 費用を掛けたくないなら無料素材を探す
費用を削減したいなら、無料素材を探してみましょう。
無料素材なら費用も掛からずに使えるので、ファビコンにかける予算がないという場合におすすめです。
しかし、無料素材なので他の人も使っている可能性もあり、他人とかぶることもあるしオリジナリティは出ません。
他のサイトとしっかりと区別してもらうには、やはりプロにオリジナルのものを作ってもらうのがいちばんですね。
③ 自作するなら4つの選択肢がある
- Canva
- ペイント
- スマホアプリ
- フォトショップやイラストレーター
ファビコンを自作するには、これらの4つの方法があります。
それぞれのやり方を紹介していくので、参考にしてみてください。
自作方法① CANVAを使って作成
初めてファビコンを作るなら、CANVAを使うのがおすすめです。
このサイトのファビコンは色々な方法で作っては変えてをしてきましたが、wordpressサイトのファビコンを無料で作るならcanvaがトップクラスに簡単に作成できました。
はっきり言って、初めてファビコン作るときにCanvaを知っておきたかったです。
Canvaは無料で利用できるデザイン作成ツールで、ファビコン用にカスタムサイズで作成することが可能です。
といっても、僕はwordpress用にファビコンを作ったので、通常の16×16や32×32の場合はどうなるかは分かりません。
自作方法② ペイントとFaviconGeneratorを使って作成
最初にファビコンを作るのに使ったのは、 favicon generatorというサイトです。
favicon generatorは画像ファイルを指定するだけで、簡単にファビコンを作ってくれます。
ワードプレスが推奨するサイズが512×512～700x700pxなので、ペイントで元画像を作成するときは700×700pxで作りました。
ペイントを使って絵を描くとなると、マウス操作がすごくむずかしいので作成には注意が必要です。
自作方法③ スマホアプリを使って作成
ibis Paint というスマホアプリがあり、紙に描いた絵をスマホのカメラ機能で撮影してそれをアプリに取り込んでスマホで絵が描けます。
2回目にファビコンを新しくしたときは、アイビスペイントを使いました。
文字がうまく書けなかったので綺麗じゃないですが、手作り感は満載でした。
手作り感を出したいのであれば、アイビスペイントを使ってみるのも考えておきましょう。
自作方法④ フォトショップやイラストレーターを使って作成する
デザイン関係の仕事をしてたり写真が趣味なら、illustratorやPhotoshopなどのソフトも持っている人も多いでしょう。
その場合はイラストレーターやフォトショップで、ファビコンを作ることも可能です。
これらのソフトを使っているのであれば、ぜひ自作してみましょう。
予算の都合上持っていない人も多いでしょうから、持ってなければCanvaを使うのが最強だと思いますよ。
まとめ
ファビコン作るときに何の知識もないのであれば、Canvaを使うのがおすすめです。
無料で使えるので、ある程度のイメージが固まっているなら、操作に慣れればすぐに作れるでしょう。
アイキャッチ画像を作るのにも使えるから、とても使い勝手がいいですよ。
また、自分で作るのが苦手な人は、お金はかかりますがココナラで依頼するといいでしょう。
ココナラならたくさんイラストレーターさんが登録しているので、自分が好きな画風の人を選ぶことができますよ。
ココナラの会員登録のやり方が分からない人は、こちらの記事でココナラの会員登録の仕方を確認しましょう。
また、ブログではアイコンやヘッダーも設定しなければいけませんよね。
自分で作れるならそれが一番ですが、それが難しい場合には誰かに依頼しなければいけません。
こちらの記事で、SNSやブログなどのアイコンやヘッダーの制作を受け付けている絵師さん達を紹介しているので、アイコンやヘッダーについて悩んでいるならぜひ参考にしてみてくださいね。