こんにちは、”はふぃ”です。

みなさんファビコンってご存知ですか?

ブラウザでサイトを開いた時にタイトルの左に表示される画像がファビコンです。

ファビコンを設置すると、サイトを認識してもらいやすくなるため、ユーザーに記憶してもらえる可能性があがります。(あとは単純にサイトがいい感じに見えます。笑)

このサイトでもこの記事を書くまでファビコンを設置していなかったので、これをきっかけに作成してみたいと思います。

使用するツール

ファビコンを作るということはデザインをするということですが、photoshopやillustratorを操るスキルはなく、そもそもデザインのセンスがありません…。

そんな時はツールに頼ろう!笑

ということで、今回はICONSFLOWというツールを使います。

このツールでは、記号や顔文字、動物や建物のイラストがテンプレートとして存在するため、それをベースにすることで「何をテーマにしたら良いかわからない」や「デザインのセンスがない」という人でも簡単にデザインが作成できます。

ファビコンの作成

早速ファビコン作成に入っていきますが、まずICONSFLOWにアクセスして「Create Amazing Icons!」ボタンをクリックします。するとテンプレートを選択する画面にうつるので、その中からメインとするデザインを選びます。

メインとするデザインを選んだらそこにカーソルを当てると「Add」ボタンと「Edit」ボタンが表示されるので、「Edit」ボタンを選択します。

するとエディタ画面になるので、ここからテンプレートのイラストにアレンジを加えていきます。

編集が終了したら右上の「Apply」ボタンをクリックし、会員登録をして作成したファビコンをダウンロードします。

ちなみにエディタ画面ではなく、サイドメニューでも編集することが可能です。

※ ダウンロードは無料版だと、PNG形式かつ32×32のサイズでしかできません。

PNGではファビコンとして使いづらいので、以下のサイトでico形式に画像を変換しましょう。

ファビコン favicon.icoを作ろう!

画像サイズは16×16、32×32、48×48が選択できますが、基本的には32×32を作り、必要なら16×16も作る感じで良いと思います。

これで32×32のファビコン(ico形式)が完成しました!

まとめ

シンプルなファビコンだったので今回のツールで作成できたが、少し手の込んだものなどは他のツールを使わないと厳しそう。

また、無料なのは便利だが、ダウンロード時に画像サイズが固定だったりico形式じゃなかったりするのであまり使いやすいサイトとは言えないかもしれない。

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA