はじめに
目次
ファビコンとは？
サイトのアイコンを「ファビコン」とも言って、このように今閲覧しているページ名の先頭に表示されます。
タブ以外で表示されるのは、お気に入り登録したサイトを一覧で見る場合です。googleのお気に入り登録の一覧ではファビコンが文字よりも大きく表示されるため、複数のサイトの中でアイコンを目印として探しやすくなります。サイトを印象付けることや、オリジナリティの向上というメリットがあります。
リスビボでもサイトを作りたての頃に、Illustratorでイラストを描いて、png形式で書き出し、WordPressでサイトのアイコンに登録しました。そのときの流れを記しておきます。
ファビコンのモチーフを決める
適しているもの
Illustratorでイラストを描きますが、何をモチーフにするかはかなり重要です。サイトの”顔”として印象に残りやすいものや、自分の愛着がわくようなものを選ぶとよいのではないかと考えました。
タブの先頭に表示されるときはかなり小さいので、文字を複数並べたものや複雑なイラストは適していなさそうです。
無難だと思ったのは以下の通りです。
- サイトの頭文字
- ロゴ
- キャラクターや似顔絵アイコン
Googleだと「G」、Appleだとりんごマークになっていますね。トップページで使っているロゴやその一部を使うとサイト全体に統一感が生まれます。特にロゴなどを持っていなければ、自分のサイトと関連の高いものや好きなもののフリーイラストを使うのも良いでしょう。
当サイトでは管理人リスメガネの顔が相応しいと考え、オレンジの丸で背景をつけたものをファビコンに登録することにしました。
イラストを作成し書き出す
イラストを描く
Illustratorでリスの写真を見ながら、このようなイラストを描きました。右のオレンジの丸で囲んであるものがファビコン設定用のイラストです。
書き出す
このイラストを「アセットの書き出し」を使ってpng形式の画像に書き出しました。
①アセットの書き出しウィンドウにドラッグ&ドロップして、オブジェクトを追加（「アセットの書き出し」が画面にない場合は、メニューバーのウィンドウ＞アセットの書き出し でウィンドウを出します。）
②追加したオブジェクトを選択。枠が青くなります。
③画像の倍率または解像度、画像の形式を設定。512×512ピクセル以上になるように設定します。
④一番下の「書き出し」を押します。画像の保存先を聞かれるので、フォルダを選んで保存します。
保存された画像です。大きさの欄に767×767ピクセルとあるので、基準はクリアしていますね。
WordPressで画像をファビコンに設定する
画像が用意できたので、WordPressでファビコンに設定します。WordPressの管理画面のメニューから 外観＞カスタマイズ を選びます。
サイト基本情報をクリックします。
筆者はすでに設定済みなので画像は文言が異なり「サイトアイコンを選択」というボタンが出ているはずなので、そちらをクリック。（オレンジの四角のあたりに出てきていたと思います。）
「ファイルをアップロード」を押して、先ほど保存した画像を選択してアップロードします。
タブの先頭にきちんと表示されました。これで設定が完了です。
ちなみに、自分のサイトを開いた際にツールバーが出る設定にしている場合は、ツールバーの「カスタマイズ」からファビコンの設定画面に行くことも可能です。
おわりに
筆者はサイトを少しでも印象付けたいという思いと、キャラクターを設定することで自分のサイトに愛着を持てそうだと感じ、メガネをかけたリスをマスコットキャラクターに設定しています。（「リスメガネ」は、目が悪い・北海道在住だからです。）
イラストが描けなくても、Illustratorを使ってフリー素材を組み合わせたり、好きなフォントと色を選んでロゴっぽいものを作ってみたりしても楽しそうです。ぜひファビコンを設定して、自分らしさをプラスしてみてはいかがでしょう。
コメント