ファビコンって聞いたことありますか？響きはファミコンみたいですけど違います。答えはタブなどに表示されるアイコンのこと。このファビコンの作成方法や設定方法をわかりやすく解説していきます。
※今回はWordPressでの設定方法を解説します。HTMLの記述やFTPソフトの使用はありませんのでご了承ください。
ファビコンとは？役割は？
ファビコンとは、PCのウィンドウで表示されるタブの横や、検索エンジンで検索時にタイトル横に表示されるアイコンのことです。
こんなやつですね。画像はPCで何かを検索している時のウィンドウ上部に表示される四角い画像。これをファビコンと言います。「アイコンでよくね？」と思うかもしれません、わたしもそう思います（笑）。favorite icon（フェイバリット アイコン、お気に入りの画像）が合わさってファビコンとなったそうです。
ファビコンの役割は、サイトの顔となるアイコンを設定しておくことで親しみがもたれたり、ユーザーがなんのサイトを開いているかがすぐわかるようになる便利さもあります。特に気にしてはいなかったですが、確かにないと不便だなーとなるし、ファビコンを設置していないサイトを見ると「あれ、あんましサイトにこだわりがないのかな…」と思ってしまいます。
ファビコンがあっても特にSEO対策になるとかはないですが、ないと不自然になるくらい、ファビコンの存在はWebサイトにとって欠かせないものとなっています。
ファビコン作成のコツ
ファビコンの意味や役割がわかったところで早速作っていきましょう。ファビコンを作成する時に気をつけたいことは以下の通り。
- シンプルなデザインにする
- サイトイメージと合わせる
- ファビコンのサイズは複数用意した方がいい（推奨）
ファビコンのデザイン
ファビコンのデザインはできるだけシンプルなものにしましょう。YahooやGoogleなどもそうですが、企業のファビコンは結構シンプルなものが多く、ひと目でなんのサイトかがわかるデザインです。コッテコテにすると何が表示されているかわからなくなるので注意。
また、自分のサイトイメージと合わせるようにします。使う色もなるべくサイトカラーに合わせる方が良いですし、文字をどでかく一つ表示するにしても形や見え方を工夫する必要があります。
ファビコンの画像サイズ
ファビコンの画像データは、企業のホームページでないなら一つあれば良いかなーという感じです。ただ、ファビコンの画像が使われるパターンを考えるといくつか用意していても良いかもしれないです。以下、ファビコンが使われるパターンを紹介します。
- PCでウィンドウを開いた時のタブ表示
- ブックマークの表示
- タブレットでの表示
- スマホでの表示
- スマホでのショートカットアイコン表示
使用する環境によってファビコンのサイズが異なり、それぞれ合わせて画像を用意すると鮮明な表示になるので違和感がなくなります。また、使用する環境とサイズの組み合わせによって正しく表示されないこともあるみたいなので、そういった理由でも複数のサイズを用意しておいた方がいいですね。
- 16×16（インターネットエクスプローラー（IE））
- 32×32（その他ブラウザ）
- 64×64（Windowsデスクトップ）
- 180×180（iPhone・iPad）
- 256×256（Android）
サイズと閲覧環境の組み合わせはこの通り。全部用意していたらきりがないので16×16と32×32の２つを用意しておいたらOKです。画像ファイルの用意については後述します。
ファビコン作成の手順
ここまででファビコンのデザインやサイズはわかったと思うのであとは作成するだけです。大まかな手順は以下の通り。
- ファビコンにする画像を作成する
- 複数のサイズに対応できる画像ファイルに変換する（マルチアイコン）
ファビコンなんて画像用意して設定すればよくね？と思うかもしれませんが、一応専用の画像ファイルにしたほうがきれいに表示されるだったり表示エラーがなくて済むのでちゃんとしたものを用意したほうが良いですね。ここでいうちゃんとしたものとは画像データの拡張子が.icoであること。
.icoの拡張子にすると、環境に応じて設定した画像サイズで表示してくれるという利点があります。拡張子がわからないという方は画像の拡張子についてを参考にしてください。
では、前置きが長くなりましたが作っていきます。
ファビコン画像の作成ツール
こちらのツールはファビコン画像をドット絵で作るツールで無料。試しに作ってみましたがすごいセンスが問われるツールです。シンプル・わかりやすい・サイトイメージとマッチしているのを満たすファビコンとなると結構難しい。ただ、こちらのツールは一度作ってしまえば拡張子.icoになるのでそのまま使用できるのがいいところです。
無料のファビコン素材もあります。free faviconというサイトです。シンプルで使い勝手が良さそうな無料のファビコン画像がたくさんあるので、一旦こちらを使用するのもいいでしょう。
他のツールはPhotoshopなどで一から作るものしかないので、こだわりたい方は自分で作ったり、ココナラなどで依頼するのもありです。
拡張子.icoへの変換ツール
ファビコン用の画像準備ができたら、拡張子を.icoに変換する作業です。.icoに変換するツールは以下を参考ください。
※WordPressを使用している場合は、画像の拡張子が.pngならここで画像準備の作業は完了です。WordPressでのファビコン設定方法は後述します。
faviconジェネレーター
jpeg・png・gifの拡張子をicoに変換するツールです。必要な画像サイズを選択して変換するツールで無料。わたしが試しにやってみたところ、結構変換に時間がかかったので、通信環境がいい場所・時間にやってみると良いです。
ファビコン favicon.icoを作ろう！
こちらのツールは半透過に対応した変換ツール。半透過にしないと外枠が白く残って少し残念なファビコンになってしまうので、真四角でない画像ならこちらを使った方がいいかもしれません。
ファビコンの設定方法【WordPress】
WordPressならファビコンの設定方法は非常に簡単です。ダッシュボード→外観→カスタマイズ→サイト基本情報と進んでください。
このような画面が出てくるので画像をアップロードしたら終わりです。すごく簡単。推奨画像サイズは512×512とありますが、わたしは16×16でアップロードしても問題ありませんでした（もしかしたら大きく表示される場合画像が荒くなる可能性はありますが）。
まとめ
ファビコンは個人ブログなどなら別に設定しなくても支障はないですが、あった方がサイトのオリジナリティが出て愛着が湧きます。
特に始めたての頃は自分のお城を作っていくような感覚なので、シンボルのような役割のファビコンを設定するとモチベーションも少し上がります。ぜひブログなどを始めたてならばファビコン設定をしてみてください！
