MENU

ファビコンの作り方|お店のロゴをそのままファビコンにしたらダメな理由

ファビコンの作り方
悩む人

お店のロゴをファビコンに使おう!

いわ助

ちょっと待ってー
お店のロゴをそのままファビコンにするのはおススメしません!

なぜなら、ファビコンが小っちゃすぎで何のマークなのかわからなくなるからです!

今回の教えて〇〇シリーズでは、
お店やサービスの【ロゴ】や【マーク】からファビコンに適した透過画像を簡単作成 できるアプリCanvaを使ってファビコンを作る方法をご紹介します!

いわ助

本記事は、すでにお店やサービスのロゴがある方対象の内容です!

あわせて読みたい
ロゴデザイン、やってはいけない会社のロゴマークの作り方|自分で作る方法と誰かに頼む方法 ロゴを作ってしばらくたってから後悔したコトがあります。 一度ロゴを作ってしまうと、イメージがお客様に付いているのでコロコロは変更出来ないし、プロに頼むとまたお...
目次

お店のロゴからファビコンを作る時の注意点

ファビコンの作り方
いわ助

ファビコンは小豆ぐらいの大きさなので、お店のロゴをそのままファビコンにすると何が書いてあるのかわからなくなります!

元のロゴそのままファビコンにしたモノと、ロゴを1文字だけにしたモノを比較してみてください!

元のロゴ
1文字だけのロゴファビコン16PX
悩む人

ロゴのままだと、ゴニョニョってなってますね💦

小さいサイズの中に文字をたくさん入れると、何を書いているのか全く分からなくなります。

いわ助

何文字ぐらいまで、文字が読めるのか実験してみました!

2文字
3文字
4文字
何文字まで読めますか?
悩む人

3文字ぐらいが限界ですね💦

いわ助

ロゴをギュッと小さくなると何が何だか分からなくなるので、シンプルにする必要があります!

ロゴを無料でデザインが作れるアプリ【Canva】を使ってシンプルに作り直す方をご紹介します!

Canvaのアカウントを作る

いわ助

Canvaのアカウントを持っていない方は、アカウント作成からスタート

Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始!
STEP
CANVAの登録方法
いわ助

Canvaとググり、ページが開いたら【無料で登録する】をクリック

STEP
CANVAの登録方法
いわ助

【グーグル】【フェイスブック】【メールアドレス】いずれかの方法で登録!

ファビコンの作り方|Canvaでロゴをシンプルに!

いわ助

既にあるロゴからファビコンを早速作っていきますね!

ロゴがまだない方はこちらの記事でチェック
▶︎やってはいけないロゴ作成

STEP
ファビコンの作成方法
いわ助

Canvaにログインしたら、【デザインを作成】をクリック

STEP
ファビコン作成
いわ助

【カスタムサイズ】をクリック

STEP
ファビコンの作成方法
いわ助

幅【250】 高さ【250】 その隣は【px】と入力し、【新しいデザインを作成】をクリック。

ファビコンを作る大きさを設定します。
『どのサイズの画用紙に絵を書こうかな』という時のパソコン上の画用紙のサイズのコトです。

ファビコンのサイズは16px~32px(ピクセル)ぐらいですが、Canvaが作れる最小サイズが40pxなので、色々な場面で使える250pxに設定しています。
ちなみに16pxは4.2ミリぐらいです。

STEP
ファビコンの作成方法
いわ助

この画面が開いたら、【アップロード】をクリック。

すでにパソコン内にあるロゴをCanvaで使えるようにアップロード(保存)します。

STEP
ファビコンの作成方法
いわ助

【ファイルをアップロード】をクリック。

STEP
ファビコンの作成方法
いわ助

自分のパソコン内のロゴを保存している場所にたどり着いてください!

STEP
ファビコンの作成方法
いわ助

Canvaにアップロード(保存)された画像をクリックすると、ロゴがページ(白い部分)に移動します。

Canvaにアップロードした画像は【アップロード】内にたまっていきます!

STEP
ファビコンの作成方法
いわ助

四隅の〇ではなく、縦のバーをCだけの位置にもっていき、切り取ります

STEP
ファビコンの作成方法
いわ助

Cだけの状態になったら、白い部分をクリックします。(カラーモードになります。)

STEP
ファビコンの作成方法
いわ助

①をクリックすると左の色編集画面が出てくるので、ロゴの横の色をクリックします。

STEP
ファビコンの作成方法
いわ助

周りの色が、ベースの色と一緒になりました。

実はコレすごい便利機能!

STEP
ファビコンの作成方法

Cを大きくしていきます

いわ助

Cをクリックすると四隅に〇が出てくるので、〇をクリックしながら適度な大きさまで広げてください。

STEP
ファビコンの作成方法
いわ助

適度な大きさになり、Cの上下左右の位置を調整したら完成です!

次はファビコンをパソコンに保存する方法です!

悩む人

保存し忘れたらデーターが消える場合がありますよー

ファビコンの保存方法

Canvaで作ったファビコンを色んなホームページで使えるように、パソコンのフォルダにデータを保存していきます!

STEP
ファビコンの保存方法
いわ助

①【ファイル】をクリック

いわ助

②【ダウンロード】をクリック

STEP
ファビコンの保存方法
いわ助

【ダウンロード】をクリック

ファイルの種類は【PNG(ピーエヌジー)】でOKです。
ホームページ作成ツールなどで【JPG(ジェイペグ)】しかダメなときは、【JPG】を選びましょう!

STEP
ファビコンの保存方法
いわ助

パソコンの【ダウンロード】フォルダーに保存されていますので確認してください!

完了をクリックして終了です!

いわ助

次は250pxサイズのファビコンを32pxに小さくする方法です!

ファビコンを小さくする方法

Canvaで作った250pxのファビコンを32pxに小さくしていきます!

今回使うのが、ファビコン favicon.ico 作成というサイトです。

いわ助

もちろん無料!

https://ao-system.net/favicon/

STEP
ファビコン作成 サイズの合わせ方
いわ助

【32×32用画像ファイルを選択】をクリック

STEP
ファビコン作成 サイズの合わせ方
いわ助

パソコン内の先ほど作成し保存したファビコンをクリックします

STEP
ファビコン作成 サイズの合わせ方
いわ助

【favicon.ico 作成】をクリック

STEP
ファビコン作成 サイズの合わせ方
いわ助

【ダウンロード】をクリック

パソコン内の【ダウンロードフォルダー】に保存されました!

このファビコンを使って、ホームページ作成ツールにファビコンを登録してくださいね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次