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…」の後、しばらくすると表示状況が確認できます。
画像作成や設定が必要なため意外と手順が多く、その割には目立たない存在ですがブラウザのタブ部分やブックマーク時に違いがでますので設定しておくことをお勧めします。
Leave a Reply