様々なデバイスに応じたFaviconの生成と設定が簡単にできる：Favicon by RealFaviconGenerator
Web ブラウザーで保存したブックマークを見ると、
サイト名の横にそのサイトをイメージしたアイコンが表示されています。
そのアイコンの事を favicon（ファビコン）といいます。
Favourite + Icon の俗称で、Web サイトのシンボルマークとして、
サイト運営者が配置しています。
WordPress サイトで favicon を設定していないと WordPress 標準のものが設定されます。
折角サイトを運営してるのだから、専用の favicon を設定したいですよね。
そのような時に便利な WordPress 用プラグインがあります。
それは「Favicon by RealFaviconGenerator」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
Favicon by RealFaviconGenerator
Favicon by RealFaviconGenerator は、様々なデバイスに応じた Favicon の生成と設定が簡単にできます。
- デスクトップブラウザ
- iPhone/iPad
- Android
- Windows 8.1 or 10 のタイル
記事を作成もしくは更新時点でのバージョン：v 1.3.11
マルチサイトでの利用:可
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Favicon by RealFaviconGenerator – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Favicon by RealFaviconGenerator」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Favicon by RealFaviconGenerator を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「外観」メニューの中に追加されています。
使い方
favicon として使用したい画像を選択します。
選択したら「Generate favicon」ボタンをクリックします。
そうすると favicon の生成のための準備作業が自動的に開始されます。
作業が完了すると favicon 生成設定画面が表示されます。
Favicon for iOS – Web Clip
iPhone と iPad のホーム画面に表示するファビコンに関する設定ができます。
Settings
iPhone と iPad のホーム画面では、ファビコンの角は丸みが付きます。
プレビューで確認しながら、余白や背景の色を設定できます。
Use the original favicon as is.
元のファビコンをそのまま使用するか
Add margins and a plain background.
余白と背景を追加するかを選択します。
Background color Tip: You can pick a color directly from the preview.
背景色を指定できます。
Margin size (for a 57×57 icon)
マージンサイズを指定できます。
Assets
iOS 7 and Later
Create all icons for iOS 7 and later
iOS 7 以降のすべてのアイコンを作成するかどうか
iOS 6 and Prior
Create all icons for iOS 6 and prior
iOS 6 以前のすべてのアイコンを作成するかどうか
Miscellaneous
In the HTML, declare only the icon with the highest resolution
HTML上では、最高解像度のアイコンのみを宣言します
Generate the corresponding precomposed icons
対応する事前作成されたアイコンを生成します。
Dedicated picture
マスター画像が iPhone と iPad で上手く表示されない場合には、
iOS 用として別途画像を送信できます。
Favicon for Android Chrome
Android 端末のホーム画面に表示するファビコンに関する設定ができます。
Main settings
No change, keep the master picture as it is.
変更する必要がないので、マスター画像をそのまま使用するか
Add margins and a plain background.
余白と背景を追加するかを選択します。
Background color
背景色を指定できます。
Margin size (for a 96×96 icon)
マージンサイズを指定できます。
Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube…).
公式 Googleアプリ（Gmail、Playストア、YouTubeなど）のようなドロップシャドウを適用するか
App name
アプリ名を入力します。
Theme color
テーマカラーを設定します。
Options
Browser. In this mode, when the user clicks the link, Android Chrome behaves as if the page was opened like any regular web site.
ブラウザモード。このモードでは、ユーザーがリンクをクリックすると通常のウェブサイトとして開かれたかのように動作します。
Standalone. In this mode, Android Chrome gives a little more “native" style to the opened page. In particular, it lets you enforce the start URL and screen orientation. It also remove the navigation bar and gives your web site its own tab in the task switcher.
スタンドアロンモード。このモードでは、開始 URL と画面の向きを強制できます。また、ナビゲーションバーが削除され、Web サイトにタスクスイッチャーの独自のタブが表示されます。
Start URL Typically, your homepage. Use this field to override the URL of the bookmarked page.
Orientation
開始 URL を入力します。ブックマークされたページの URL を上書きできます。
Not specified. Android Chrome will behave as it usually does when the user rotates his/her device.
指定なし。ユーザーがデバイスを回転させると通常動作します。
Force screen orientation to Portrait.
画面の向きを「ポートレート」に強制します。
Force screen orientation to Landscape.
スクリーンの向きを[ランドスケープ]に強制します。
Assets
Android Chrome 39 and later
Android Chrome 39 以降
Create only recommended, high resolution icons
推奨される高解像度のアイコンのみを作成します。
Create all documented icons
ドキュメント化されたすべてのアイコンを作成します。
Legacy versions
Android Chrome 38 and prior
Android Chrome 38 以前
Declare the icon in the HTML code If you don’t, Chrome uses the Apple Touch icon
HTMLコードでアイコンを宣言します
Dedicated picture
マスター画像が Android 端末で上手く表示されない場合には、
Android 端末用として別途画像を送信できます。
Windows Metro
Windows 8 と 10 のタイルとして表示する際のファビコンに関する設定ができます。
Settings
タイルの背景色を選択することもできます。
Assets
Windows 8.0 / IE 10
Windows 8.0 / IE 10 用のファビコンを設定します。
Medium, square icon, declared with two HTML markups
2 つの HTML マークアップで宣言された中くらいの四角形のアイコンを表示するか
Windows 8.1 and 10 / IE 11 and Edge
Windows 8.1 および 10 / IE 11 および Edge 用のファビコンを設定します。
Small, square icon
Medium, square icon
Big, square icon
Rectangular icon
Dedicated picture
マスター画像が上手く表示されない場合には、
Windows 用として別途画像を送信できます。
macOS Safari
Mac OS の Safari で表示するファビコンに関する設定ができます。
Settings
Turn your picture into a monochrom icon. Play with the threshold to get the best result.
写真をモノクロのアイコンに変えます。しきい値を同時に指定できます。
No icon. Safari uses the first letter of your domain name to create a default icon. You should use this option if your site absolutely needs to be W3C compliant.
アイコンなし。Safari はドメイン名の最初の文字を使用してデフォルトのアイコンを作成します。
Theme color
テーマカラーを指定します。
Dedicated picture
マスター画像が上手く表示されない場合には、
Safari 用として別途画像を送信できます。
Favicon Generator Options
Favicon Generator のオプション設定ができます。
Version/Refresh
No app name, let the browser offers the page title by default.
新しいウェブサイトです。キャッシングの問題も無い場合に選択します。
Specific app name, override the page title.
ウェブサイトはすでに公開中で、新しい favicon にしたい場合に選択します。
Compression
圧縮率の設定ができます。
Scaling algorithm
スケーリングアルゴリズムを設定できます。
App name
No app name, let the browser offers the page title by default.
アプリケーション名なし、デフォルトでブラウザにページタイトルを提供させます。
Specific app name, override the page title.
特定のアプリ名、ページタイトルを上書きする
favicon生成するには
上記の設定が済んだら「Generate your Favicon and HTML code」ボタンをクリックします。
Favicon の生成とサイトへの Favicon 設定が済んだ画面です。
このプラグインを無効化すると設定した Favicon も無効化されます。
設定されている Favicon の各デバイスでのイメージが表示されています。
このボタンをクリックすると、Favicon のチェックができます。
設定
生成メニュー以外にダッシュボードの「設定」メニューの中に設定用のメニューが追加されています。
RealFaviconGenerator がバージョンアップされたときに通知を受け取るかどうか。