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-ssl

    サイト構築

    【SSL化】データの暗号化(http⇒https)でサイトの信頼性を向上しよう

    従来の「http」は、データをそのまま送受信していますが、「https…

  2. wordpress-theme-type

    サイト構築

    【WordPressの使い方】テーマの種類と選び方(おすすめテーマの特徴)

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

  3. wordpress-table-of-contents

    サイト構築

    【WordPewss】記事の目次を自動生成!プラグイン『Table of Contents Plus…

    みなさんは、WEBサイトやブログに「目次」を設置されているでしょうか?…

  4. shutterstock_373050517-sitemap

    サイト構築

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

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

  5. wordpress-user-profile

    サイト構築

    【WordPressの使い方】プロフィールの設定でセキュリティを強化

    WordPressでは、インストールの時に設定したユーザ名(ID)が、…

  6. wordpress-ssl-etc

    サイト構築

    【SSL化】サーバーでSSLの申込み&設定が済んだ後に必要な作業

    ここでは、WEBサイトをhttps(SSL)化する一連の作業の中でも、…

最近の記事

  1. shutterstock_573396265-bousai
  2. shutterstock_713835478-ticket-resale-law
  3. shutterstock_580655965-shutterstock-use
  4. shutterstock_126336395-stock-photo-service
  5. shutterstock_570628189-copyright-watermark
  6. shutterstock_373050517-sitemap
  7. shutterstock_413924539--search-console-analytics-cooperation
  8. google-analytics-introduction
  9. google-search-console
  10. paypal
PAGE TOP
テキストのコピーはできません。