サイトデザイン

ファビコンを無料で作成しよう!画像サイズや表示されない時の対処法も

カツオのメルマガ

 

今回はファビコンの作り方について解説します。

自分だけのファビコンがあるかないかでは、サイトのイメージにかなり差が出るもの。

ファビコンに使うべき画像サイズや表示されない時の対処法等をお伝えしますが、あまり難しくはないのでしっかりとマスターしてしまいましょう!

尚、ここでは賢威7の場合を中心に説明していきますが、他のテンプレートの場合でも応用可能ですので、ぜひ参考にしてくださいね。

参考動画:賢威7でファビコンを無料で作成しよう!

田村カツオYouTube公式チャンネルではファビコンの作り方を動画で説明していますので是非ご覧になってみて下さい。

ファビコンとは?

ファビコンとは?

まず、念の為ファビコンとは何なのかについて簡単にご説明しておきます。

カツオ
カツオ
「ここは知ってる」という方は読み飛ばして下さい。

ファビコンとは「そのサイトのシンボル」です。

例えば、ブックマークしたサイトの一覧を見ていただくと下記の画像の様に左側にアイコンが出ているがわかりますね。

そのアイコンがファビコンです。

ファビコンとは

ファビコンはブックマークしたサイトの一覧を開いた時以外にも、ブラウザのタブ等にも表示されます。何も設定しないでデフォルトのままでいると味気ないものになってしまいます。

ファビコンを自分独自のものにするのにはあまり手間はかかりませんので、ぜひオリジナルファビコンを無料で作成して使用しましょう!

ファビコンを無料作成する方法!(賢威7の場合)

まずは画像を作る。

まず、ファビコンとして使用する画像を作ります。

賢威7の場合、512×512pxの正方形の画像を用意する必要があります。

 

どんな画像にするかは人それぞれです。

そのサイトで使っているキャラクターの顔にしたり、好きな文字にしたり。このサイトの場合は「K」というアルファベット1文字にしてあります。

カツオの「K」ですね。

 

ペイントで作っても良いし、PhotoScapeで作ってもいいでしょう。

無料素材の写真何かを使っても良いと思います。

 

ファビコンは表示がどうしても小さくなるのであまり複雑なデザインにするべきではありません。

シンプルなものを作りましょう。

関連記事:【フリー画像】おしゃれな外国のサイト10選を紹介!【海外凄い】

関連記事:PhotoScapeの使い方を説明!画像の結合や文字入力、トリミングなど超有能

 

とりあえず、ここではサンプルとしてこのような画像を作ってみました。

実際の大きさは512×512です。

作った画像をファビコンとして設定する。

①賢威7でファビコンを設定するにはダッシュボード画面左側のメニュー一覧から「外観」→「カスタマイズ」と進みます。

ファビコンを無料で作成!

 

②すると次の画面ではメニュー一覧が出てきますので、そこから「サイト基本情報」を選びます。

ファビコンを無料で作ろう!

 

③するとサイトアイコンを選択する画面になりますので、そこで先ほど作った画像を選択します。「保存して公開」ボタンを押すのをお忘れなく!


 

④無事、ファビコンが設定できました。

ファビコン設定前ファビコン設定前

ファビコン設定後ファビコン設定後

ファビコンを無料作成する方法!(他のテンプレートの場合)

前章で述べたように賢威7では簡単にファビコンを設定できる機能がついていますが、同様の機能が付帯していないテンプレートの場合についてもファビコンを設定する方法について説明していきたいと思います。

イッヌ
イッヌ
ファビコンを手軽に設定できるテンプレートは多いよ!

僕のおすすめはプラグインFavicon Rotatorを使用してファビコンを作る事です。

関連記事:Favicon Rotator(プラグイン)の使い方と設定方法

 

ダッシュボード画面左のメニュー一覧から「外観」→「テーマの編集」と進み、「header.php」に加筆することでもファビコンは設定出来ますが、各ブラウザによって画像の大きさを変えなければいけない等、正直面倒な部分もあります。

やはり、手っ取り早いのはプラグインFavicon Rotatorを使用する事ですね。

イッヌ
イッヌ
ワードプレスブログなら、困った時はプラグイン!

カツオ
カツオ
確かにプラグインは便利なんだけど、プラグインの入れ過ぎも不具合を引き起こしたりサイトが重くなったりする原因にもなる事もあるから、程々にね。

ファビコンが表示されない時の対処法。

ファビコンの設定は決して複雑なものではありません。

万が一ファビコンを設定したのに表示されないという事になったとしても、落ち着いて基本的なところを確認していきましょう。

画像のサイズを確認する。

画像のサイズは正しく設定できていますか?例えば賢威7の場合、前述した方法でファビコンを設定するのであれば画像サイズは「512×512px」以上である必要があります。

もう一度画像のサイズを確認してみましょう。

キャッシュを削除する。

ファビコンが表示されない時はファビコンを設定する以前のファビコンがブラウザによってキャッシュされている可能性が考えられます。

キャッシュを削除してみましょう。

 

Google Chromeの場合は右上の「︙」をクリックし「その他のツール」→「閲覧履歴を消去」からキャッシュを削除出来る画面に飛ぶ事が出来ます。

キャッシュを削除しよう。

他のブラウザの場合でも、設定画面からキャッシュを削除出来るというのは大きくは変わりませんので、やってみて下さい。

ファビコンについて まとめ

ファビコンは小さな画像ですが、サイトの信頼性やオリジナリティに大きく関係する要素です。

簡単に設定できますので、あなた独自のファビコンを無料で作って、あなたのサイトをキャッチーにしていきましょう!

P.S.

僕は会社での面倒くさい人間関係や飲み会、パワハラが嫌になり、無計画に会社を辞めました。

その結果、一時的には月収10万円も稼げないような状態になりましたが、ブログマネタイズからビジネスを始め、今では副業での収入が月30万円は安定的に。それ以上の月も全然ある状態です。

その時のストーリーやノウハウなど、表のブログでは書けない事をメルマガでは公開していますので、良かったらメルマガ登録してみて下さい。

完全無料です。

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
ノマド坊主。東南アジアが好き。キックボクシングが好き。ヨガが好き。大学卒業後にブラック勤務を経験。逃げるように坊主になるも、お金が無くなり、絶望的な状況に。 PC一台で個人ビジネスが出来る事を知って実践してみたところ、月収10万→30万→100万と割と順調にステップアップ。 今は田舎で自由に楽しく緩くノマド坊主的ライフスタイルを楽しんでいる。
こんな記事も読まれています。

COMMENT

メールアドレスが公開されることはありません。