サイトデザイン

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

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

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

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

尚、ここでは賢威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の場合は右上の「︙」をクリックし「その他のツール」→「閲覧履歴を消去」からキャッシュを削除出来る画面に飛ぶ事が出来ます。

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

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

終わりに。

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

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

カツオ
カツオ
たった一つのブログで僕の人生は激変しました。

ずっと稼ぎ続けてくれるネット上の資産を構築するスキルを身につけた事がきっかけです。(詳しくはプロフィールで!)

今では複数のサイトを運営しアフィリエイト報酬を得たり、法人顧客のSEOコンサル等も行っており、副業の収入がサラリーマン時代の月収を超えています。

メルマガの中でその秘密について話しています。

現在、メルマガ登録者限定で初心者がブログアフィリエイトで月収10万円以上稼ぎ、インターネット上に資産を築く為のノウハウが詰まったテキストを無料でプレゼント中!

※僕のメルマガは無料で読んで頂く事が出来ますし、必要ないと感じたらいつでもボタン1つで解除が出来ます。



ABOUT ME
カツオ
毎日のシゴトを「魂レベル」で楽しむ僧侶×Webマーケター。インターネットを用いた人気メディア運営のハウツーを伝授するオンラインレッスンを行ったり、法人顧客に対してWebマーケティングのアドバイスを行っている。趣味は筋トレ、ムエタイ、英語の勉強。

COMMENT

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