Favicon by RealFaviconGeneratorは、ファビコンとアイコンを一括生成できるプラグインです。PC、iOS、Androidなど、様々なOSのWebブラウザのファビコンとホームスクリーンのアイコンを一括して生成できます。

このプラグインを利用すると、様々なOSや画面サイズの端末のファビコンやアイコンに対応できます。設定は1つのアイコン画像を登録するだけなので簡単です。

ファビコンは、Webブラウザの「お気に入り」に登録した際に表示されるアイコンです。Webサイトのシンボルマークの役割があります。お気に入りに登録した際に見た目も良くなるので活用しましょう。

はじめに

このプラグインが優れている点

  1. Webブラウザのファビコンとホームスクリーンのアイコンを一括生成できる。PC、iOS、Androidなど、様々なOSやWebブラウザに対応している。
  2. 設定は1つのアイコン画像を登録するだけなので簡単。
  3. ファビコンの登録画面でプレビューが表示されます。事前にファビコンの表示内容を確認できる。

対応OS&Webブラウザ

  1. Windows(IE, Chrome, Firefox, Opera, Safari)
  2. Mac(Safari, Chrome, Firefox, Opera, Camino)
  3. iOS(Safari, Chrome, Coast)
  4. Android(Chrome, Firefox)
  5. Surface(IE)

詳しくは、下記の互換性一覧表をご覧ください。

RealFaviconGenerator 互換性一覧表

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Favicon by RealFaviconGenerator」で検索
  2. WordPress.org からダウンロード

ファビコンとは?

ファビコン(favicon)とは、WebサイトのシンボルマークとしてWebサイトに表示するアイコンのことです。Webブラウザで「お気に入り」に登録する際に、Webサイトのシンボルマークとして表示されます。

ちなみに、語源はフェイバリット・アイコン(favorite icon)を短縮してファビコンと呼ぶようになりました。

プラグインの使い方

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 > 外観 > Favicon

ファビコンの登録手順

このプラグインは、RealFaviconGeneratorのWebサイトに接続してファビコンの登録を行います。ファビコンの登録が完了すると、プラグインの管理画面に戻ります。

画像のアップロード

まずはじめに、自分で作成したアイコン画像をアップロードします。Webサイトのシンボルマークとなる図形の画像を登録しましょう。

画像の推奨サイズは「260 x 260ピクセル」またはそれ以上の画像サイズです。

画像のアップロード

プレビュー&設定画面

iOS、Android、Windows8の画面にどのように表示されるかをプレビューで確認できます。

設定項目が沢山ありますが、名前や配色を指定するくらいです。一番下にある生成ボタンをクリックすると、ファビコンとHTMLが生成されます。

プレビュー&設定画面

設定完了

設定が完了すれば、現在登録されているファビコンが表示されます。設定は以上です。

WebブラウザであなたのWebサイトを確認してください。ファビコンが表示されているはずです。

設定完了

ヘッダーに生成されるHTMLの例

このプラグインを利用すると、下記HTMLコードがヘッダーに生成されます。

<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/uploads/fbrfg/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/wp-content/uploads/fbrfg/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/uploads/fbrfg/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/wp-content/uploads/fbrfg/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/uploads/fbrfg/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/uploads/fbrfg/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/uploads/fbrfg/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/uploads/fbrfg/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/wp-content/uploads/fbrfg/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/wp-content/uploads/fbrfg/manifest.json">
<link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/wp-content/uploads/fbrfg/mstile-144x144.png">
<meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

まとめ

Favicon by RealFaviconGeneratorは、ファビコンとアイコンを一括生成できるプラグインです。PC、iOS、Androidなど、様々なOSのWebブラウザのファビコンとホームスクリーンのアイコンを一括して生成できます。

ファビコンは、Webブラウザの「お気に入り」に登録した際に表示されるアイコンです。Webサイトのシンボルマークの役割があります。お気に入りに登録した際に見た目も良くなるので活用しましょう。

スポンサーリンク