ファビコンって何？
私にも作れるかしら？
ファビコン（サイトアイコン）を作りたいと思っても、私のように非デザイナーは「ファビコンを作るのは面倒くさい」と思っているのではないでしょうか。
この記事では非デザイナーさん向けにとにかく簡単に無料アイコンからPhotoshop Elementsを用いてファビコンを作る方法と表示法を解説します。
ファビコンとは？
ファビコンとはホームページのシンボルマーク
ファビコン（favicon）とは、「Favorite」と「icon」の造語です。
internetExplore5から追加された機能で、ブラウザのタブやアドレスバーに表示されます。また、お気に入りにも表示されます。
サイトアイコン、ファビコンのどっちと呼べばいいの？
ファビコンはサイトアイコンとも呼ばれています。WordPressではサイトアイコンと呼んでいます。
ファビコン、サイトアイコンのどちらでも同じモノをさしていますが、どちらで呼ぶか悩みますよね。
試しにGoogleで検索すると、｢ファビコン」の検索数は434,000件で、「サイトアイコン」の場合は265,000,000件でした。（R04.02.10現在）
サイトアイコンの方が検索数が圧倒的に多いので、ファビコンよりもサイトアイコンと言った方が相手に伝わりやすいかもしれません。
ファビコンを作ったほうがいい理由
サイトアイコンやファビコンがない場合はブラウザ共通のマークが表示されます。
ファビコンを作ったほうがいい理由は沢山のタブが開いている状態や沢山の「お気に入り」がある中で見つけやすいことです。
神社は似た名前の神社が多いので、沢山ある同系御祭神の神社さんの中で印象が残りやすいという利点があります。
ファビコンはシンプルに分かりやすく
ファビコンは会社やブランドロゴを使っているホームページが多く見られます。神社紋や神紋が会社やブランドロゴに当てはまるでしょう。
もしくは、ホームページ用に新たにデザインしてもいいと思います。その際にはいくつか気をつけることがあります。
ファビコンやサイトアイコンはアドレスバーの横などに表示されるため小さく表示されます。 そのため、画像はシンプルに分かりやすくすることを意識しましょう。
- 画像はシンプルにする
- ドット絵を意識するといいかも
- 色の数を少なくすること
また、グーグルのガイドラインによるとわいせつな表現やヘイト表現に関するシンボルや連想されるイメージは不適切なファビコンと判断されるため、検索結果に表示
ファビコンのサイズは.icoなら心配なし
「ぽてさら」はWordPressを利用していますので、サイトアイコン（ファイビコン）のサイズは512×512PXです。
ファビコンのサイズは表示したいブラウザやスマホ、場所によっていろいろあります。
- 16px * 16px
- 32px * 32px
- 48px * 48px
- 64px * 64px
- 180px * 180px
- 192px * 192px
- 512px * 512px など
いろいろあるのね～？
こんなに沢山つくるの大変だわ、どうしましょ！
すべてのサイズのファビコンを作る必要はありません。
ファイル形式を「favicon.ico」にすればブラウザが自動でサイズ調整をしてくれます。
また、グーグルのガイドラインによると検索結果に表示されるファビコンは48pxの倍数になっていることと書かれています。しかも赤字で「16×16ピクセルのファビコンは指定しないでください」と注意書きされています。
スマホやタブレット、ブラウザの種類などちょっと前に比べて種類が豊富になりました。それらに全部対応していたらキリがありません。
時々ファビコンのファイルを作り直していれば、時代の変化に対応したように書き出してくれるでしょう。
無料アイコンとPhotoshop Elementsで簡単作成
今回は32pxのファビコンを作ります。
32ピクセルで作るのは小さすぎないからです。あまり大きいサイズで作るとChromeなどのブラウザのタブで表示された時に、「イメージと違う！」と思わないようにするためです。
非デザイナーであれば無料イラストサイトから画像を利用したほうが、時短で確実です。案外みんなと一緒にはなりませんので、無料アイコンを利用してもかぶりません。
以下は、大まかな手順です。
- 画像を用意する
- 画像を加工編集する
- ファイルをfavicon.icoに変換する
- ファビコンをアップロードする
私の場合WordPressを利用しているので利用しているので、512ピクセルでサイトアイコンを作りました。WordPressなら画像ファイルから自動でファビコンにしてくれるので楽ですよ。
場所は「外観/カスタム/サイト基本情報」にサイトアイコンの項目がありますので、こちらにアップロードします。。
元になる画像を選ぶ
アイコン用画像が揃っているICOOON MONOから気に入った画像を選びます。
私の場合は、WordPress用のサイトアイコン（512ピクセル）を作ってから、画像を縮小して32PXにしています。
みなさんは、はじめから32ピクセルのPNGを選んでダウンロードしましょう。
もし、特に加工しない場合や希望の色がある場合は[color]の項目で好きな色にしてからダウンロードします。
| PNG | 背景など透明も保存できます。ロゴに向きます |
| JPG | 写真などの色が豊富でなめらかな色使いに向きます |
| SVG | ベクター形式で拡大縮小する画像に向きます |
フォトショップやイラストレータに使えるファイルがありますが、「Photoshop Elements」では開けないので、背景が透過されるPNGファイルをダウンロードします。
Photoshop Elementsで編集する
「Photoshop Elements」を立ち上げ、保存したフィアルを開きます。
Photoshop Elementsは2万円くらいで購入できる画像編集ソフトです。写真しか編集できないように思われている人が多いようですが、イラストや画像の編集もできます。
通常のPhotoshopに比べレイヤーやフィルタなどの機能は制限されていますが、プロではない限り十分な機能を備えています。Elementsについてはこちらのページを読んでみてくださいね。
モノクロアイコンの色を変える
ダウンロード時に色を変更しなかった場合は、以下の手順で好きな色に変えることができます。
- 画質調整タブからカラーの項目を選びます
- カラーの中から「色相・彩度」を選びます
- 色相・彩度のメニューボックスの右下「色彩の統一」にチェックを入れます
- スライダーを動かして好きな色に変えます
その後、好きなように画像を編集します。私は「ぽてさら」の「ぽ」の字を加えました。
背景を透明化にする
次は、背景を透明化させ、保存します。
透明の背景であればどこでアイコンが表示されてもアイコンだけが表示されます。別に気にしない場合はこの過程は飛ばしてください。
一気に画像を統合すると背景が白色に変換されますので、ダウンロードした画像と追加した画像だけを統合します。
統合したら、画像サイズを32ピクセルに縮小します。
次に、「Web用に保存」を選びます。ただの「保存」は作業中の保存でPSDファイルなので、「Web用に保存」で保存します。
ダウンロードした画像が背景ありだったり、統合したら背景が着いていた場合は、次の手順で背景を消す方法があります。
他のサイトやブログではファビコンの背景は透明にするとよい、とあります。
ダークモードでホームページを見る場合は白色が目立つので気になるかもしれませんが、私は背景は白でも、他の色でも良いと思います。
次のファイル変換する過程でギザギザぽい背景つく場合があります。私みたいな非デザイナーにはクリアな背景は難しいので背景もアイコンのうちと考えてアイコンを作ればいいんじゃないかな～と思っています。
「.ico」ファイルに変換する
次にファイルを変換します。「ファビコン作成 favicon.icoを作ろう！」でファイル変換します。
- 32×32用画像ファイルを選択して、先ほど作ったファイルを開きます
- favicon.ico 作成をクリックします
- 「ダウンロード」ボタンを押して画像をダウンロードします
どんな感じに出来たか確認することができます。
ファビコンの表示のさせ方
ファビコンが出来たら、今度は設置と設定です。
HTMLで自分でホームページを作成した人はファビコンの設置が必要になります。WordPressやペライチなどのWebサイトビルダーで作る人には関係ありません。
下記はファビコンをブラウザのタブに表示させる手順です。
- 画像をルートディレクトリにアップロードする
- 各HTMLページのヘッド（head）内にコードを書く
ルートディレクトリは「ドメイン直下」という意味で、index.htmlと同じ階層にあることをいいます。リダイレクトやドメインの正規化で使う.htaccessファイルも同じ階層にあります。
次に、ホームページ全てのページに下記のコードを書きます。
<link ref="icon" href="URL/favicon.ico">全てのページに<link>タグを書くのは、このページにはファビコンがあって、別のページにはファビコンがないという漏れを防ぐためです。
以上が、ファビコン（サイトアイコン）の作り方と表示方法でした。
HTMLだと面倒くさそうだね。
面倒くさいのは嫌だな。
もし、ファビコン作りは面倒くさいと思うなら、人任せでもいいと思いますよ。
時間が無い方には代行サービスがあります。ココナラのサービス提供者はアマからプロの方まで登録しています。500円から利用できます。ココナラ
を利用して、ファビコンを作ってもらう方法もあります。
それでも、面倒くさい方はペライチの有料プランを検討してもいいかもしれませんね。ペライチの有料プランはサーバー代やソフト代、決済など便利な機能が付いているので、なるべく簡単にしたい方に向いているサービスです。
ペライチの感想はこちら