ぬりえ一覧
ぬりえご利用規約

【ブログカスタム】オリジナルのファビコンを作ろう!

2019/12/18

イラレ・メイキング

t f B! P L
こんにちは。まいです。

ブログやホームページを運営している皆様、ファビコンに注目したことってありますか?
ファビコンってなんぞや?というお方・・・これです!



この○の部分です。
前から、これってどうやって設定してるんだろう?と疑問だったのですが、
bloggerでブログを始めた今、 案外簡単に変えられるようなので、
せっかくなのでオリジナルのファビコンを作ってみようと思います。

そもそもファビコンって?

以下、Wikipediaより引用:https://ja.wikipedia.org/wiki/Favicon

ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。

favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。 

なるほど!フェイバリットアイコンを縮めたものだったんですね〜。
全く知らなかったので、ちょっとかしこくなった気がします。


デザイン

企業のホームページのファビコンを見てみると、だいたいロゴとかシンボルマークが使われていて、
パッと見ただけで「あの会社だ」というのが分かるようなデザインになっていますね。
個人のブログ等でもファビコン設定されてる方は、
ブログのイメージキャラクターとかイラスト等にしているところが多い印象です。
これがあるだけで、そのブログの世界観がより増すというか・・他ブログとの差別化も図れそうな気がします。



自分のファビコンを作ろう!

それでは早速Illustratorを使ってファビコンを作ってみようと思います。



正式な大きさがよく分からないのでとりあえずテキトーに正方形のアートボードを作成。
ひとまず大きく作って、あとから縮小しようと思います。

デザインは全くノープランなので、ひとまずブログ名「ユメミルアトリエ」を入れたいのですがスペースがないので「ユメミル」だけ入れてみます。



このサイズだといい感じですが、ファビコンと同じくらいのサイズに縮小してイメージを膨らませてみます。



う〜〜〜〜ん・・なんかこちゃこちゃしてる。
今更気づいたのですが、文字をたくさん入れるのは向いてない予感です。

かと言って最初の1文字「ユ」だけとかも微妙だし、アルファベット「Y」だけだともっと謎感・・。
イメージキャラクター的なマスコットもいないし・・。

だったらこのブログが「イラストブログ」だということが少しでも分かるようなマークにしようと思いまして、
悩んだ結果、こんな感じのデザインにしてみました。



鉛筆=描くというイメージと、可愛い感じの要素を入れたかったのでハートを入れてみました。
縮小しても何のイラストなのか分かるようにするのって、すごく難しいですね。
色合いも、パステルカラーだとぼやけちゃったりして、何度か変更してこの濃いめの色合いにしました。
あと線の太さもかなり重要だなと思いました。
デザイン自体は全然凝ってないのに、いろいろ微調整してたらなんだかすごい時間かかりましたよ。 

ファビコンを変更してみる

変更方法はお使いのブログやホームページによって変わってきますが、
bloggerをご使用であれば、レイアウト画面から簡単に変えられます。



ここから・・・



画像を選択して保存。
確認してみます。



設定完了です。
実際のタブで確認。



出来た〜〜〜〜〜〜〜〜〜〜!!
けど想像より小っっっさ !!!!!!

ひとまず疲れたのでこれで決定とします!


まとめ

ファビコンを変更すると、ブログ全体に統一感が出ますし、「無料ブログ」っぽさを感じさせないところもいいですね。
ブックマークしたときの一覧に、自分の作ったファビコンが表示されるのはなんだか誇らしい気持ちがします。

QooQ