favicon を修正する。

[Milly]

現状

• favicon.ico:
  • 画像:
  • ファイル形式: png (拡張子と違う)
    • 16x16
  • MIMEタイプ: image/vnd.microsoft.icon (実際の形式と違う)
• apple-touch-icon.png:
  • 存在しない。

提案

• favicon.ico:
  • 画像: スマホアプリと合わせて「ボ」にする
  • ファイル形式: ico (MSマルチアイコン形式)
    • 16x16, 32x32, 48x48 を1ファイルに同梱
  • MIMEタイプ: image/vnd.microsoft.icon (現状のまま)
• apple-touch-icon.png:
  • 新規に追加する
  • ファイル形式: png
    • 180x180 (iOS用)
    • 192x192 (Android用)

HTMLサンプル

<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

[Milly]

ついで

• Mac OS Safari 用に mask-icon svg 形式も作る。

<link rel="mask-icon" href="/icons/safari-icon.svg" color="#00B7B7" />

[yajiuma]

mask-iconの詳細plz... どうやって使われるものなんだ。
https://wayohoo.com/mac/beginners/how-to-set-icons-for-pinned-tabs-for-safari.html
しか文献見つからなかったのだけど、これSafariの Pinned page にしか使われないものなの？

[yajiuma]

アイコンを「ボ」にするか「V」にするか議論については、ちょっと悩んでる。
「HOMEに登録」でアイコン化した時、iOSアプリ等と同じアイコンになるのは避けたい。
Webは「V」、アプリケーション群は「ボ」の方向でVIの差別化を図りたいというのが本意。

[Milly]

mask-iconの詳細plz... どうやって使われるものなんだ。
https://wayohoo.com/mac/beginners/how-to-set-icons-for-pinned-tabs-for-safari.html
しか文献見つからなかったのだけど、これSafariの Pinned page にしか使われないものなの？

Yes

[yajiuma]

でもSafariの Pineed Tab に使われるアイコン、普通にfaviconっぽいのよね…。使い分けがわからん…。mask-iconがある場合は優先的に使われるのだろうか。

[sugi]

関連だなので別チケットにせずにここにつなげるけど、 twitter card の設定をして置いたほうが良いと思う。
現状 twitter に URL 貼ると寂しい
https://cards-dev.twitter.com/validator
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards