---
title: PWA index.html icon
tags: Web Dev
---

# 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)~~