お気に入りアイコン(favicon)を作ろう!

お気に入りアイコンは、たまにしか作らないので毎回サイズを思い出せない。メモ程度に記載する。

16px~512px

とりあえず、512pxで作ってジェネレーターにかけて各種サイズを作るのが良いかな。

ファビコン(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”>

コメントを残す