HTML <head> 標籤 (Tag)

HTML 網頁中一定有一個 (也只會有一個) <head> 標籤 (tag)，<head> 是接在 <html> 下面的第一個標籤，而在 <body> 起始標籤前面結束。

<head> 標籤作用上是當作一個容器，裡面包含著不同用途的 HTML tags，而這些 tag 的內容通常不會被顯示在頁面上，僅用來說明關於該網頁的元資訊 (metadata)，像是指定網頁的標題，或像是指定該網頁所使用的編碼等。

<head> tag 使用上看起來會像這樣子：

<!DOCTYPE html>
<html>
  <head>
    <title>Page Head</title>
    <link href="page.css" rel="stylesheet">
  </head>
  <body>
    <!-- blah blah -->
  </body>
</html>

被包含在 <head> 裡面的標籤有這些：

<title> 網頁名稱
<meta> 網頁 metadata
<style> CSS 樣式
<link> CSS 樣式表
<script> JavaScript 程式碼
<noscript> 網頁不支援 JavaScript 時的處理
<base> base URL

設定網站圖示 (Favicons)

為了提升品牌識別度，我們需要在 <head> 中設定 Favicons。現代的最佳實踐是至少提供一個 .ico（相容舊版）與一個 .svg（支援無限縮放與深色模式）。

<!-- 現代瀏覽器推薦使用 SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<!-- 為了與老舊瀏覽器相容 -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- Apple 裝置專用圖示 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />