このサイトはWordpressの標準テーマである「Twenty Seventeen」をカスタマイズして使っていますが、テーマの設定の中でサイトアイコンの設定という項目があります。
しかし、このサイトアイコンというところから画像を選んで設定しても次の4つしかhtmlのheadには書かれません。
<link rel="icon" href="https://bhcrusher1.net/wp-content/uploads/2017/01/cropped-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://bhcrusher1.net/wp-content/uploads/2017/01/cropped-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://bhcrusher1.net/wp-content/uploads/2017/01/cropped-icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://bhcrusher1.net/wp-content/uploads/2017/01/cropped-icon-270x270.png" />これだけではAndroid用アイコンやMacOSのSafari用アイコンが存在しません。そのためこのサイトではプラグインを使用してfaviconを設定しました。
使用プラグインは Favicon by RealFaviconGenerator です。
まずはじめにWordpressのテーマ側とFavicon by RealFaviconGeneratorの両方でfaviconが設定されてしまうため、上の画像のようにテーマ側のサイトアイコンを削除します。そしてFavicon by RealFaviconGeneratorをインストールし有効化します。そして設定からfaviconを選ぶとこのような画面が出てくるので「Appearance > Favicon」をクリックします。
次のページの「Master picture URL」というところでアイコンを指定し「Generate favicon」を押すとrealfavicongenerator.netに飛び、しばらくするとアイコンができこのような画面が出てきます。
ここから各設定項目の解説
・Favicon for iOS – Web Clip
（名前の通りiOSに関する設定）
【Settings】
・Use the original favicon as is. iOS will fill the transparent regions with black. （デフォルト）
（元のfaviconをそのまま使用します。 iOSは透過領域を黒で塗りつぶします。）
・Add a solid, plain background to fill the transparent regions.
（透明領域を塗りつぶすために、無地の平らな背景を追加します。）
通常はデフォルトの元のfaviconで問題ありません。iOSは透過pngをfaviconにすると透過部分が黒く塗りつぶされるので透過を無くすか、・Add a solid, plain background to fill the transparent regions.を選んで透過部分を塗りつぶしてください。
【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
（対応する事前構成済みのアイコンを生成する）
ここは私はCreate all icons for iOS 7 and laterとGenerate the corresponding precomposed iconsにも追加でチェックを入れました。iOS7以降用を作るようにすると、apple-touch-icon-152×152.pngといった様々なデバイスに合った解像度のアイコンが作られ、事前構成済みのアイコンを作るとiOS6以前で角を丸くする処理などがかからないアイコン（apple-touch-icon-precomposed.png）を作ることができます。
・Favicon for Android Chrome
（Android用Chromeに関する設定）
【Main settings】
・No change, keep the master picture as it is. （デフォルト）
（何も変更しない、元の画像そのまま）
・Add margins and a plain background.
（余白と背景色の追加）
・Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube…).
（GmailやPlayStoreやYouTubeなどのGoogle公式アプリに似た縮小と影を付ける）
【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.
（ブラウザ。 このモードでは、ユーザーがリンクをクリックするとAndroidChromeはページが通常のウェブサイトを開いたように動作します。）
・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. （デフォルト）
（スタンドアロン。このモードでは、AndroidChromeは開いているページをネイティブアプリのように表示します。 開始URLと画面の向きを強制することができます。 またナビゲーションバーが削除され、最近のタスク一覧にWebサイト独自のタブが表示されます。）
【Assets】
Modern versions
Android Chrome 39 and later
（Chrome39以降用の設定）
・Create only recommended, high resolution icons （デフォルト）
（推奨される高解像度のアイコンのみを作成する）
・Create all documented icons
（すべてのアイコンを作成する）
Legacy versions
Android Chrome 38 and prior
（Chrome38以前用の設定）
・Declare the icon in the HTML code
（HTMLコードのアイコンを宣言する。宣言しない場合ChromeはAppleTouchアイコンを使用する。）
Androidが一番設定項目が多いです。最初のMain settingsは無加工のアイコンをホーム画面に追加すると、ほかのアイコンより少し大きくなってしまうので、余白と背景色の追加か、Google公式アプリに似た縮小と影を付けるを選びましょう。この際Google公式アプリに似た縮小と影を付けるを選んだ場合、AppNameにサイト名を入れないとAndroidChromeでホーム画面に追加するときに空白になってしまいます。またTheme colorはAndroidChromeのアドレスバーの色を変えるための設定項目です。
Optionsのブラウザかスタンドアロンかは、このサイトのような普通のブログスタイルならブラウザで問題ないと思います。スタンドアロンを選んだ際の動作サンプルとしては不動産サイトのSUUMO(スーモ)をAndroidChromeでホーム画面に追加してから起動するとわかりやすいです。
Assetsは、このサイトではAndroidChrome38以前用にもチェックを入れました。数少ないとは思いますが未だにJellyBeanのAOSPブラウザなどの古いブラウザからアクセスする人がいないとも限らないので。
またiOSではホーム画面に追加したときにアイコンの角が自動で丸くなりますが、Androidだと角が丸くならないのでDedicated pictureのところからAndroid向けにあらかじめ角を丸くしたアイコンをアップロードしました。
・Windows Metro
（Windows8などのスタートタイルに設定するアイコン）
【Settings】
Transparent pictures make better tiles. Look at the sample on the left and check that your tile looks good. You can also choose the background of the tile.
（透明な画像はきれいなタイルになります。 左のサンプルを見て、あなたのタイルがよく見えることを確認してください。 タイルの背景を選択することもできます。）
Use this color (preferably, choose one suggested for the Windows Metro UI)
（この色を使用してください。Windows Metro UIに推奨されている色を選択することをお勧めします）
・Use the original favicon as is. （デフォルト）
（元のfaviconを使用）
・Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions. （透過情報を持つ画像時のみ表示される設定）
（白いシルエットのfaviconを使用。このサイトのようなアイコンでは真っ白になるため意味がない）
【Assets】
Windows 8.0 / IE 10
・Medium, square icon, declared with two HTML markups
（Windows8.0、IE10用にHTMLに設定を記述）
Windows 8.1 and 10 / IE 11 and Edge
These icons are declared in a dedicated browserconfig.xml file, generated along with the icons.
（Windows8.1以降、IE11、Edge用にbrowserconfig.xmlで記述）
・Small, square icon
（小さい正方形アイコン）
・Medium, square icon （デフォルト）
（中くらいの正方形アイコン）
・Big, square icon
（大きい正方形アイコン）
・Rectangular icon
（長方形アイコン）
SettingsではWindowsタイルの色を設定します。Assetsでは私はWin8.0/IE10用設定とMediumとBig iconにチェックを入れました。
・macOS Safari
【Settings】
・Use a silhouette of the original image. Works well with pictures with significant transparent regions. （透過情報を持つ画像時のみ表示される設定）
（元の画像のシルエットのアイコンを使用します。このサイトのようなアイコンでは真っ白になるため意味がない）
・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はドメイン名の最初の文字を使ってデフォルトのアイコンを作成します。 サイトがW3Cに完全に準拠している必要がある場合は、このオプションを使用する必要があります。）
このサイトのようなアイコンの場合はTurn your picture into a monochrom icon.を選び、良い感じになるようにスライダを動かして調節しました。
・Favicon Generator Options
【Path】 （Favicon by RealFaviconGenerator経由で設定している場合は表示されない）
I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site. Recommended. （デフォルト）
（faviconファイルをWebサイトのルートに配置します。 推奨。）
I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:
（Webサイトのルートにfaviconファイルを置くことはできません。 代わりにここに配置します。）
【Version/Refresh】
When a browser loads a favicon for the first time, it tends to cache it and to never load it again. When your web site is not new and you want to update your favicon, that can be a problem: your loyal visitors won’t notice the change. A workaround is to append a version to the favicon URLs as a query parameter.
（ブラウザが初めてfaviconを読み込むと、ブラウザはfaviconをキャッシュし、再度ロードすることはありません。 ウェブサイトが新規ではなくfaviconを更新したい場合、それは問題になる可能性があります。訪問者は変更に気付かないでしょう。 この問題を回避するにはfaviconのURLにクエリパラメータとしてバージョンを追加します。）
・This is a new web site, nobody visited it yet. So there is no “old” favicon and no caching issue. （デフォルト）
（これは新しいウェブサイトでまだ誰も訪れていないため、古いfaviconはなく、キャッシュの問題もありません。）
・The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one.
（ウェブサイトはすでに制作中であり、すでに多くの人が訪れています。 訪問者に古いものではなく新しいfaviconを見てもらいたい。）
私のサイトは制作してから日が浅く訪問者も少ないので新しいウェブサイトではないですがデフォルトのままにしました。将来faviconを更新するときは変えるかもしれません。
【Compression】
アイコン画像の圧縮。パーセント数が大きいほど圧縮率が高いが数キロバイトで誤差の範囲なのでオリジナルのままでも問題はない。
【Scaling algorithm】
画像の縮小方法をお好みで選ぶ。
【App name】
When adding a link to the home screen, the user can choose a caption. By default, this is the bookmarked page title, which is usually fine. However, iOS and Windows 8 let you override this default value.
（ホームスクリーンへのリンクを追加するとき、ユーザは名前を選択することができる。 デフォルトではこれはブックマークされたページのタイトルで通常は問題ありません。 ただしiOSとWindows 8ではこのデフォルト値を上書きできます。）
・No app name, let the browser offers the page title by default.
（アプリ名なし。デフォルトでブラウザにページタイトルが表示されます。）
・Specific app name, override the page title.
（特定のアプリ名、ページタイトルを上書きする）
設定が終わったら「Generate your Favicons and HTML code」をクリックすると自動でfaviconが設定されるので完成です。
Favicon by RealFaviconGeneratorではなく自分でFavicon Generator. For real.にアクセスして作成した場合はアイコンのzipとheadに張り付けるためのコードが表示されるのでコピーして貼り付けます。
コメント