Photoshop Elementsで無料アイコンからファビコンを作る方法

フォトショップエレメントで作るファビコン画像

ファビコンって何?

私にも作れるかしら?

今回はサイトアイコンまとたはファビコンの作り方をPhotoshop Elementsを用いて解説します。

ファイビコンを作りたい人Photoshop Elementsの使い方を知りたい人に役立つようにまとめました。もしお役に立てられたら光栄です。

Photoshop Elementsは2万円以下で購入できる画像編集ソフトです。写真しか編集できないように思われている人が多いようですが、イラストや画像の編集もできます。

通常のPhotoshopに比べレイヤーやフィルタなどの機能は制限されていますが、プロではない限り十分な機能を備えています。

 

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

ファビコンとは?

癒やし画像:うさぎ

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

ファビコン(favicon)とは、「Favorite」と「icon」の造語です。

ファビコンはブラウザのタブに表示される
ふぁびこんは赤枠のところに表示されるよ

internetExplore5から追加された機能で、ブラウザのタブやアドレスバーに表示されます。また、お気に入りにも表示されます。

ファビコンはお気に入りでも表示される
ふぁびこんはお気に入りに表示される(ブラウザはEdge)

サイトアイコン、ファビコンのどっちと呼べばいいの?

試しに検索サイトで引いてみると、「ファビコン」の検索数は402,000件で、「サイトアイコン」の場合は208,000,000件でした。

ちなみに、WordPressはサイトアイコンと読んでいます。

なので、ファビコンよりもサイトアイコンと言った方が相手に伝わりやすいかもしれません。

どんなサイトアイコンがいいの?

サイトアイコンは会社のロゴを併用しているホームページが多いようです。

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

サイトアイコンを作ったほうがいい理由

サイトアイコンやファビコンがない場合はブラウザ共通のマークが表示されます。

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

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

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

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

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

ファビコンのサイズについて

「ぽてさら」はWordPressを利用していますので、ファイビコンのサイズは512×512PXです。

みかんの輪切りアイコンにぽてさらのぽを足したアイコン画像
みかんにぽてさらの「ぽ」のファビコン

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

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

いろいろあるのね~?

こんなに沢山つくるの大変だわ、どうしましょ!

すべてのサイズのファビコンを作る必要はありません。

ファイル名を「favicon.ico」にすればブラウザが自動でサイズ調整をしてくれます。

また、WordPressの場合は画像を用意するだけで大丈夫です。

ファビコンの作り方

今回は32pxのファビコンを作ります。

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

作る流れは、まずWordPress用にサイトアイコンを作りました。これは私がWordPressをつかっているからです。

そのあとに、ファイルを縮小して32PXにし、画像ファイルからファビコンファイルに変換しました。

もし、あなたがWordPressを使用しているのなら、512pxの画像サイズを作るだけで済みます。

その後、画像ファイルをアップロードすれば自動でサイトアイコンになります。

場所は「外観/カスタム/サイト基本情報」にサイトアイコンの項目がありますので、こちらにアップロードします。。

元になる画像を選ぶ

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

フリーアイコンサイトからミカンのアイコンをダウンロードします
みきみかんのみかんを選んだよ。好きなアイコンを選びましょう

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

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

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

背景が透過されるPNGファイルをダウンロードします。

Photoshop Elementsで編集します

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

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

アイコンが1色で作られているので、好きな色に変えることができます。

  • 画質調整タブからカラーの項目を選びます
  • カラーの中から「色相・彩度」を選びます
  • 色相・彩度のメニューボックスの右下「色彩の統一」にチェックを入れます
  • スライダーを動かして好きな色に変えます
色を変化させる方法
スライダーを動かして好きな色に変更させよう

その後、好きなように画像を編集します。

私は「ぽてさら」の「ぽ」の字を加えました。

背景を透明にする

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

一気に画像を統合すると背景が白色に変換されます

透過した背景を保ちたい場合は、イラストと統合したレイヤーだけ統合します。

背景ありの画像になった場合の手順
  1. 統合した画像のアイコンをwクリックします
  2. マジック消しゴムツールを選びます
  3. 画像の白い部分をクリックします
  4. 白い部分が削除される
  5. 気になるところは消しゴムツールで消していく
  6. 残りのレイヤーは削除

画像サイズを32ピクセルに変更します。

32ピクセルのアイコン画像
32ピクセルの大きさに変更しました

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

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

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

  1. 32×32用画像ファイルを選択して、先ほど作ったファイルを開きます
  2. favicon.ico 作成をクリックします
  3. 「ダウンロード」ボタンを押して画像をダウンロードします
ファビコンの用途のイメージ画像
ファビコンが使われるとこんな感じになります

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

背景について

他のサイトやブログではファビコンの背景は透明にするとよい、とあります。

ダークモードでホームページを見る場合は白色が目立つので気になるかもしれませんが、私は背景は白でも、他の色でも良いと思います。

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

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

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