お気に入りアイコンは、たまにしか作らないので毎回サイズを思い出せない。メモ程度に記載する。
１６ｐｘ～５１２ｐｘ
とりあえず、５１２ｐｘで作ってジェネレーターにかけて各種サイズを作るのが良いかな。
ファビコン(favicon)のサイズはどれが必要？作り方や設置方法も紹介：
https://kubogen.com/web-design-011/
Favicon Generator：
https://realfavicongenerator.net/
Free Favicon：
https://www.freefavicon.com/freefavicons/
種類サイズ
Internet Explorerのタブ16px × 16px
IE9の「ピン留め機能」24px × 24px
Chrome、Firefox、Safariなどのタブ32px × 32px
Windowsのサイトアイコン48px × 48px
高解像度のWindowsサイトアイコン64px × 64px
iOS、 Androidのホーム画面152px × 152px
WordPress512px以上 × 512px以上
従来のIE指定コード
<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>
高解像度ディスプレイ・異なるデバイス
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
iOSのホームスクリーン
<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-touch-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-touch-icon-76×76.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-touch-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-touch-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-touch-icon-144×144.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-touch-icon-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-touch-icon-180×180.png”>
AndroidのChrome
<link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-chrome-192×192.png”>
Windows タイル
<link rel=”manifest” href=”/site.webmanifest”>
<meta name=”msapplication-TileColor” content=”#da532c”>
<meta name=”msapplication-TileImage” content=”/mstile-144×144.png”>
<meta name=”theme-color” content=”#ffffff”>