Favicon by RealFaviconGeneratorは、ファビコンとアイコンを一括生成して表示できるWordPressプラグインです。PC、iOS、Androidなど、様々なOSのWebブラウザのファビコンとホームスクリーンのアイコンを表示できます。
このプラグインを利用すると、様々なOSや画面サイズの端末のファビコンやアイコンに対応できます。
設定は1つのアイコン画像を登録するだけなので簡単です。
ファビコンはWebブラウザの「お気に入り」に登録した際に表示されるアイコンです。
Webサイトのシンボルマークの役割があります。
お気に入りに登録した際に見た目も良くなるので活用しましょう。
目次[閉じる]
広告
はじめに
このプラグインが優れていること
- Webブラウザのファビコンとホームスクリーンのアイコンを表示できる。
PC、iOS、Androidなど、様々なOSやWebブラウザに対応している。 - 設定は1つのアイコン画像を登録するだけなので簡単。
- ファビコンの登録画面でプレビューが表示される。
事前にファビコンの表示内容を確認できる。
対応OS・Webブラウザ
- Windows（IE、Chrome、Firefox、Opera、Safari）
- Mac（Safari、Chrome、Firefox、Opera、Camino）
- iOS（Safari、Chrome、Coast）
- Android（Chrome, Firefox）
- Surface（IE）
詳しくは、下記の互換性一覧表をご覧ください。
Compatibility
Compatibility test results of the RealFaviconGenerator favicon set
realfavicongenerator.netファビコンとは？
ファビコン（favicon）とは、WebサイトのシンボルマークとしてWebサイトに表示するアイコンのことです。Webブラウザで「お気に入り」に登録する際に、Webサイトのシンボルマークとして表示されます。
ちなみに、語源はフェイバリット・アイコン（favorite icon）を短縮してファビコンと呼ぶようになりました。
インストール方法
管理画面から検索してインストールしてください。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールしてください。
- WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞
「Favicon by RealFaviconGenerator」で検索 - 「wordpress.org」からダウンロード
Favicon by RealFaviconGenerator
PC / Mac、iPhone / iPad、Android搭載端末、Windows 8タブレットなど、すべてのプラットフォーム向けにfaviconを作成してインストールします。
WordPress.org 日本語広告
プラグインの使い方
管理画面の場所
プラグインの管理画面は下記の場所にあります。
WordPress管理画面 ＞ 外観 ＞ Favicon
ファビコンの登録手順
このプラグインは、RealFaviconGeneratorのWebサイトに接続してファビコンの登録を行います。
ファビコンの登録が完了すると、プラグインの管理画面に戻ります。
画像のアップロード
まずはじめに、自分で作成したアイコン画像をアップロードします。
Webサイトのシンボルマークとなる図形の画像を登録しましょう。
画像の推奨サイズは「260×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は、ファビコンとアイコンを表示できるWordPressプラグインです。PC、iOS、Androidなど、様々なOSのWebブラウザのファビコンとホームスクリーンのアイコンを一括して生成できます。
ファビコンは、Webブラウザの「お気に入り」に登録した際に表示されるアイコンです。Webサイトのシンボルマークの役割があります。お気に入りに登録した際に見た目も良くなるので活用しましょう。
コメント Comments
コメント一覧
コメントはありません。