【作業時間10分】パワーポイントを活用したブログのファビコン作成方法

favicon-ai

今回の記事では、ブログのファビコン(favicon)ってやつを作ってみたので作り方の紹介をしようかなと思う。テーマは10分で作成すること!そして、パワーポイントを活用することだ。なんで、パワポっていうと仕事でよく使うからさ!

この記事では5つのSTEPでパワーポイントを使用したファビコンの作り方を解説!!

  • STEP1 10分でファビコンを作るために準備すること
  • STEP2 パワーポイントの活用
  • STEP3 画像背景を透明にする方法
  • STEP4 画像サイズを変更する
  • STEP5 「.ico」に変換する

ファビコンは自分で作ろう

僕は、昔(小学生)の頃絵が得意だね~って褒められていた過去があるから、絵心に関しては自信がある。(実力はない)だからこういった物は自分で作りたいってまず考えるんだよね。

そして、人に頼むとお金がかかるってこともある。

そんなわけで、僕は自分で作ることにした。もし、めんどくさいなって思ったらお金をかけて人に頼むのもありかなと。たとえばココナラとかでも「ファビコン」で検索するとヒットするから500~5000円で作ってくれる。

だけど、できるなら自分でつくりたいって思うよね!

スポンサーリンク

ファビコンとは?

僕は詳しくは書かないけど、調べてたら出てくるんじゃん?(←適当w)

簡単に言うと、これだ。

ファビコン

今も表示されていると思うんだけど、見える??

些細なことだけど、ブログに個性を出すためには必要だよな。でも、小さくすると僕のブログのファビコンは目立たない!

変えようかな。

STEP1 10分でファビコンを作るために準備すること

じゃあ、順番に説明していこう。まずは必要なものは下の2つだ!

  • イメージが固まっている
  • パワーポイントをインストール済み

準備で必要なものはこれだけ。

重要なのは、イメージが固まっていること。そうじゃないと10分は無理かな~。 そして、パワーポイントの活用だから当然パワポは必要になってくるね。

あと、下記の2つのWEBツールを利用させてもうらう。

WEBブラウザ上で簡単に透過PNG画像を作成できるツール – PEKO STEP

→背景を透明にしたいときに利用。

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

→最後の仕上げに、「.ico」に変換しよう。

STEP2 パワーポイントの活用

活用っていっても、簡単。図形で絵を描くだけ。

こんな感じです。□、○、★など幾何学的なアイコンであれば、パワポで十分作成可能!!てか、ファビコンってどうせ小さくなるから複雑な絵ってものは合っていないんだ。ブログの頭文字とか、簡単なキャラクターをアイコンにしているブログが多いね!

注意ポイント
できるだけ正方形で作成しよう!
ファビコンPP1
ファビコンPP2

大きさはこの時点で適当でOK。どうせあとで小さくするんで!

イメージした図が出来上がったら、全部選択した状態で「右クリック」→「図として保存」でデスクトップに画像として保存しよう。

注意ポイント
この時の拡張子は「PNG」にすること!
favicon-pp5

これで、パワーポイントでの作業は終わり!!簡単だろ?しかも、パワーポイントで図として保存すると、勝手に背景を透明にしてくれる。すっごく便利でしょ。

だけど、僕の場合はここでひとつ問題が発生した。この画像をみてほしい。

一部、透明化できてない!!

favicon-pp6

ブルーの部分が透明になっているところなんだけど、四角く白い画像が残ってしまった。これは、図を作るときに白い四角をかぶせて線を消していたからだ。こんな時にどうするのか?

おなじことが起きた人は、STEP3を見てみよう。解決策があるよ。

STEP3 画像背景を透明にする方法

このSTEPは、背景を透明にしたいときだけ!だから、関係ないなってときはSTEP4に進んでしまおう。

背景を透明化するWEBツール

パワーポイントで図として保存すると、勝手に背景を透明にしてくれる。だけど、僕みたいに背景がちゃんと透明化できなかった時には、このWEBツールを活用しよう。

WEBブラウザ上で簡単に透過PNG画像を作成できるツール – PEKO STEP

使い方は簡単、透過したい画像をドロップして、透明化したいところをクリックするだけ。

favicon-pp8

ほら、透過したいところは全部OKになったね。

favicon-pp7

STEP4 画像サイズを変更する

ファビコンのサイズ32×32ピクセルに画像サイズを調節しよう。これは、Windowsに標準搭載されてるペイントソフトでよゆーで出来る。

favicon-pp11

使い方は「ホーム」→「サイズ変更」→「ピクセル」を選択 →「32」と入力。これだけ!!あとは画像を保存すればOK。このときも拡張子は「PNG」にしよう。

ほら!小さくなった。

favicon-pp9

ちなみに僕の場合は、画像が正方形になっていなかったので、32ピクセルに縮小した後にさらにサイズを調節しました。

favicon-pp10

ちゃんと32×32になるように、マウスでキャンパスのサイズを調整しよう。もっと、スマートな方法があるかもしれないけど、僕はしらない。

STEP5 「.ico」に変換する

では、最後にファビコンとして利用するために拡張子を変換しよう。これにて、完成。

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

favicon-pp12

こんなページ。画像透過のWEBツールと同じくめちゃくちゃ簡単。

「32×32用画像ファイルを選択」をクリック → 画像を選択 → 「favicon.ico 作成」をクリック。

これで全部に作業が完了。けっこう簡単でしょ?

 まとめ

ファビコンをつくって、ブログに個性を出したい。そして、全部無料で作りたい!!そんなときにパワーポイントを使うっていう選択肢があることを覚えておこう。

最後に、ブログにファビコンを設定する方法はファビコンの作成方法|faviconの簡単な作り方という記事を参考にしました。すっごくわかりやすいから、パワポでうまくファビコンを作成できたらこの記事をみて設置してね。(Wordpress限定)

スポンサーリンク
スポンサーリンク