# 網頁圖標和觸摸圖標

在發布網站時，最重要的整理工作之一是如何在瀏覽器的用戶界面或移動主屏幕上表現您的網站。

本文會提到：

1. 網頁圖標
2. 觸摸圖標
3. 圖像資產
4. 上傳圖標

## 網頁圖標

大多數瀏覽器都使用Favicons來代表網站在瀏覽器標籤和書籤中。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FbCc8Euu92ek7zOVHOy1x%2Fimage.png?alt=media\&token=27edfe3f-d8d7-434e-b655-42876fa17d81)

## 觸摸圖標

觸摸圖標或Webclips用於Safari瀏覽器的書籤等地方。\
當網站連結被保存到智慧手機的主屏幕上時，它們也會顯示出來。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FwTrSSikBtA2E6YX7mFAK%2Fimage.png?alt=media\&token=f9ee2d8b-ce0f-4090-bc92-c79a68b42062)

## 圖像資產

在準備上傳網路圖標圖像資產時，創建一個32x32像素的圖像作為收藏夾，以及一個256x256像素的圖像作為網路圖標或觸摸圖標。

您在這些圖像資產中使用的文件名將在您的HTML中可見，所以要注意不要在文件名中包含任何您不希望被搜索引擎索引的內容。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FCjpqtdJAf2F2yx2Pli2O%2Fimage.png?alt=media\&token=24b14bbf-30f3-4dea-bfde-64fa38edc9c9)

## 上傳圖標

準備好您的圖像資產之後：

1. 進入項目設置 > 常規標簽 > 圖標
2. 上傳準備的圖片
3. 發布網站，使其變化生效
4. 在瀏覽器中刷新的您實時網站，以看到更新的圖標