最速で!favicon(ファビコン)の作り方を解説します

WEBデザイン

ブラウザのタブに、小さく表示されるアイコン(Faviconファビコン)。

スマホの検索結果にでてくるので、Faviconファビコン は重要な差別化になっていきそうです。

というわけで今回は、最速でだれでもわかる Faviconファビコン の作り方を、解説していきます。

Faviconファビコン の作り方

Favi hoto make

それでは Faviconファビコン を、いっしょに作っていきましょう。

今回の完成品は、このブログ「サウンドテック・ラボ」のFaviconファビコン を例に、実際に作っていきます。

メモ

Whatisfavicon

Faviconファビコンとは、タブなどで表示されるアイコンのことです。


1.デザインをラフで考える

Rough sketch

手順1は、デザインをラフで考えます。

上の画像のような感じで、作ってみたい Faviconファビコン のイメージを、紙のノートにざっくり書いてみます。

イメージを形にするだけなので、キレイに書けなくてもまったく問題ないですよ!


2.デザインを画像編集ソフトで再現する

ラフで書いたデザインを、画像編集ソフトで再現していきましょう

白い背景を作る

Photoscapex kidou

PhotoScape Xを起動、新規をクリックします。

Psx 256

幅と高さに、256px と記入し、OKをクリック。

Psx white haikei

白い背景ができたら、OKです。

音符を配置する

Favicon howto3

PhotoScape X 上部タブ 挿入を、クリックします。

音符の見本画像

  1. ダウンロードした素材8分音符アイコン 1を、PhotoScape X の白い背景に、ドラッグ&ドロップ。
  2. 角度を-134に設定

配置は、音符の見本画像のように、調整してください。

長方形のボックスで、レインボーカラーを追加する

Favicon howto2

  1. 長方形の追加アイコンを、クリック。画像の上をドラッグして、長方形を作成
  2. グランジェントに、チェックを入れる
  3. 2段目のカラーリングを選択
  4. 音符の左余白に、長方形を配置する。

虹色をイメージカラーはこちら 虹が7色とされている由来と虹の色の順番

虹ボックス参考画像

ボックスを 5 つ作り、参考画像のように配置します。

PhotoScape X で画像を保存

Psx hozon1

右下保存を、クリック。

Psx hozon2

設置したボックスが、画像サイズをこえると保存のときにポップがでてきます。

いいえをクリックすれば、画像サイズを変更せず保存できます。

Psx hozon3

別名で保存...を、クリックします。

Psx hozon4

ファイル名「favicon」とし、保存をクリックしましょう。


3.拡張子「.icon」に変換する

Faviconファビコン で使用する画像は、フォーマット「.ico」に変換しましょう。

オンラインサービスを、使います。

PNGをICOに変換する - アイコンファイルをオンラインで変換

Favicon howto5

  1. 作成した画像を、ファイル選択にドラッグ
  2. 今すぐ変換をクリック。

今回の Faviconファビコン サイズは、「16px × 16px」を選びましょう。

今すぐ変換をクリックすると、変換結果に出力ファイルが表示されます↓

Favicon howto6

出力ファイル上で、右クリックします。

リンク先を別名で保存...をクリックし、保存します。

以上で、favicon(ファビコン)の作り方の解説を、終了します。

ファビコンをアップロード

Favicon howto7

Faviconファビコンを、アップロードしていきましょう。

ブログサービスによって、方法が異なります。

Faviconファビコン の設置方法については、こちらの参考記事をごらんください↓

実際にファビコンの表示を確認

Favicon howto8

Faviconファビコンが設置されているか、確認しましょう。

ブラウザで自分のサイトを開くと、タブに作成したFaviconファビコンが表示されているはずです。

またスマホで検索し、検索結果にも表示されていれば OK です。

まとめ

Favicon(ファビコン)の作り方を、最速で解説しました。作り方の流れは、こんな感じでした↓

作り方の流れまとめ
  1. デザインをラフで考える
  2. デザインを画像ソフトで再現する
  3. 拡張子「.icon」に変換する
  4. ファビコンをアップロード
  5. 実際にファビコンの表示を確認

実際の Faviconファビコン 作成を例に、あなたもぜひトライしてみてください。

ちいさな部分のカスタマイズですが、ちいさな積み重ねが、大きな物事を成し遂げていきます。

そのほか、ブログのカスタマイズなど、WEBデザインに関する記事はこちら↓

サウンドオルビス

4,183,315 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事