【ファビコン作り】はてなブログのブログアイコンを5分で作ってみた

スポンサーリンク

『あれ?あなたのブログ、なんだか寂しくない?』

朝、目が覚めて「よし、はてなブログのブログアイコン(ファビコン)を作ろう」とふと思い立ったので早速作ってみましたよ。ぜひ参考にしてみてくださいな。

ファビコンとは?

ファビコン(favicon)とはfavorite iconの略で、ウェブサイトのシンボルマーク・イメージとして配置したアイコンのこと。ウェブサイト運営者の方などには馴染み深いものだと思います。

タブのところに出たり、ブックマークで使われたり、過去記事を貼り付けた時に表示されたり、と、出番はかなり多い模様。

僕は今まで設定していませんでしたが、今更「あれ?これって意外と重要なことなんじゃ?」と思ってしまった次第であります。

はてなブログの場合、デフォルトでこのようなアイコンが表示されます。
このままではさすがに味気ないので、ここで自分の個性をちょろっと出してみましょう。

f:id:afrokanchan:20151205172835j:plain

5分でブログアイコンを作ってみた

まず、頭の中でイメージを膨らませます。かなりテキトーでいいです。
本当はきちんと考えた方がいいかと思われます(ぁ。でも、きっとこういうのは勢いが大事ですから。

次に、ノートを開き、先ほど頭の中で思い浮かべたイメージをボールペンでザーッと描いていきます。変なの混ざってませんかねぇ……。

f:id:afrokanchan:20151205172836j:plain

最後にIllustratorで作っていきます。64×64ピクセルでは少し画質が不安だったので、4倍の256×256ピクセルで作ってみました。はてなブログの場合、対応しているファイル形式は、JPEG、PNG、GIF。あんまり画質は関係なかったかな……。

「そういえば、過去記事を貼った時って四角いアイコンも丸く設定されてなかった?それなら、最初から丸いアイコンを作っちゃおう」ということで丸いデザインに。PNG形式で、周りの余白は透過にしました。

僕はIllustratorで作成を行いましたが、お絵描きアプリ、または写真加工アプリ、その他フリーソフト等でも可能だと思います。

原案を練るのに3分、作成するのに2分、計5分でファビコンが完成しました。

ファビコン(ブログアイコン)完成図

完成したアイコンがこちらです。

f:id:afrokanchan:20151205172837j:plain

見事にはみ出しております。これは「枠にとらわれたくないんだぜ」という心の表れなのでしょうか。謎です。

ブログタイトルを「これでもか」と大きく配置し、「。」は周りの縁で表しております。我ながら実に素晴らしいデザインです。某エンブレムにも引きを取らない洗練されたデザイン。※当時のブログタイトルは「とりてみ。」

他にも、便座にバナナという大胆かつシュールで素晴らしいデザイン候補もあったのですが分かりにくかったので却下。※以下参考写真

f:id:afrokanchan:20151205172838j:plain

はてなブログに設定してみたよ

では、早速完成したアイコンを設定してみましょう。

はてなブログのダッシュボードから「設定」→「基本設定」と進み、「ブログアイコン」→「ファイルを選択」そしてページ下部の「変更」を押して設定完了。超簡単。

f:id:afrokanchan:20151205172839j:plain

設定変更後、すぐに反映されこのようになりました。

f:id:afrokanchan:20151205174728j:plain

うん。すごくブログっぽいぞ。

ワタクシ、“それっぽい”に重きを置いて生きております。

次に変更するべきは、プロフィール画像でしょうかね。またそのときにでも記事にさせていただきます。

追記:2016/9/15

現在は、ファビコンが新しいものに変わっています。僕のプロフィール画像にもなっている画像をそのままブログアイコンにしています。

関連:【月間10万PV突破記念】いつかさんにお頼みして宇宙人から人間にしていただきました【アイコン&イラスト】

www.toritemi.com

ちょこっといじるだけでもブログの印象がガラッと変わりますので、ぜひ挑戦してみてはいかがでしょうか。

関連記事

スポンサーリンク

関連記事



この記事を書いた人

あめよふれ

あめよふれっていいます。どうぞよろしく。

「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。