wordpress-favicon

サイト構築

 

【WordPressの使い方】ファビコンの設定

 

ファビコンは、タブやアドレスバーに表示されるサイトアイコンのことで、この表示によって、ユーザーは「視覚的」にサイトを認識することが出来るので、とても重要な役割を担っています。

ここでは、ファビコンの一般知識をザックリと解説したうえで、ファビコンを簡単に設置できる方法をご紹介します。




ファビコンとは

ファビコンとは、タブやブックマークなどに表示されるサイトアイコンのことで、サイトのブランディングやユーザビリティの向上に役立てることが出来ます。

wordpress-favicon-

wordpress-favicon-2

ファビコンの基本知識

ファビコンに使う素材

ファビコンのサイズ

ファビコンは、ブラウザやデバイスによって表示(サイズ)が異なるので、基本的には以下のサイズを用意する必要があります。

  • 16×16ピクセル(IEのタブ)
  • 32×32ピクセル(Chrome・Firefox・Safariなどのタブ)

ファビコンのファイル形式

ファビコンは、背景に色がついていると不自然なので、画像ファイルの拡張子が「png」や「gif」など、背景が透過する画像(ファイル形式)を作成するのがポイントになります。

なお、ファビコンを設置する際は、基本的にはファイルの拡張子が「ico」(マルチアイコン)の形式でアップロードする必要があります。

この点は、他のファイル形式をicoファイルに変換するオンラインジェネレーターもあるので、自分でファビコン画像を作成する際は、以下の無料ツールを有効に活用しましょう。

FavIcon Generator
マルチアイコン作成
ファビコン favicon.icoを作ろう!

ファビコンの作成

ファビコンは、ペイントソフトなどを使ってオリジナルのものを作成することが理想ですが、そこまで手間をかけたくない方は、フリー素材を活用した方法をおススメします。

ファビコン作成におススメのフリー素材サイトは、次の2サイトになります。

  1. ICOON MONO
  2. freefavicon.com

1.ICOOON MONO

icooon-mono-vert1

『ICOOON MONO』は、シンプルで洗練されたアイコン素材を6000以上ストックしているフリー素材サイトで、色やサイズを指定してダウンロードすることが出来ます。

ICOOON MONO

2.freefavicon.com

wordpress-freefavicon1

『freefavicon.com』は、ファビコン用のアイコン素材を13000以上ストックしているフリー素材サイトで、オンラインで素材を編集できる「アイコンメーカー」も備えています。

freefavicon.com

ファビコンの設置

ファビコンは、テーマファイルに直接追記したりプラグインを使って設置するともできますが、ここでは、WordPessの基本機能を使った設置方法をご紹介します。

この方法を利用すれば、お好みの画像(512×512ピクセル以上の正方形)を用意すればいいだけなので、icoファイルの作成やテンプレートの編集が不要です。

WordPressのサイトアイコン機能

これは、「WordPress 4.3」以降に実装された機能で、画像をアップロードするだけで簡単にファビコンを設置することが出来る機能です。

[外観]メニューにある[カスタマイズ]を開きます。

wordpress-favicon-5

[サイト基本設定・ロゴ画像]を開きます。

wordpress-favicon-6

メニューを下にスクロールし、「サイトアイコン」の項目にある[画像を選択]をクリックして、ファビコンに使う画像(512×512ピクセル以上の正方形)を選択します。

wordpress-favicon-7

プレビューを確認し、よければ[公開]をクリックして設定を保存します。

wordpress-favicon-10

これで、ファビコンの設置が完了です。
「Webページのタブ」と「ブックマーク」の両方にきちんと表示されました。

wordpress-favicon-13

 

スポンサーリンク

関連記事

  1. wordpress-search-engine-index
  2. wordpress-popular-posts

    サイト構築

    【高速化】WordPress Popular Postsは重い?初期設定を見直して軽量化しよう!

    WordPressを運用していると、記事をランキング表示してくれる『W…

  3. updraftplus

    サイト構築

    【バックアップ】初心者におすすめ!復元も簡単なプラグイン『UpdraftPlus』

    基本的には、自動バックアップがあるサーバーを利用してる場合、サーバー側…

  4. wordpress-media-size1

    サイト構築

    【WordPressの使い方】画像の自動生成を停止してサーバーの負担を軽減

    WordPressでは、画像をアップロードすると、その画像サイズのほか…

  5. shutterstock_373050517-sitemap

    サイト構築

    【サイトの地図】サイトマップを作成してユーザビリティとSEOを向上しよう

    Webサイトは、ページが増えて規模が大きくなればなるほど、その構成や構…

  6. wordpress-theme-install

    サイト構築

    【WordPressの使い方】テーマのダウンロード&インストール

    WordPressは、無料のテーマから有料のテーマまで、たくさんのWo…

最近の記事

  1. shutterstock_573396265-bousai
  2. shutterstock_713835478-ticket-resale-law
  3. shutterstock_1115483624-Relationship
  4. shutterstock_580655965-shutterstock-use
  5. shutterstock_126336395-stock-photo-service
  6. shutterstock_570628189-copyright-watermark
  7. shutterstock_373050517-sitemap
  8. shutterstock_413924539--search-console-analytics-cooperation
  9. google-analytics-introduction
  10. google-search-console
PAGE TOP