Favicon by RealFaviconGenerator ファビコン設定用 WordPressプラグイン
投稿日:2017年2月18日/更新日:2017年2月18日
まずは設定する画像を用意
260ピクセル×260ピクセル以上推奨です。
当サイトでは以下の画像を作成しました。
目次
プラグインのインストール
WordPress管理画面のプラグイン「新規追加」の検索窓で以下を検索説明文
PC / Mac、iPhone / iPad、Android搭載端末、Windows 8タブレットなど、すべてのプラットフォーム向けにfaviconを作成してインストールします。
見つかったら「今すぐインストール」と「プラグインの有効化」を行います。
※プラグインのインストール方法は以下を参考にWordPressプラグインのインストール方法(管理画面から検索)
画像のアップロード
作成した画像を「メディア」→「新規追加」からアップロード
ファビコン・アイコンの設定
「外観」→「Favicon」に進みます。
![]()
「Master picture URL」欄の「Select from the Media Library」をクリック
![]()
さきほどアップロードした画像をクリックして「選択」
次に「Generate favicon」をクリック
![]()
Preparing the favicon editor… と表示されますのでしばらく待ちます。
Favicon for iOS – Web Clip
最初はiOSの設定 特に変更はしませんでした。
![]()
Favicon for Android Chrome
Android Chromeの設定
ここでは「Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube…). 」にチェックを入れサイト名を入力しました。
![]()
Windows Metro
Windows8やWindows10用の設定
Use this color (preferably, choose one suggested for the Windows Metro UI)
「Blue」を選択しました。
![]()
macOS Safari
特に変更はしませんでした。
Favicon Generator Options
オプション機能 ここではファビコンはキャッシュされるためアップデート時でファビコンURLにバージョンを付加する必要があり、何度かファビコンを変更しているため下を選択しました。
![]()
最後に「Generate your Favicons and HTML code」をクリック
![]()
「Creating the favicon…」の後、しばらくすると表示状況が確認できます。
![]()
画像作成や設定が必要なため意外と手順が多く、その割には目立たない存在ですがブラウザのタブ部分やブックマーク時に違いがでますので設定しておくことをお勧めします。











Web (14)
WordPress (30)
Mac (5)
Windows (15)
Browser (6)
CSS (4)
PC (2)
Android (2)
Twitter (1)
Web Material (7)




Leave a Reply