ファビコンを自作して設置した!自作しない場合のやり方も紹介

ブログ

ずーっとファビコンを設置せずに来ましたが、ついに設置することに。

分かりやすいのがいいと言われていますが、どう作ればいいのかよくわ駆らなかったのが現状です。

ファビコンを作れるサイトはたくさんありますが、その画像を用意できていません。
そのため今まで設置しませんでしたが、ようやく設置することに成功です。

何をやったかというと、凝ったデザインとか自分でできる分けねーんだから、ブログタイトルの最初の二文字でいいじゃん、という結論に。

そのあとはどうすればいいのか考えましたが、ペイントで文字書いてそれを使おうと。

でも最終的にはcanvaを使って作成したのを使っています。

ファビコンって何?

ブラウザで開いたときに、そのタブの左側にあるあの画像です。

この画像を使っているのが、このサイトだぜっているのを主張します。

このブログならPCでみればこんな感じになっているはずです。

スマホで検索するときはそれぞれのURLの隣に表示されるので、自分のサイトだって分かりやすいものにしましょう。

たくさんタブを開いていると、どのサイトを開いていたかわからなくなることがあります。

その際にファビコンでサイトを差別化しておくことで、見分けやすくなる。

ファビコンを自作するときの注意点

ファビコンを自作する際には、押さえておきたいポイントがあります。

  • 分かりやすいデザイン
  • サイズ
  • フォーマット

この三つに注意しておきましょう。

分かりやすいデザイン

ファビコンは、小さな画像であるので小さく表示されます。

複雑なデザインでは、細部を見ることができません。

またデザインが複雑だと分かりづらいというもあり、シンプルなデザインが良いです。

自分のサイトのイメージを簡潔に表したデザイン、サイトタイトルの最初の1~3文字目までを入れるなど、誰が見てもすぐにわかるようにすることが重要です。

シンプルかつ目を引く色使いにしておくと、より目立たせることができます。

サイズ

ファビコンには様々なサイズがありますが、

  • 16×16px:IEタブ
  • 24×24px:IE9のピン留め
  • 32×32px:Chrome、Firefoxなどのタブ

その他にもあるのですが、だいたいこんな感じです。

ブラウザによってはうまく縮小できないことがあるみたいで、16×16pxと32×32px二つは最低限用意しておきましょう。

しかし、ワードプレスに使用できるファビコンのサイズは、512×512ピクセル以上の正方形になります。

ワードプレスで利用しようとしている場合は、サイズを間違え名ようにしましょう。

フォーマット

ファビコンを表示させるには

  • .png
  • .gif
  • .ico

が利用できます。

ブラウザが古い場合には、表示されない形式があるみたいで、.icoを使うのが無難みたいです。

また、ワードプレスはPNGでも問題なさそうです。

僕はwordpressのファビコンはPNGでアップしてます。

ファビコンの自作方法

いくつかの方法があるのですが、現在のファビコンはcanvaで作っています。

代表的な方法は、

  • Canva
  • ペイント
  • スマホアプリ
  • フォトショップやイラストレーター

を使うことです。

色々な方法で作っては変えてをちょっとしてきましたが、無料で作るならcanvaはトップクラスに楽でした。

というのもこのブログのファビコンは文字でよかったからですが(笑)

Canva←☆すごくおすすめ

Canvaで作ったのがこちら。

はっきり言ってファビコン作るときにCanvaを知っておきたかった。

Canvaは無料で利用できるデザイン作成ツールです。

なので、ファビコン用にカスタムサイズで作成することができる。
といっても、僕はwordpress用に作ったので通常の16×16や32×32の場合はどうなるかは分かりません。

また、アイキャッチ画像やSNS、チラシやフライヤーなど様々なデザインを作成することができる。

ファビコン用じゃなくても、ブログやSNSをやってる人はチェック必須のツールです。

イラストレーターやフォトショップを持っていない人は、Canvaを使うことも考えておきましょう。

ペイントで描いてfavicon generatorを使う

最初にファビコンを作るのに使ったのは、 favicon generatorというサイトです。
画像ファイルを指定するだけで、簡単にファビコンを作ってくれます。

推奨するサイズが512×512~700×700ピクセルであるので、ペイントで元画像を作成するときは700×700で作りました。

そしてfavicon generatorを使って作ったものがこちらになります。

ブログタイトルの最初の二文字

  • 分かりやすい
  • 何も考えなくても作れる

ある意味本当に何も考えてませんでした。

ペイントを使って絵を描くとなると、マウス操作がすごくむずかしいです。
もっときれいに描いた絵を使いたいという場合には、スマホを利用するのも選択肢の一つ。

スマホアプリ

ibis Paint というスマホアプリがあり、紙に描いた絵をスマホのカメラ機能で撮影して、それをアプリに取り込んでスマホで絵が描けます。

2回目にファビコンを新しくしたときはこれを使いました。

その時にできたのがこれ。

まあよくできてなかったけど、手作り感は満載でした。

フォトショップやイラストレーターを使う

デザイン関係の仕事をしてたり写真が趣味なら、illustratorやPhotoshopなどのソフトも持っている人は多いでしょう。

その場合はイラストレーターやフォトショップで、ファビコンを作ることも可能です。

持ってる人はということなので、持ってなければCanvaを使うのが最強だと思います。

ファビコン自作以外の方法はどうすればいいの?

ファビコンを設置したいけど、自作するのが苦手という人もいますよね。

そんな時は、

  • ココナラで依頼する
  • 無料素材を探す

方法があります。

ココナラで依頼する←☆おすすめ

自分でファビコンを作るとなると、理想的なものを作るのは難しいです。
そのためちゃんとしたものを設置したいなら、イラストレーターに依頼しましょう。

費用は掛かりますが、しっかりとしたものを作ってくれるので個性を出したい時などに有効です。

そんな時に、ココナラというサイトを使うのがおすすめです。

イラスト以外にも様々なジャンルのスキルを売り買いしているところなので、色々と活用することができます。

費用を掛けたくないなら無料素材を探してみる

お金がないなら、無料素材を探すようにしましょう。

無料素材なら費用も掛からずに使えるので、ファビコンにかける予算がないという場合にお勧めです。

しかし無料素材なので他の人も使っている可能性もあり、オリジナリティは出ません。

他のサイトとしっかりと区別してもらうには、やっぱりプロにオリジナルのものを作ってもらうのがいいでしょう。

それぞれの方法の比較

これはあくまで僕の主観になりますが、それぞれの方法の特徴は下記の表になります。

自作無料素材プロに依頼
オリジナリティ自分で作るので高い低い高い
値段使うソフト次第?安い高い
デザイン自分のスキル次第素材による自分のイメージをちゃんと
伝えられるか
掛かる時間自分が納得すれば早いすぐに見つかればいい
が見つからなけば長い
納品されるまで時間が
掛かることがある

総合的にしっかりとしたものを作りたいのなら、プロに任せるのが一番です。
その代わり費用がかかるので、費用をかけずに無難に行きたいなら無料素材を探してみましょう。

完全なオリジナルを作りたいなら、やはり自作するのが一番です。
その際には自分の作画スキルなどによって、完成の出来は大きく変わってきます。

納得できるまで作り込むのか、ある程度で妥協するのか悩むところです。
時間が経ってから変えようと考えている場合は、デザインがあまり変わらないようにしましょう。

ファビコン自作まとめ

ファビコン作るときに何の知識もないのであれば、Canvaを使うのがおすすめです。

無料で使えるので、ある程度のイメージが固まっているなら、操作に慣れればすぐに作れるでしょう。

アイキャッチ画像を作るのにも使えるから、とても使い勝手がいいですよ。

また自分で作るのが苦手な人は、お金はかかりますがココナラで依頼するといいでしょう。

コメント

タイトルとURLをコピーしました