ファビコンの作り方

Biz

サイトのアイコンのマークを作って、ブックマークのときやブログカードにあるページリンクの横にロゴを表示させると、オリジナルサイトであることがわかりやすくなります。

ロゴマークによって、自分のサイトを見つけてもらいやすくなりますね。

このロゴマークは、ファビコンと呼ばれています。

今回は、自分のサイトのファビコンをワードプレスでどのように作成し、設置できるのかについて書きたいと思います。

ファビコンはどんな風に表示されるの?

ファビコンは、サイトの主役ではありませんが、さりげなく表示されて、サイトのオリジナリティーを出したり、統一感を出したり、サイトを見つけやすくすることに役立ちます。

ファビコンが表示される場面

・ブックマークのアイコンとして

・パソコンで表示した時にウィンドウのタグ部分に

・ページのリンクにあるサイトアドレスの横にロゴマーク

ブログカード

ブログカード

など

タイトルやサイトアドレスの横に、オリジナルのロゴマーク(ファビコン)が表示されると、そのサイトの記事であることがわかりやすくなりますね。

シンプルで目立つデザインだとわかりやすい

オリジナリティを出したい部分ですが、とても小さく表示されることもあるので、シンプルなデザインの方がわかりやすく表示できます

沢山の文字を入れるよりも、1文字大きく表示するほうが読み取れる場合も少なくありません。

1文字に限らなくても大丈夫ですが、パッと見て、何と書いてあるか、あるいは全体のシルエットなどからわかるほうが効果的だと思います。

また、サイトを印象付ける色を選ぶと効果的ですよ。

イラスト作成アプリ

イラストを描くためのアプリを使うと、比較的簡単にファビコン用の画像を用意することができます。

例えば、アイビスペイントX などです。iPadでイラストを作ることができます。

アイビスペイントX
グラフィック/デザイン, エンターテインメント無料iOSユニバーサル

背景の色を選んだ後、文字を入力することもできますし、自分でイラストを描くこともできます。

750×750 サイズにしておくと、ちょうど正方形ですし、適度な画像サイズです。

画像が完成したら、保存しておきます。アップルタッチアイコン用に、PNG形式でも保存しておくといいですよ。

ファビコン設置方法

ワードプレスの場合

「外観」→ 「カスタマイズ」 → 「その他」を選択します。

「ファビコンを有効」にチェックを入れて、画像をここにアップロードします。

「アップルタッチアイコン」にもチェックを入れます。

設定

設定

続いて、アップルタッチアイコンの設定です。

下にスクロールしていくと、もう一つ画像を設置できるようになっています。

設定

設定

ここにも画像をアップロードしておきます。( .png 推奨と書かれているので、画像はpng タイプで保存いたものを使いましょう。)

「公開」ボタンをクリックして、設定を確定しておきましょう。

反映されるまでに時間がかかる

比較的早めに反映されることもありますが、ブックマークのアイコンになるまでに、多少の時間がかかります。

1〜2日ほど様子を見てみましょう

作成したファビコンが表示されると、とても嬉しくなりますよ。

ブログカードのサイトURLの横に表示されるアイコンは、直後〜数時間のうちに反映されることもあります

まとめ

ある程度の記事数がそろってきたら、ファビコンも設置してみてはいかがでしょうか。

イラストを描くのが得意ではない人でも、入力したフォント文字を使うこともできます

色なども工夫すると、自分のサイトだとわかりやすいアイコンにできますよ。

ファビコンができると、きちんとしたサイトに見えるので、さらにサイトを編集していくのが楽しくなりそうですね。

イラストや写真の関連記事

写真やイラストのおすすめフリー素材サイト
写真やイラストのおすすめフリー素材サイト
読まれるページにするには、質の高い文章がもちろん重要ですが、写真やイラストがあると、より読みやすくなります。 パッと全体を見たときに...

【レンタルサーバー】

オリジナルサイトを作るのにおすすめのサーバー

エックスサーバー

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク