HTML - 網站圖示

網站圖示代表 **收藏夾圖示**，它是與特定網站相關聯的小圖示，通常顯示在瀏覽器的位址列、標籤或書籤中。HTML 允許我們在網頁中新增網站圖示，以便在瀏覽器標籤上網頁標題附近顯示我們業務的徽標。

新增網站圖示的語法

以下是將網站圖示新增到網頁的語法。

<head>
   <link rel="icon" 
         href="link/to/icon" 
         type="image/x-icon">
</head>

什麼是 HTML 網站圖示？

**網站圖示** 是一個表示您的網站的小圖片，幫助使用者在多個標籤、書籤和搜尋結果中識別它。它可以採用各種格式，例如 ICO、PNG、GIF、JPEG 或 SVG，但 ICO 是最廣泛支援的格式。如果您曾經訪問過某個網站並在瀏覽器標籤中注意到頁面標題旁邊有一個小圖示，那麼您就看到了網站圖示。

在上圖中，我們可以看到 TutorialsPoint、Facebook 和 Google 的網站圖示，在每個標籤頂部的紅色矩形中突出顯示。

將網站圖示新增到網頁的步驟

要新增網站圖示，我們需要按照下面提到的這些簡單步驟操作

**步驟 1：** 建立或選擇網站圖示的圖片。其常用大小可以是 16x16 畫素或 32x32 畫素。有一些線上工具可以幫助我們建立網站圖示，例如 Favicon.io 和 ionos.com。

**步驟 2：** 儲存並將網站圖示圖片上傳到網站目錄。確保圖片必須採用瀏覽器可以識別的格式，例如 PNG、GIF 或 ICO。

**步驟 3：** 現在使用 **<link>** 元素，它告訴瀏覽器在哪裡可以找到網站圖示圖片。請記住，**<link>** 標籤位於 HTML 文件的頭部部分，即 **<head>** 元素內部。

示例

以下示例說明了如何建立 HTML 網站圖示。我們使用 PNG 圖片格式。

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
   <link rel = "icon" 
         type = "image/png" 
         href = "images/faviconTP.png">
</head>

<body>
   <h1>Adding Favivon</h1>
   <p>
      This is an example of including 
      favicon to the web page.
   </p>
   <p> 
      Favicon will be displayed in the browser 
      tab to the left of the page title.
   </p>
</body>
</html>

輸出

如果您在本地執行程式碼，上述 HTML 程式碼將產生以下結果。

網站圖示尺寸列表

網站圖示有很多尺寸。

網站圖示尺寸	用途
32x32	桌面瀏覽器
57x57	Mac ios
76x76	蘋果 iPad
96x96	Google TV
120x120	iPhone Retina 觸控式螢幕
128x128	Chrome 網上應用商店，Windows 8* 螢幕
144x144	Internet Explorer 10 Metro
152x152	蘋果 iPad
167x167	蘋果 iPad
180x180	蘋果 iPhone
192x192	Google 開發者應用
195x195	Opera 快速撥號
196x196	Android Chrome 主頁
228x228	Opera Cast 圖示

不同瀏覽器對不同網站圖示檔案格式的支援

下表列出了不同瀏覽器支援的各種網站圖示檔案格式

瀏覽器	GIF	PNG	JPEG	SVG	ICO
Chrome	是	是	是	是	是
Edge	是	是	是	是	是
Safari	是	是	是	是	是
Firefox	是	是	是	是	是
Opera	是	是	是	是	是

注意：主要瀏覽器不支援網站圖示的尺寸屬性。

列印頁面