新型瀏覽器可讓您輕鬆自訂特定元件 (例如圖示、網址列顏色)，甚至新增自訂圖塊等項目。這些調整可以提高參與度並吸引使用者回訪網站。
新型瀏覽器可讓您輕鬆自訂特定元件 (例如圖示、網址列顏色)，甚至新增自訂圖塊等項目。這些調整可以提高參與度並吸引使用者回訪網站。
提供優質圖示和資訊方塊
當使用者造訪您的網頁時，瀏覽器會嘗試從 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 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's gist 提供
變更狀態列外觀
您可以將預設狀態列的外觀變更為 black 或 black-translucent。使用 black-translucent 時，狀態列會浮動於全螢幕內容上方，不會向下推。這會給版面配置的高度，但會擋住頂端。所需程式碼如下：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent 的螢幕截圖
black 的螢幕截圖