デザイン
faviconのデザイン・基本設定と便利なツール【無料】
2018年11月09日 12:00
こんにちは！社員Aです👩
今回は、WEB制作のときに欠かせない、意外と忘れがちなfaviconの設定方法から便利なツールまでご紹介したいと思います。
もくじ
favicon（ファビコン）とは？
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称のことです。
Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されています。
ファビコンを設置することで複数のタブを開いているときや、お気に入り登録したときもサイトを識別してもらいやすいというメリットがあります。
簡単に作成でき、適切な拡張子に変換できる便利なツールもありますので、初心者でもすぐにつくれるのが特徴的です。
favicon（ファビコン）の基礎知識
ここからは、favicon（ファビコン）の基礎知識をご紹介します。
favicon（ファビコン）の色やデザインについて
多くのタブを開いているとき、目立つファビコンと目立たないファビコンがあります。他サイトと並んだときにどのような表示になるのかも意識しながら作ることが重要です。
特にどの色を使うかが重要になってきますが、大抵のサイトはロゴやコーポレートカラーを活かして作っている場合が多いです。
だからといって、複雑なものやカラフルなものは逆に見にくさを助長してしまうため、極力ひと目で認識できるようなデザインが理想です。
私はファビコンのデザインに迷ったときは大手を含め様々なサイトでどのようなファビコンが使われているか探したりして、参考にしています。
また、後ほど紹介するファビコンのデザインだけを集めている便利なサイトもありますので、そういったサイトを見ながら、参考にしたりしています。
favicon（ファビコン）のサイズについて
faviconはブラウザやデバイスによって、ある程度サイズが決まっています。
すべてを準備するのは大変ですので、主要のサイズだけ準備しています。
書き出すのが面倒なような気がしますが、後ほど紹介する便利なツールで各種サイズを作成できますのでご安心ください！
- 16px × 16px：IE タブ
- 24px × 24px：IE9 ピン留め機能
- 32px × 32px：Chrome・Firefox・Safari などのタブ
- 48px × 48px：WindowsのWeb ページアイコン
- 64px × 64px：高解像度 WindowsWeb ページアイコン
ファビコンのフォーマット
ファビコンには、「.ico」というフォーマットを使用します。
最初はあらかじめgifかpngで作成しておけば、後ほど紹介するツールを使って「.ico」の拡張子に変換できます。
favicon（ファビコン）の作成方法
ここからは、実際にfavicon（ファビコン）の作成方法をご紹介します。
Photoshop・Illustratorなどの画像編集ツールでFaviconを作成
まずは、Photoshop・Illustratorなどの画像編集ツールでFaviconを作成をします。
正方形サイズで作成をすれば良いので、上記ソフトを持っていなくても画像編集できるものであればなんのソフトでも大丈夫です。
先ほど紹介したとおり、大抵のサイトはロゴやコーポレートカラーを活かして作っている場合が多いです。
だからといって、複雑なものやカラフルなものは逆に見にくさを助長してしまうため、極力ひと目で認識できるようなデザインが理想です。
ファビコンのデザインに迷ったときは、下記のファビコンギャラリーでインスピレーションを広げてみるのもおすすめです！
pngもしくはgifでファビコン画像を保存し、ツールで変換
ファビコンデザインが完成したら、pngもしくはgifの拡張子で書き出します。
下記のツールを使うと、自動的に「.ico」の拡張子へ変換してくれます。
▼favicon.ico作成ツール
ファビコンをサイトに掲載する
ファビコンを無事「.ico」の拡張子で作成できたら、続けてサイトに反映させましょう。
<head></head>内に下記を記述します。
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
パスはファビコンをアップロードした場所に合わせて書き直すことで反映されますが、アップロード先はルート直下（トップページが置かれている場所）に設置するのがおすすめです。
favicon（ファビコン）作成に便利なサイトのご紹介
ここからは、ファビコンを作成するときに便利なサイトやツールをご紹介します。
下記でご紹介するツールを併用することにより、時短にもなりますし簡単にファビコンを作成することができます。
ファビコンギャラリー
様々なサイトのファビコンを集めたサイトです。
ファビコンのデザインに迷ったときにも、たくさんのファビコンがストックしてあるので、見やすいですね！
favicon.ico
pngやgifで作成したファビコン画像を、自動的に「.ico」の拡張子に変換してくれるサービスです。
16・32・48pxの各サイズが作成できるのも便利です。
ICONSFLOW
ICONSFLOWは、PhotoshopやIllustratorなどの画像編集ツールを使わずにオンライン上で簡単にファビコンが作れるツールです。
スキルなしで高品質のファビコンが作れ、SVG、ICO＆PNGエクスポートなど拡張子が豊富なのも魅力の一つです。
色、グラデーション、サイズ、位置、エフェクトの変更などもまるごとできます。
favicon.cc
ファビコンをドットで1からこだわって作成したいという方におすすめなのが、こちらの「favicon.cc」です。
カラーパレットから好みの色を選び、ドットを塗りつぶしながらファビコンを作成することができます。
websiteplanet
オリジナルの画像をアップロードするか、無料ギャラリーからファビコンを選択することで簡単にファビコンを作成できるオンラインツールです。
日本語対応で、ツール画面が見やすくスッキリとしているのも特徴です。
favikon
こちらのサイトでは、画像をアップロードしてファビコンを作れます。画像をアップロードしたあとに必要箇所だけトリミングして使えるのも魅力の一つです。
ロゴの一部をファビコンにしたいけど、画像編集ツールを開くのは面倒という方におすすめのオンラインツールだと思います！
まとめ
ファビコンはWEB制作でも重要な設定のうちの一つですが、意外と後回しにしがちです。
納品前にあわてて作成する・・・ということがないようにデザイン段階から意識しておきたい項目でもあります。
デザインに迷ったときでも前述のツールを併用することにより、簡単で高クオリティなファビコンが作れるかと思います！
私は特に同業種の制作が重なったときにファビコン作成に悩んでしまうので、そんなときにも上記ツールを使っています。
備忘録としても書きましたが、どなたかのお役に立てたら嬉しいです！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
