※ アフィリエイト広告を利用しています
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)
詳しくは、下記の互換性一覧表をご覧ください。
How RealFaviconGenerator code and pictures behave on various platforms
ファビコンとは?
ファビコン(favicon)とは、WebサイトのシンボルマークとしてWebサイトに表示するアイコンのことです。Webブラウザで「お気に入り」に登録する際に、Webサイトのシンボルマークとして表示されます。
ちなみに、語源はフェイバリット・アイコン(favorite icon)を短縮してファビコンと呼ぶようになりました。
インストール方法
管理画面から検索してインストールして下さい。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールして下さい。
- WordPress管理画面 > プラグイン > 新規追加 >
「Favicon by RealFaviconGenerator」で検索 - 「wordpress.org」からダウンロード
PC / Mac、iPhone / iPad、Android搭載端末、Windows 8タブレットなど、すべてのプラットフォーム向けにfaviconを作成してインストールします。
広告
プラグインの使い方
管理画面の場所
プラグインの管理画面は下記の場所にあります。
WordPress管理画面 > 外観 > Favicon
ファビコンの登録手順
このプラグインは、RealFaviconGeneratorのWebサイトに接続してファビコンの登録を行います。
ファビコンの登録が完了すると、プラグインの管理画面に戻ります。
画像のアップロード
まずはじめに、自分で作成したアイコン画像をアップロードします。
Webサイトのシンボルマークとなる図形の画像を登録しましょう。
画像の推奨サイズは「260x260ピクセル」またはそれ以上の画像サイズです。
プレビュー&設定画面
iOS、Android、Windows8の画面にどのように表示されるかをプレビューで確認できます。
設定項目が沢山ありますが、名前や配色を指定するくらいです。
一番下にある生成ボタンをクリックすると、ファビコンとHTMLが生成されます。
設定完了
設定が完了すれば、現在登録されているファビコンが表示されます。設定は以上です。
WebブラウザであなたのWebサイトを確認してください。ファビコンが表示されているはずです。
ヘッダーに生成されるHTMLの例
このプラグインを利用すると、下記HTMLコードがヘッダーに生成されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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サイトのシンボルマークの役割があります。お気に入りに登録した際に見た目も良くなるので活用しましょう。