ブログ

【WordPress+JIN】サイトの顔になる!ファビコン(アイコン)を設定する方法!

アイコンイメージ

どうもFlad(@Flad_Box)です!

サイトの顔にも、スマホのアイコンにもなるファビコンですが、画像形式が通常とは異なるものであったり、プログラムコードを書き換えたり…と、本来であれば結構面倒な設定が必要になりますが…

WordPressテーマでJINを使用されている方は実はとても簡単に設定出来ちゃうんです

今回はその方法を解説します!

ファビコンってなんだ?


ファビコンとは、Favorite Icon(お気に入りのアイコン)の略称で、サイトのアイコンになる機能を持っています

PCであれば、タグの隣にあるアイコン

スマホであれば、Safariの上部やアプリのアイコンのように表示されます

ファビコンを設定していないと、ワードプレスのWのマークで表示され続けてしまいますので、オリジナリティを出したいという方は早めに設定すべきです!

ファビコンの設定方法


それではここから、ファビコンの設定方法について解説します!

1.ファビコン(アイコン)を作ろう

僕の場合はイラストソフトで作成しましたが、面倒だという方は簡単に作成できるサイトやアプリを利用しましょう!

※作成するサイズですが、512px以上の正方形で作成して下さい!


2.ファビコンをPNG形式で保存しよう

ファビコンについて調べると、

形式を【ICO】で保存して下さい

と書いてある所が多いですが、WordPressテーマにJINを使用されている場合は【PNG】で保存して下さい


3.ファビコンを設定しよう

ファビコンを保存出来たら、Wordpressのダッシュボードより
【外観】→【カスタマイズ】を選択


左のメニューより、【サイト基本設定】をクリック

下にスクロールすると出てくる【サイトアイコンを選択】をクリックして、先程作成したアイコンを選択

選択が完了すると、このようにイメージが表示されます

上部の【公開】をクリックしたら完了です

ファビコンの背景を透過させたい場合

さて、これでもファビコンとして成り立ちますが、このままだとファビコンの背景の白い部分がそのまま残ってしまいます

これが気になる場合は、スマホやパソコンのイラストソフトから、アイコンの余白の部分を全て消しゴムで消す(透過させる)必要があります

画像のように、余白を全て消してみましょう
出来上がったら必ず【PNG】形式で保存して下さいそれ以外にしてしまうと、消した部分が再び白い背景として残ってしまいます

出来上がった画像を、再びファビコンとして設定してみましょう

スマホのアイコンでは背景が黒く見えてしまいますが、WEB上では透明な背景になり、アイコンだけが浮き上がっているように見えますね

見た目がスッキリすると、少しだけおしゃれに見えますね

まとめ

いかがでしたか?

有名なブログや大手の公式サイトは必ずファビコンを設定しています

せっかくあなただけのサイトを作ったのですから、ファビコンを設定して、あなたらしさを出してみませんか?