Yuta.NET

透過処理されたfaviconがEdgeで不完全な形で表示される


なかなかハマった...orz
当サイトは何も考えずにマルチアイコンを採用しましたが、
Microsoft Edgeだけ表示がおかしいぞ?って気が付いて色々試して解決できたので記載します。
(注:全てが同じ方法で直るとは限りませんので悪しからず)

[favicon情報]

  • 拡張子:ico
  • マルチアイコン(48px, 64px, 128px, 256px)
  • サイズ:約100KB
  • 透過処理あり

[環境]

  • Microsoft Edge
  • Internet Explorer 11
  • Chrome 81

[現象]

  • Edgeのタブがアクティブ時に透過部分が不完全な形で表示されてしまう

結論から言うとマルチアイコンが悪さをしていました。
色々試した結果、マルチアイコンがダメ!!何してもマルチアイコンだとダメでした(他に方法があるかもですが...)
調査に疲れたのでシングルアイコンに変更することで解決しました。

しか~し、転んでもただは起きませんw
スマホのGoogleの検索結果でfaviconを表示できることを知ったので
Google推奨のサイズ(px)に作り直した(48px)のでその内表示されるのを楽しみにしています。