以前にもファビコン設定に関する記事を書いています。あれから早いもので2年が経過し、現時点で不要になったり、または再考したほうが良い点なども出てきました。というわけで2022年版 (ノﾟｪﾟ)
FC2ブログで必要な記述は3つ
Wordpressなどでは「4つ」と書きますが、FC2ブログでは「3つ」
FC2ブログでは svgファイル と jsonファイル のアップロードが許可されていませんので、それを除いての3つです。また、Windowsのスタート画面ピン留めも不要と判断して除いています。
svgファイルについて、現時点では各ベンダーの取り扱いにばらつきがありますが、今後は svgが一番便利 という方向に傾いていくと思いますので、FC2ブログでもsvg拡張子のアップロードが開放されると良いな、と思います (∵`)
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><!-- iPhone用 -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"><!-- Android用 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico"><!-- 16px, 32px, 152px, 180px, 192px のマルチアイコン -->これまでは小さな小さなファビコンを設定するために、20も30も画像をアホほど準備しなければいけない、という感じでした。2022年現時点では随分と整理され、個人的にはこれで十分だと思います。
上記の雛形内では画像アドレスを ルートパス で書いてありますけれども、FC2でこの方法は使えませんので、各URLの 書き換え必須 です。
* ルートパス = 最上位階層からのディレクトリを段階的に示すので、ルートディレクトリ(最上位階層)が共通でなければならない(FC2ブログの画像はルートが異なるため使えません)
ここからはそれぞれのファビコン画像に関するコツや注意点など。
iPhoneとAndroidでは形状を変える。背景をつける。
サンプルに利用する画像は以下の通りです。
いい加減に作ってしまったので、円形の下部分が欠けてますがご容赦ください ^^;
透過の状態がわかるように、画像が表示されているボックスに背景色を付けています。それぞれの画像がそれぞれの環境でどのように表示されるか見ていきます。
ブラウザ タブ
- 背景透過は有効
- 個人のブラウザカスタマイズ状況によって、タブ自体の背景色がまちまちで模様が入ることもある
背景透過画像の場合、ブラウザタブの色や背景によってはオブジェクト(この場合はハート)が不明瞭になります。予め画像の方に背景が付いている場合には、オブジェクトがタブと近似色であっても視認性を確保できます。ただしファビコン背景色がタブ背景色と同一またはその近似色の場合は、円になっている・いない等は不明になります。ファビコンで最も重要なのは「オブジェクト」である、と割り切ることも大事です。円にならなければ成り立たないデザインはできるだけ避けた方が良いでしょう。
iOS ホーム画面
- 背景が透過されている場合は自動的に「黒」背景が追加される
- 角丸(border-radius)強めの四角形で表示される
iOSの場合は 背景付き四角形の一択 です。ファビコン側の背景色が「黒」の場合のみ対象外になりますが、iOS側の付け足し背景色がずっと黒とは限らない ので、付けておいた方が賢明です。でもまぁずっと黒だとは思うけど(笑)
iOSアイコンの角丸の状態についても、今は強めだとしても今後もっと弱いものに調整される可能性はあります。
Android ホーム画面
- 背景透過は有効
- ホームの背景によってはホーム上の各種アイコンが不明瞭になる
iOSが自動的に黒背景を追加する理由は「ホームに設定された背景画像とアイコンとの視覚区分」です。その区分を行わないAndroidの場合は、ファビコンへの背景設定必須 と思った方が良いかもしれません。あるいはファビコンにドロップシャドウを付けておくとか。ドロップシャドウでの区分効果は薄いため、やはり背景確保がおすすめです。
また、角丸にしたい場合はファビコン背景側での操作が必要です。
Google 検索結果
- 自動で「白」背景が付く
- ダークモードに注意が必要
説明便宜上「円形」のみファビコン背景色を変更しました。
検索結果側に自動で「白」の背景が付くわけですから、円形処理されていればサンプルのような形になります。「線描画」「ベタ塗り」は辺とオブジェクトがくっついていると見栄えが悪いのでバツにしました。また、円形のみならず角丸が付いているとダークモードでおかしな見た目になりますのでバツ。
検索結果については 背景色つき角丸なし四角形一択 と言って良いでしょう。
注意点を踏まえたおすすめ設定
あくまでも「FC2ブログ」を考えた場合です。svgのアップロードさえできれば割とどうにでもなる。でもFC2ではできないので、総合的には以下の形がおすすめです。
- 全て背景色付き角丸なし四角形にする
- 振り分ける
四角形を想定し、オブジェクトが明瞭に見える背景色をつける。背景に角丸をつけない。これが最もおすすめかつ最も簡単な方法です。
振り分ける場合は、
- iOS用(apple-touch-icon-180x180) --- 背景色付き角丸無し「四角形」
- Android用(android-chrome-192x192) --- 背景色付きで「四角形」または「角丸四角形」または「円形」
- 検索結果, ブラウザタブ用(favicon.ico) --- 背景色付き角丸無し「四角形」
あくまでも「FC2ブログ」での個人的なおすすめであって、WEB全般に通づるものではないのでその点ご承知おきください。そして他にも色んな対策はあります。例えば背景色を「黒」にしておけば円形ファビコンでもiOSホーム画面で上手いこと表示される、とか。私の場合はそうしています(全て黒背景付き円形)。そして検索結果のダークモードについては変な見た目だけれども無視しています(笑)
マルチアイコン作成
<!-- 16px, 32px, 152px, 180px, 192px のマルチアイコン --> について。ディスプレイ毎に解像度が違い、高解像度ディスプレイ(高dpi)では大きめ画像が必要ですよ、という啓蒙を何度か行っています。
スマートフォンで画像がぼやける際の対処と画像容量削減 スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀)
そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...
vanillaice000.blog.fc2.com
ファビコンにも同じことが言えます。マルチアイコンというのは、ディスプレイ解像度による出し分けを行うためのものです。通常ディスプレイなら 16 × 16 で、２倍の解像度なら 32 × 32 で、3倍なら〜 と、ディスプレイに見合ったサイズで表示させることができます。以下のサイトで簡単に作成できます。拡張子は .icon です。
必要なファイル
- 16pxのpng
- 32pxのpng
- 152pxのpng
- 180pxのpng
- 192pxのpng
マルチアイコン作成。無料で透過マルチアイコンが作れます。
マルチアイコンが簡単に作れます。使い方はとってもシンプル。画像を指定するだけ。
5サイズで作成すれば万全ですが、面倒な方は以下のサイトで一括作成し、フォルダ内の favicon.ico ファイルをそのまま利用しても良いと思います。こちらで作成されるサイズは以下の通りです。
- 16px
- 24px
- 32px
- 48px
様々なファビコンを一括生成
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計な404 not foundを記録させない対策としても有効。
本記事に沿ったファビコン設定に必要なファイルはフォルダ内の
- /apple-touch-icon-180x180.png
- /android-chrome-192x192.png
- /favicon.ico
です。FC2ブログにファイルアップロードをし、絶対パス(httpsから始まって拡張子まで省略なしのURL)を、雛形のURLと差し替えて記載します。ファイル名は書き換えずそのまま利用した方が管理しやすいと思います。
記述場所はテンプレートhtmlの </head> の直前に。記載位置は必ず守るようにしてください ね。
There are no comments yet.