ファビコンとかタッチアイコンとかOGPとかAndroid版Chromeでのタブの色とかの設定
自分はしばらくこのコピペでやっていきます。
<!-- タッチアイコンの設定 --> <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon-192x192.png"> <!-- iOSのタッチアイコンのタイトルの設定 --> <meta name="apple-mobile-web-app-title" content=""> <!-- windows8,10でスタート画面にピン留めした時の設定 --> <meta name="msapplication-square70x70logo" content="small.jpg"> <meta name="msapplication-square150x150logo" content="medium.jpg"> <meta name="msapplication-wide310x150logo" content="wide.jpg"> <meta name="msapplication-square310x310logo" content="large.jpg"> <!-- OGPの共通設定 --> <meta property="og:type" content="website or article, etc."> <meta property="og:url" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:image" content="絶対パスで記述"> <!-- Twitterカードの設定 --> <meta name="twitter:card" content="summary_large_image"> <!-- Android版Chromeでのタブの色の設定 --> <meta name="theme-color" content="#000">
<!-- 以下は設定しなくてもいいと思ってる。Twitterのアカウントはあれば設定するかも --> <!-- OGPのサイト名の設定 --> <meta property="og:site_name" content="" > <!-- OGPのTwitterアカウントの設定 --> <meta name="twitter:site" content="@foobar >
ファビコンは設定しないで、ドキュメントルートにfavicon.icoを置いておくだけ（参考:普通のHTMLの書き方）。タッチアイコンも一行で十分。サイズは180pxでいいという話もあるけど、192pxのほうが数字が美しいので採用。タイトルが長くて切れてしまうようなら、iOSなら別途設定できる。
Windows8,10のスタート画面にWebサイトをピン留めできるのは知らなかった（参考:【2018年版】Webサイトのファビコンや各種アイコンの正しい設定方法 | Web Design Trends）。色の設定もできるけど画像を設定しておけば必要なさそうなので省略。必要なコードはマイクロソフトの公式（Build My Pinned Site）から生成できるけど、<meta name="application-name" content="">という設定はWebアプリケーション以外には使ってはいけないものらしく、使わないほうがいいと思う（参考:HTML5/ページ全般/meta要素 ウェブアプリケーション名を示す - TAG index）。ちなみにこの設定はAndroid版のChromeとEdgeのタッチアイコンのタイトルにも反映される。
OGPの設定もFacebookとTwitterで共通で使えるものは共通で設定。prefix属性も設定しなくても大丈夫そうなので省略。Twitterカードの設定はsummaryとsummary_large_imageがあるけど、専有面積的にsummary_large_imageでいいんじゃないかな…画像も共通で使えるし。OGP用の画像は1200x630以上が推奨されている。summaryにするならたぶん144×144で大丈夫（参考:ツイートにページ情報を表示する「Twitterカード（Twitter Cards）」を設定してみた | 株式会社グランフェアズ）。公式でOGPが確認できるツールは下記。
デバッガー - 開発者向けFacebook
Login on Twitter
最後にAndroid版Chromeでのタブの色も設定できるので必要なら設定して終わり。個人的には好きな設定。
一通りの確認はしたけど、もし間違ってたりしたら嫌なので検証お待ちしております。こうしたほうがいいんじゃないかという改善案も。
