テーマカスタマイズ中

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

この記事は約9分で読めます。

サイト 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」がありました。

プラグインの特徴

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

設定前ステータス

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

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

私が行った設定手順

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

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

Favicon for iOS – Web Clip

様々なデバイスに対応!RealFaviconGenerator
Settings
設定した箇所日本語訳
Use the original favicon as is.元のファビコンをそのまま利用
Assets
設定した箇所日本語訳
Create all icons for iOS 7 and lateriOS 7以降の全てのアイコンを作成
Generate the corresponding precomposed icons対応する事前作成されたアイコンを生成
透過PNGをファビコンにすると透過部分が黒く塗りつぶされるので、その場合は「Add a solid, plain background to fill the transparent regions.」で調整。

Favicon for Android Chrome

様々なデバイスに対応!RealFaviconGenerator
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 ChromeAndroid Chromeの画像を選択
Apply a slight drop shadow…チェックにした方は「App name」「Theme color」の設定も忘れずに。
Androidは自動で角丸にならないので角丸にしたい場合、角丸版の画像を作成して「Dedicated picture」からアップロードすると良いですよ。

Windows Metro

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

macOS Safari

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

Favicon Generator Options

様々なデバイスに対応!RealFaviconGenerator
設定した箇所日本語訳
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だと文言が出た時点で分からなくなっちゃいました…( ・`ω・´)ナンダト!?
一応赤色を示す警告表示はなかったのでそのままやり取り終わりましたけど、
下記、ツイートの意味を把握できている方がいましたら教えてくださいお願いしマウス。
ツイート内の投稿日付をクリックすると細かいやり取りが確認できます。


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

プラグインなしでも利用できる

プラグイン利用する方法で紹介していますが、プラグインなしでも直接サイト上から生成して利用する事もできるので、WP含めてブログ or サイトでも設置する事ができます。



記事で紹介したプラグイン



がちょぴんコメント

これがWPでできたら最高だけど…


( ・ω・o)o<[パンッ!] 記事終わり

記事の更新履歴

記事を公開しました。

コメント