[αź]延ばし延ばしになっていたけど、ついにWordPressにファビコンを設定してみた! 作り方と設定方法まとめ #七ブ侍 #ブログ合宿

おはようございます。絶賛夏休み中のあずき (@azucky824 )です。

昨日は七人のブログ侍のメンバーとブログ合宿をやってきました。色々とこのブログをいじりまわしてきましたが、記事にしていない変更点がもう一つ。

ブログの「ファビコン」という、下の画像でブログタイトルの横に表示されるアイコンを作成・設定しました。

あずきろく 好きなものだけ 好きなだけ

もともと、いつかは作りたいなーと思っていたんですが、きっかけはブログ侍いいだしっぺのノリさんの記事↓

[n❁h]ブログ開設から半年。何度も挫折してきた僕がブログを続けられた3つの理由。 #七ブ侍 #木曜日*5 | FLOWER❁PARK

意外と簡単だよーなんて話も当日伺って、とりあえず作ってみるか!と軽い気持ちで作成しました。

作成するには、、、?

サイズ

作るに際して、どのくらいの大きさで作るんだろう??と思い調べてみました。

もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG

↑こちらの記事によると
・16×16
・32×32
、、、の2つが基本で、48×48があればPCでのショートカットアイコンにもなるようです。

とりあえずつくろう!

ツールはなんでも良さそうですが、僕が使ったのはIllustrator CS6というソフトです。持っている方は持ってるし、全然縁のないかたもいるかと思いますが、今回はこちらを使いました。

どのサイズにも使えるように、キャンパスサイズは50×50に設定。

背景色をつけて、記事タイトルに必ずつける[αź]をトレードマークがわりに入れて、RSSのシルエット素材を使わせてもらいました。

商用フリーで使える影絵素材サイト シルエットデザイン

↑のところは僕がかなり多様しています。お世話になっております。

そして出来上がったのがこちら↓

ファビコン

さくっと5分ほどでつくったものです。

今後Illustratorスキルがあがって、色々と出来るようになったらまた新しいものを作ってみたいと思います。

作ったものはPNGファイルにして保存しておきます。

アイコンにしてみよう

先ほど作った50×50のPNGファイル。ファビコンにするにはアイコンデータにしなければなりません。しかも複数サイズのものを1つにまとめた「マルチアイコン」というものにしなきゃいけないんです。

あんまりそのあたりの知識はないのでこちらを使わせて頂きました↓

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

同じファイルを指定すればそれぞれのサイズに変換してくれて、マルチアイコン化してくれるツールになります。

ほぼ自動で「favicon.ico」というファイルを作成してくれます。

さぁ!ブログに設定しよう。

ファビコンをWordPressのブログへ設定するにはいくつか方法があるようで。

オーソドックスなものでいえばFTPでファビコンを転送するという方法。でもちょっと面倒だったので簡単な方法を選びました。

便利な「Favicon Rotator」プラグインを使用しました。

WordPress › Favicon Rotator « WordPress Plugins

参考はこちら↓

ワードプレスにファビコンを設定するプラグインFavicon Rotator | ネットビジネスで20代にて転職して独立したなるひこのブログ

プラグインからの設定のみでファビコン設置が完了します。

ちょっと敷居たかいなーとか考えている方々。すごく簡単だったのでぜひやってみてください!ではあずき (@azucky824 )でした!

この記事を書いた人

azucky824

1987年生まれ ゆとり第一世代。実家は千葉で代々漁師の家系。
大学で上京し、住宅営業マンを経て現在は理学療法士を目指して専門学校生。
好きなものを語る場としてこのブログを管理・運営してます。