Webサイトで必要な画像
favicon.ico
apple-touch-icon
ogp
favicon.ico
一つのファイルで複数サイズの画像を入れられる
16px*16px と 32px*32px が一般的?
ルートディレクトリにおいておけば自動で読み込んでくれる
head内に<link rel="icon" href="/favicon.ico" type="image/x-icon"> と書かなくてもよい。
apple-touch-icon
スマホのホーム画面に登録されたときに表示される
よくあるのは png 形式
サイズは180px*180px
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
ルートディレクトリにファイルを置く。
OGPイメージ
Twitter や Facebook などに共有されたときに展開されるイメージ
サイズは 1200px * 630px が最適とされてる。
要は1.91:1らしい。
code:sample.html
<!-- 以下のどちらか -->
<meta property="og:type" content="website"><!-- トップ -->
<meta property="og:type" content="artcle"><!-- トップ以外 -->
<!-- ページのURL -->
<!-- OGPイメージ:絶対パスで -->
<!-- サイト名 -->
<meta property="og:site_name" content="サイト名">
<!-- サイトの説明 -->
<meta property="og:description" content="サイトの説明">
<!-- Facebook 設定 -->
<meta property="fb:app_id" content="App-ID(15文字の半角数字)">
<!-- Twitter 設定 -->
<!-- 以下のどれか -->
<meta name="twitter:card" content="summary"><!-- 画像が正方形表示 -->
<meta name="twitter:card" content="summary_large_image"><!-- 画像が大きく横長 -->
<meta name="twitter:card" content="app"><!-- アプリ -->
<meta name="twitter:card" content="player"><!-- 動画 -->
<meta name="twitter:player" content="@Twitter ID"> 参考