資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 在標題欄新增圖示徽標？
在 HTML 中將圖示徽標新增到網站標題欄。標題欄的圖示通常稱為 favicon（“收藏夾圖示”的縮寫）。它顯示在瀏覽器選項卡、書籤和歷史記錄中。
什麼是 Favicon？
一個favicon 是一個與網站或網頁關聯的小型 16x16 或 32x32 畫素影像。它用於顯示您公司、品牌或網站的視覺表示。它幫助使用者在多個開啟的選項卡中快速識別您的網站或公司名稱。
在標題欄新增圖示徽標的步驟
建立和新增圖示徽標（Favicon 徽標）到網站共有三個步驟。
- 建立您的品牌/網站圖示影像（徽標）
- 將圖示轉換為正確的格式（PNG、SVG 或 ICO）
- 使用 HTML 將 Favicon 新增到您的網站
步驟 1：建立您的品牌/網站圖示影像
首先，您需要建立要用作 favicon 的圖示影像。此 favicon 影像應簡單且在小尺寸下易於識別。favicon 的常用格式包括 PNG、ICO 和 SVG。
步驟 2：將圖示轉換為正確的格式
您可以使用多種格式的 Favicon，但 .ico 檔案是最傳統且支援最廣泛的格式。使用多種格式以確保跨不同瀏覽器的相容性。
步驟：使用 HTML 將 Favicon 新增到您的網站
將 favicon 影像以正確的格式準備好後，您可以透過在 HTML 文件的 <head> 部分中連結它來將其新增到您的網站。
在標題上新增圖示徽標的示例
在以下示例中，我們使用了兩種不同的 favicon 格式。
您需要在本地執行這些程式碼以檢查標題欄上的 favicon。
示例 1
在此示例中，我們將使用 ICO 格式。<link rel="icon" href="favicon.ico" type="image/x-icon"> 用於連結 ICO 格式的 favicon。將 favicon.ico 檔案放在網站的根目錄中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding ICO Format Favicon</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
</body>
</html>
示例 2
在此示例中，我們將使用 PNG 格式。<link rel="icon" href="favicon.png" type="image/png"> 用於連結 PNG 格式的 favicon。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding PNG Favicon</title>
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
</body>
</html>
多種格式的 Favicon
為了獲得最佳相容性，您可以包含多種 favicon 格式。您可以看到多個 favicon 的連結。
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.png" type="image/png"> <link rel="icon" href="favicon.svg" type="image/svg+xml">
Apple Touch 圖示
您可以使用更大的圖示作為 Apple 主螢幕觸控圖示。這將有助於在 Apple 裝置上獲得更好的支援。
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
622 次瀏覽
