最速で！favicon（ファビコン）の作り方を解説します
ブラウザのタブに、小さく表示されるアイコン（Favicon）。
スマホの検索結果にでてくるので、Favicon は重要な差別化になっていきそうです。
というわけで今回は、最速でだれでもわかる Favicon の作り方を、解説していきます。
目次
Favicon の作り方
- ペンとノート
- PhotoScape X（無料/Windows・Mac対応）
- 8分音符アイコン 1 | アイコン素材ダウンロードサイト「icooon-mono」
- PNGをICOに変換する - アイコンファイルをオンラインで変換
※すべて無料のモノで、作っていきます。
それでは Favicon を、いっしょに作っていきましょう。
今回の完成品は、このブログ「サウンドテック・ラボ」のFavicon を例に、実際に作っていきます。
Faviconとは、タブなどで表示されるアイコンのことです。
1.デザインをラフで考える
手順１は、デザインをラフで考えます。
上の画像のような感じで、作ってみたい Favicon のイメージを、紙のノートにざっくり書いてみます。
イメージを形にするだけなので、キレイに書けなくてもまったく問題ないですよ！
2.デザインを画像編集ソフトで再現する
ラフで書いたデザインを、画像編集ソフトで再現していきましょう
白い背景を作る
PhotoScape Xを起動、新規をクリックします。
幅と高さに、256px と記入し、OKをクリック。
白い背景ができたら、OKです。
音符を配置する
PhotoScape X 上部タブ 挿入を、クリックします。
- ダウンロードした素材8分音符アイコン 1を、PhotoScape X の白い背景に、ドラッグ＆ドロップ。
- 角度を-134に設定
配置は、音符の見本画像のように、調整してください。
長方形のボックスで、レインボーカラーを追加する
- 長方形の追加アイコンを、クリック。画像の上をドラッグして、長方形を作成
- グランジェントに、チェックを入れる
- 2段目のカラーリングを選択
- 音符の左余白に、長方形を配置する。
虹色をイメージカラーはこちら 虹が７色とされている由来と虹の色の順番
ボックスを 5 つ作り、参考画像のように配置します。
PhotoScape X で画像を保存
右下保存を、クリック。
設置したボックスが、画像サイズをこえると保存のときにポップがでてきます。
いいえをクリックすれば、画像サイズを変更せず保存できます。
別名で保存...を、クリックします。
ファイル名「favicon」とし、保存をクリックしましょう。
3.拡張子「.icon」に変換する
Favicon で使用する画像は、フォーマット「.ico」に変換しましょう。
オンラインサービスを、使います。
PNGをICOに変換する - アイコンファイルをオンラインで変換
- 作成した画像を、ファイル選択にドラッグ
- 今すぐ変換をクリック。
今回の Favicon サイズは、「16px × 16px」を選びましょう。
今すぐ変換をクリックすると、変換結果に出力ファイルが表示されます↓
出力ファイル上で、右クリックします。
リンク先を別名で保存...をクリックし、保存します。
以上で、favicon（ファビコン）の作り方の解説を、終了します。
ファビコンをアップロード
Faviconを、アップロードしていきましょう。
ブログサービスによって、方法が異なります。
Favicon の設置方法については、こちらの参考記事をごらんください↓
実際にファビコンの表示を確認
Faviconが設置されているか、確認しましょう。
ブラウザで自分のサイトを開くと、タブに作成したFaviconが表示されているはずです。
またスマホで検索し、検索結果にも表示されていれば OK です。
まとめ
Favicon（ファビコン）の作り方を、最速で解説しました。作り方の流れは、こんな感じでした↓
- 作り方の流れまとめ
- デザインをラフで考える
- デザインを画像ソフトで再現する
- 拡張子「.icon」に変換する
- ファビコンをアップロード
- 実際にファビコンの表示を確認
実際の Favicon 作成を例に、あなたもぜひトライしてみてください。
ちいさな部分のカスタマイズですが、ちいさな積み重ねが、大きな物事を成し遂げていきます。
そのほか、ブログのカスタマイズなど、WEBデザインに関する記事はこちら↓
