PWA index.html icon

正常logo圖片快速轉換

(已經測試過快速/精確方法)

• Figma 做好圖片
  記得要確認export後是正方形的 很重要!!

• otimizer image(jpeg/png)

  • https://tinypng.com/

• tranform to icon

  • https://favicon.io/favicon-converter/

• adding all images in project_folder/public/

project_folder/public/android-chrome-512x512.png
project_folder/public/android-chrome-192x192.png
project_folder/public/apple-touch-icon.png
project_folder/public/favicon.icon
project_folder/public/favicon-16x16.png
project_folder/public/favicon-32x32.png

例子 (https://barrystone.github.io/playerlist/)

• manifest.json

  ​​​​​​​ {
  ​​​​​​​   "short_name": "NBA roster",
  ​​​​​​​   "name": "NBA Roster",
  ​​​​​​​   "icons":[
  ​​​​​​​     {
  ​​​​​​​       "src": "favicon.ico",
  ​​​​​​​       "sizes": "64x64 32x32 24x24 16x16",
  ​​​​​​​       "type": "image/x-icon"
  ​​​​​​​     },
  ​​​​​​​     {
  ​​​​​​​       "src":"android-chrome-192x192.png",
  ​​​​​​​       "sizes":"192x192",
  ​​​​​​​       "type":"image/png"
  ​​​​​​​     },
  ​​​​​​​     {
  ​​​​​​​       "src":"android-chrome-512x512.png",
  ​​​​​​​       "sizes":"512x512",
  ​​​​​​​       "type":"image/png"
  ​​​​​​​     }
  ​​​​​​​   ],
  ​​​​​​​   "start_url": ".",
  ​​​​​​​   "display": "standalone",
  ​​​​​​​   "theme_color": "#BBBBBB",
  ​​​​​​​   "background_color": "#BBBBBB"
  ​​​​​​​ }
  

• index.html

  ​​​​​​  //不用這段，才能設定manufest的 "theme_color":""( address bar的顏色 慢手機)
  ​​​​​​  <!-- <meta name="theme-color" content="#000000" /> -->
  ​​​​
  ​​​​​​  <meta
  ​​​​​​    name="description"
  ​​​​​​    content="NBA roster quick checking tool"
  ​​​​​​  />
  
  ​​​​​​  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
  ​​​​​​  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
  ​​​​​​  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
  ​​​​​​  <!-- <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest"> -->
  ​​​​​​  <!-- <link rel="manifest" href="%PUBLIC_URL%/site.json"> -->
  
  ​​​​​​  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  

ICON ( !!!還有錯誤，後來例子又出問題，以下可能全錯 這個版本只有分頁左邊的icon是透明的) 其實好像全部都正方形透明就可以達成我要的效果，別那麼麻煩了..

以下的照片後裸發現不是正方形
是舊版的，新的已經是正方形圖片，沒問題了

android-chrome-512x512.png
android-chrome-192x192.png
apple-touch-icon.png (還不太確定，沒測試過)

• add screen 後手機桌面顯示的圖片
• 最好是背景不要透明且是正方，才有辦法飽滿整個icon，不會出現白色外框的現象
• 例:
  
  
  
  
  

---

favicon.icon

• 手機打開app到完成時，出現的icon
• 可搭配 "background_color": ""(此時的背景顏色) 來決定背景要不要透明
• 例:(icon黨沒辦法上傳，範例app我是用 透明的， 跟下面的圖片長一樣)

---

favicon-16x16.png
favicon-32x32.png

• 網頁最初始的icon，每分業左邊的icon
• 看你想怎麼搭(透不透明)
• 例:(透明)

備註

---

有上面這些就不重要了

• 192 pixels or 512 pixels (原廠習慣SIZE)

  可以用小畫家調 (canvas)