web跨平臺圖示和瀏覽器顏色自定義
現代瀏覽器讓您能夠輕鬆地定製特定元件，如圖示、位址列顏色，甚至允許新增自定義磁貼等物件。這些簡單的改進可提升吸引力，吸引使用者再次訪問您的網站。
提供出色的圖示和磁貼
當用戶訪問您的網頁時，瀏覽器會嘗試從 HTML 提取圖示。圖示可能出現在許多地方，包括瀏覽器標籤、最近的應用切換、新的（或最近訪問的）標籤頁面等。
提供高質量的影象將使您的網站更具辨識度，讓使用者更容易發現您的網站。
為充分支援所有瀏覽器，您需要向每個頁面的 <head> 元素新增幾個標記。
<!-- icon in the highest resolution we need it for --> Chrome 和 Opera
Chrome 和 Opera 均使用 icon.png
注：圖示大小應基於 48px，例如 48px、96px、144px 和 192px
Safari
Safari 還使用帶有 rel 屬性的 <link> 標記：apple-touch-icon。
您可以指定顯式尺寸，即為每個圖示提供單獨的連結標記，防止作業系統調整圖示的大小：
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" Internet Explorer 和 Windows Phone
Windows 8 的新主螢幕體驗可支援 4 種不同固定網站佈局，因此需要 4 個圖示。 如果您不想支援特定尺寸，則可以省去相關的元標記。
<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 的元主題背景色
要指定 Android 版 Chrome 的主題背景色，請使用元主題背景色。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">在 Chrome 中定製位址列的主題顏色
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-translucent 的螢幕截圖
black-black
使用 black 的螢幕截圖
