スポンサーリンク

Photoshop Elementsでファビコンを作ろう!簡単ファビコンの作り方

フォトショップでファビコンを作ろうHP制作

ファビコンって何?

私にも作れるかしら?

今回はファビコン(サイトアイコン)の作り方を解説します。ファビコンについて知りたい人、ファイビコンを作りたい人向けに、初心者目線で解説していこうと思っています。

ファビコンの作るメーカーやソフトはいろいろあります。今回は、Photoshop Elementsを使って説明します。

Photoshop Elementsは2万円以下で購入できる画像編集ソフトです。写真しか編集できないように思われている人が多いようですが、イラストや画像の編集もできます。通常のPhotoshopに比べレイヤーやフィルタなどの機能は制限されていますが、プロではない限り十分な機能を備えています。

目次にはリンクが張ってありますので、気になるところに飛ぶことができます

スポンサーリンク

ファビコンとは?

癒やし画像:うさぎ

ファビコンとはホームページのシンボルマーク

ファビコン(favicon)とは、「Favorite」と「icon」の造語です。internetExplore5から追加された機能で、ブラウザのタブやアドレスバーに表示されます。また、お気に入りにも表示されます。

サイトアイコン、ファビコンのどっちと呼べばいいの?って思いますが、ホームページアイコンという言い方もあるようです。「ファビコン」の検索数は402,000件で、「サイトアイコン」の場合は208,000,000件でした。WordPressはサイトアイコンと読んでいますので、サイトアイコンと言った方が伝わりやすいかもしれません。

ファビコンが表示される場所、アドレスバー、タブ

yamatokobachi.comのファビコンは以下の画像です。WordPressを利用していますので、512×512PXです。

yamatokobachiのアイコン

ファビコンのサイズはいろいろあります。

インターネットエクスプローラ16×16px
クロームやエッジなどその他のブラウザ32×32px
Windowのサイトアイコン48×48px
スマホのクローム152×152px
WordPress512×512px

すべてのサイズのファビコンを作る必要はありません。ファイル名を「favicon.ico」にすればブラウザが適切にサイズ調整をしてくれます。

どんなファビコンがいいの?

ファビコンは会社のロゴを併用しているホームページが多いです。

神社のホームページの場合は神社紋や神紋がいいでしょう。または、ホームページ用に新たにデザインしてもいいと思います。

ファビコンを作ったほうがいい理由

ファビコンがない場合はブラウザ共通のマークが表示されます。そのため、別に無しでも構いません。

ファビコンを作ったほうがいい理由は沢山のタブが開いている状態、沢山の「お気に入り」がある中で見つけやすいことです。

神社は似た名前の神社が多いので、沢山ある同系御祭神の神社さんの中で印象が残りやすいという利点があります。

ファビコンを作るときに注意すること

ファビコンはアドレスバーの横などに表示されるため小さく表示されます。 そのため、画像はシンプルに分かりやすくすることを意識してくださいね。

  • 画像はシンプルに
  • ドット絵を意識するといいかも
  • 色の数を少なくする

ファビコンの作り方

今回は32pxのファビコンを作ります。1から自分でデザインするのが一番良いと思いますが、無料イラストサイトから画像を利用して作っていこうと思います。

元になる画像を選ぶ

アイコン用画像が揃っているICOOON MONOから気に入った画像を選びます。

32pXの黒、PNGを選んでダウンロードします。

PNG背景など透明も保存できます。ロゴに向きます
JPG写真などの色が豊富でなめらかな色使いに向きます
SVGベクター形式で拡大縮小する画像に向きます

フォトショップやイラストレータに使えるファイルがありますが、「Photoshop Elements」では使えなかったので、PNGかJPGをダウンロードします。

Photoshop Elementsで編集します

「Photoshop Elements」を立ち上げ、保存したフィアルを開きます。

モノクロアイコンの色を変える

アイコンが黒色なので、好きな色にかえます。

  • 画像の上に新規レイヤーを重ねます
  • 新規レイヤーに好きな色を塗ります。
  • レイヤーの重ねを「比較(明)」「カラー比較(明)」にします。

ダウンロードした黒色でよければPNGで開きます。そうすれば後で背景を消す手間が省けます。

背景を透明にする

次は、背景を透明化させます。その後、保存します。

  • バラバラになったレイヤーを一枚に統合します
  • 統合した画像「背景」をレイヤーにします
  • 右の統合した画像のアイコンをwクリックします
  • マジック消しゴムツールを選びます
  • 中央の画像の白い部分をクリックします
  • 白い部分が削除されます

葉っぱだけでは物足りなかったので、文字を追加しました。

次に、「Web用に保存」を選んで保存します。ただの「保存」は作業中の保存ですので、「Web用に保存」で保存します。

「.ico」ファイルに変換します

次にファイルを変換します。「ファビコン作成 favicon.icoを作ろう!」でファイル変換します。

  1. 32×32用画像ファイルを選択して、先ほど作ったファイルを開きます
  2. favicon.ico 作成をクリックします
  3. 「ダウンロード」ボタンを押して画像をダウンロードします

どんな感じに出来たか確認することができます。

まぁまぁですかね?白色が若干残っているのが気になります。イマイチなのは画像が細かったからだと思います。

白は必ずしも透明にしなくてはならないことはありません。ダークモードでホームページを見る場合は気になるかもしれません。背景は白以外でもいいと思うのでお好みでデザインしてくださいね。

もし、ファビコン作りは面倒くさいと思うなら、人任せでもいいと思いますよ。

時間が無い方には代行サービスがあります。ココナラのサービス提供者はアマからプロの方まで登録しています。500円から利用できます。ココナラを利用して、ファビコンを作ってもらう方法もあります。

タイトルとURLをコピーしました