様々なデバイスに対応!RealFaviconGenerator

サイト or ブログを個性的な印象を持たせる為の「ファビコン」ですが、
ブラウザ・スマホだけ設定していれば問題ないと思っていたところ、
気付けば色々なデバイスが登場して、そのデバイスのファビコンを設定する事ができると知った。

元々WP標準機能に「サイトアイコン」からファビコン追加・設定できますが出力されるタグは、

<link rel="icon" href="cropped-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="cropped-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="cropped-icon-180x180.png">
<meta name="msapplication-TileImage" content="cropped-icon-270x270.png">

ファビコン 32×32px
ファビコン 192×192px
アップルタッチアイコン 180×180px
MicroSoft アプリケーションタイルイメージ 270×270px

上記4つで標準機能でも十分だけどPC・スマホ以外の端末でもちゃんと設定しようと思いまして。
でも、各デバイスに応じてファビコンを作成・設定、面倒くさい…と思ってプラグインを調べたら「Favicon by RealFaviconGenerator」がありました。

プラグインの特徴
設定前ステータス
私が行った設定手順
Favicon for iOS – Web Clip
Favicon for Android Chrome
Windows Metro
macOS Safari
Favicon Generator Options
設定後ステータス
プラグインなしでも利用できる
記事で紹介したプラグイン
がちょぴんコメント
記事の更新履歴

プラグインの特徴

ファビコンの圧縮
ファビコンの拡大・縮小
タイル(Windows 8以降に表示される)
固定タブアイコン(OS X El Capitan Safari 9から利用可能)
生成ページにプレビューがあるので確認しながら設定ができる

目次に戻る

設定前ステータス

設定する前にまずは現在のファビコンがどうなっているのかステータスを確認しましょう。
URL入れてチェックをすると…はい…赤い部分があるのは対応されていないという事です。

目次に戻る

私が行った設定手順

WP デフォルトファビコンの推奨サイズは512ですが、このプラグインの推奨サイズは260以上です。
現在のファビコンがどうなっているのか、下記のサイトからドメイン入れてチェックをします。
ステータスを確認したらWP管理画面→[設定]→[Favicon]→「Select from the Media Library」から画像選択して【Select from the Media Library】クリック。
下記の画像が設定全体の項目になり、どうしても設定する数が多いと感じてしまうかもしれませんが、実際私が設定した項目は下記の通りになります。

目次に戻る

Favicon for iOS – Web Clip

Settings
設定した箇所	日本語訳
Use the original favicon as is.	元のファビコンをそのまま利用
Assets
設定した箇所	日本語訳
Create all icons for iOS 7 and later	iOS 7以降の全てのアイコンを作成
Generate the corresponding precomposed icons	対応する事前作成されたアイコンを生成

透過PNGをファビコンにすると透過部分が黒く塗りつぶされるので、その場合は「Add a solid, plain background to fill the transparent regions.」で調整。

目次に戻る

Favicon for Android Chrome

Main settings
設定した箇所	日本語訳
Apply a slight drop shadow, similar to official Google apps (Gmail, Play Store, YouTube…	公式のGoogleアプリ(Gmail,Playストア,YouTubeなど)に似た、わずかなドロップシャドウを適用
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.	ブラウザ。このモードでは、ユーザーがリンクをクリックすると、Android Chromeは、ページが通常のウェブサイトのように開かれたかのように動作
Assets
設定した箇所	日本語訳
Android Chrome 39 and later Create only recommended, high resolution icons	推奨される高解像度のアイコンのみを作成する
Dedicated picture
設定した箇所	日本語訳
Pick picture for Android Chrome	Android Chromeの画像を選択

Apply a slight drop shadow…チェックにした方は「App name」「Theme color」の設定も忘れずに。
Androidは自動で角丸にならないので角丸にしたい場合、角丸版の画像を作成して「Dedicated picture」からアップロードすると良いですよ。

目次に戻る

Windows Metro

Settings
設定した箇所	日本語訳
Use a white silhouette version of the favicon. Works well with pictures with significant transparent regions.	白いシルエットのファビコンを使用してください。重要な透明領域を持つ画像でうまく動作します。
Dedicated picture
設定した箇所	日本語訳
Pick picture for Windows	Windowsの画像を選択

目次に戻る

macOS Safari

Settings
設定した箇所	日本語訳
Turn your picture into a monochrom icon. Play with the threshold to get the best result.	写真を白黒のアイコンに変えてください。最高の結果を得るには、しきい値を調整してください。
Dedicated picture
設定した箇所	日本語訳
Pick picture for Safari pinned tab	Safari固定タブの画像を選択

目次に戻る

Favicon Generator Options

設定した箇所	日本語訳
Version/Refresh 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.	ウェブサイトはすでに制作中であり、多くの人がすでにそれを訪れています。来場者に私の新しいファビコンを見てもらいたい。古いものではない。
Compression Average quality, average compression factor	圧縮

目次に戻る

設定後ステータス

設定完了前のステータス酷かったけど設定完了後は、
警告を示す赤色から緑色に変わっているのが分かりますね！
青色を示すのが疑問だったので公式Twitterで聞いたのですが、
APIだと文言が出た時点で分からなくなっちゃいました…( ･`ω･´)ﾅﾝﾀﾞﾄ!?
一応赤色を示す警告表示はなかったのでそのままやり取り終わりましたけど、
下記、ツイートの意味を把握できている方がいましたら教えてくださいお願いしマウス。

ツイート内の投稿日付をクリックすると細かいやり取りが確認できます。

@RealFavicon Hellow. When you use the "Favicon by RealFaviconGenerator" plug-in, two favicon.ico are generated on the desktop version, but is it specification that are created in the plug-in directory and the root directory?
— がちょぴん (@iriereggaemuzik) 2018年4月1日