在現代瀏覽器中，您可以輕鬆自訂特定元件，例如圖示、網址列顏色，甚至新增自訂圖塊。這些簡單的調整可提高參與度，並吸引使用者再次造訪您的網站。
新式瀏覽器可讓您輕鬆自訂特定元件 (例如圖示和網址列的顏色)，甚至新增自訂圖塊等。這些簡單的調整能提高參與度，吸引使用者回訪您的網站。
提供優質圖示和圖塊
使用者造訪網頁時，瀏覽器會嘗試從 HTML 擷取圖示。這個圖示可能會顯示在許多位置，包括瀏覽器分頁、最近使用的應用程式切換、新的 (或最近造訪的) 分頁等。
提供高品質圖片可讓網站更容易辨識，讓使用者更容易找到您的網站。
為了完整支援所有瀏覽器，您必須在每個網頁的 <head> 元素中加入幾個標記。
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome 和 Opera
Chrome 和 Opera 使用 icon.png，裝置會將其縮放至必要大小。如要避免自動調整資源配置，您也可以指定 sizes 屬性，提供額外的尺寸。
Safari
Safari 也會使用 <link> 標記，並搭配 rel 屬性：apple-touch-icon 表示主畫面圖示。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
180 像素或 192 像素的正方形不透明 PNG 檔案最適合用於加入蘋果圖示。
不建議透過 sizes 屬性加入多個版本。先前，iOS 專用 Safari 會考慮使用 -precomposed 關鍵字來避免加入視覺效果，但自 iOS 7 起並非必要。
Internet Explorer 和 Windows Phone
Windows 8 的新主畫面體驗支援四種不同的固定網站版面配置，並需要四個圖示。如果不想支援特定大小，可以省略相關的 Meta 標記。
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer 中的資訊方塊
Microsoft 的「固定網站」和旋轉「即時資訊方塊」的功能遠超出其他實作項目，並不在本指南的涵蓋範圍內。如要進一步瞭解如何建立動態資訊方塊，請參閱 MSDN 的這篇文章。
為瀏覽器元素著色
您可以使用不同的 meta 元素自訂瀏覽器，甚至是平台的元素。請注意，部分擴充功能可能僅適用於特定平台或瀏覽器，但可大幅提升使用體驗。
Chrome、Firefox OS、Safari、Internet Explorer 和 Opera Coast 可讓您為瀏覽器元素定義顏色，甚至可使用中繼標記定義平台。
Chrome 和 Opera 的 Meta 主題顏色
如要指定 Android 版 Chrome 的主題顏色，請使用元主題顏色。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 專屬樣式
Safari 可讓您設定狀態列的樣式，並指定啟動圖片。
指定啟動映像檔
根據預設，Safari 會在載入期間和多次載入應用程式先前狀態的螢幕截圖時顯示空白畫面。您可以透過 rel=apple-touch-startup-image 新增連結標記，告知 Safari 顯示明確的啟動圖片，避免發生這種情況。例如：
<link rel="apple-touch-startup-image" href="icon.png">
圖片必須設為目標裝置螢幕的特定大小，否則無法使用。詳情請參閱 Safari 網頁內容規範。
雖然 Apple 的相關文件不多，但開發人員社群已找到一種方法，可使用進階媒體查詢來選取適當的裝置，然後指定正確的圖片，進而指定所有裝置。以下是實際可行的解決方案，內容由 tfausak 的 Gist 提供
變更狀態列外觀
您可以將預設狀態列的外觀變更為 black 或 black-translucent。使用 black-translucent 時，狀態列會浮動在全螢幕內容上方，而不是將其推下。這會讓版面配置的高度增加，但會遮住頂端。以下是必要程式碼：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent 的螢幕截圖
black 擷取螢幕截圖