ファビコンって何？どうやって作ればいいのかしら？？
ファビコンとは？
ファビコンはサイトアイコンともいいます。
ファビコン（favicon）とは、Favorite＋ iconという意味で、internetExplore5から追加された機能です。Googleなどのブラウザを開いた際にブラウザのタブやアドレスバーの横に表示されます。また、使用ブラウザの「お気に入り」にも表示されます。
yamatokobachi.comのファビコンは以下の画像です。WordPressを利用していますので、512×512PXです。
ファビコンのサイズ
ファビコンのサイズはいろいろあります。
| インターネットエクスプローラ | 16×16px |
| クロームやエッジなどその他のブラウザ | 32×32px |
| Windowのサイトアイコン | 48×48px |
| スマホのクローム | 152×152px |
| WordPress | 512×512px |
「すべてのサイズのファビコンを作らないといけないの？」って思いますよね。
初心者の方は32pxで作ればよいです。あとは勝手にブラウザが直してくれます。ただ「favicon.ico」で作ります。WordPressで作るのならば512pxを作ればいいですよ。
サイトアイコン、ファビコンのどっちと呼べばいいの？って思いますが、ホームページアイコンという言い方もあるようです。｢ファビコン」の検索数は402,000件で、「サイトアイコン」の場合は208,000,000件でした。「サイトアイコン」と言った方が伝わりやすいかもしれません。
どんなファビコンがいいの？
ファビコンは会社のロゴを併用しているサイトが多いように思います。神社サイトの場合は神社紋や神紋になるのでしょうか。
私が奉職している神社は特に神社紋や神紋はありません。所属している教派の紋ならありますが、恐れ多くて使えません。それでサイトカラーと神社名にしていますよ。小さくて分かりずらいですよね。
ファビコンを作る理由
無くても困らないアイコンですが、せっかくなら余所の神社さんと違いを出すために作ってはいかがでしょうか？そうすれば、「同じ名前だからあそこの神社さんと同じなんでしょう？」という誤解をされなくてすみますよ。
また、使用ブラウザの「お気に入り」の沢山ある中で見つけて貰いやすくなります。神社名は割と似た名前が多いので、相手に印象が残りやすいという利点があります。
ファビコンは小さな画像ですので、細部までこだわることはありません。漢字一文字だって十分役を果たせますので、ご検討ください。
ファビコン（サイトアイコン）の作り方
ファビコンを作る方法には3つあります。ホームページがワードプレスで作るのかｈｔｍｌで作るのかによって変わります。どれも簡単です。
- ワードプレス（Wordpress）のサイトアイコンの作り方
- ファビコン作成サイトで作る方法
- 既存の画像でファビコンを作る方法
ファビコンを作るときに注意すること
「小さく表示される」 このことを念頭に置いて画像を作成してください。リスト化しましたので、作るときに参考にしてくださいね。
- 画像はシンプルに
- 色使いはシンプルに
- 目を引きやすい色味にする
- ホームページの雰囲気とマッチすること
私は「Adobe Photoshop Elements2019」で作成しました。お持ちのパソコンに入っているペイントでも作れます。使いやすい画像編集ソフトを利用ください。
ファビコン作成サイトでつくる方法
favicon.cc
favicom.cc
英語サイトですが、会員登録しなくてもいいのがお勧めです。私の世代に流行ったドット絵感覚でファビコンを作成します。
1．マス目状になっているところに右のカラーピッカーから色を選んで塗っていきます。
2．消したいときは、右の消しゴムをクリックしてから、消したいマスをクリックします
3．イメージは下の所にでてきます。
4．画像が完成したらダウンロードすれば完了です。
はじめからやり直したいときは「Create New Favioc(新しいファビコンを作成)」をクリックしてください。ちゃんとファイルも.iconになっています。
他にも無料でファビコンを作れるサイトがありますので、自分のやりやすいサービスを利用してくださいね。（それにしてもすごいテキトーなファビコンですよね）
既存の画像をファビコンにする方法
ｈｔｍｌだけでホームページを作る人はこの方法になります。神社紋や神紋の画像がある場合、画像編集ソフトを利用した場合この方法でファビコンを作ります。これもかんたんです。変換の無料サイトを利用すればいいので、サイトを紹介します。
favikon
favikon
1.「Upload image」をクリックして変換したい画像を選びます。
2．良ければ「Download iCO」「Download PNG」をクリックします。
これだけです。簡単ですよね。日本語サイトが良い方はこちらのファビコンfavicon.icoを作ろう！がお勧めです。
参考にしたサイト
ファビコンとは？・・・・外部サイトになります。
ファビコンの作り方・・・・外部サイトになります。
画像作りにいかがでしょうか
ホームページビルダー
私がホームページ作りで使用しているソフトのホームページビルダーです。ワードプレスにも対応しています。感覚的にさくさく作れますし、もっとこだわりたい人にも対応した優れものです。
ジャストシステム ホームページ・ビルダー22 ビジネスプレミアム 通常版
フォトショップ エレメンツ
私のは2019年度盤です。発売した年によってデザインが違いますが、中身はほぼ同じです。ちゃんとしたフォトショップ（photoshop）の方がもっと色々できますが、これだけでも十分な機能を備えています。
Adobe Photoshop Elements 2020(最新)|通常版|パッケージ版|Windows/Mac対応
ココナラ
時間が無い方には代行サービスがあります。ココナラのサービス提供者はアマからプロの方まで登録しています。そのため、500円から利用できますので気軽に利用できますよ。
ココナラ
