如何在網站上添加圖標 iPhone、iPad 和 iPod Touch

Favicon.ico-瀏覽器中的網站圖標

之前,它推出了一個網站,並添加一個圖形文件, 網站圖標,以顯示在瀏覽器中的地址欄。 在大多數情況下,收藏夾圖標是圖形徽標的縮略圖或相應網站的縮寫。 添加此圖標可以幫助用戶快速識別書籤中的網址。

Stealth Settings 網站圖標
Stealth Settings Safari中的Favicon
網站圖標在Opera
網站圖標在Opera

直到最近,這個文件還是必須成形。”的favicon.ico”,由網絡瀏覽器識別。 Chrome,互聯網 Explorer,Opera,Safari,Firefox等。
幾年來,隨著新的推進網絡語言, HTML5 si CSS3,網站圖示可以是一個 PNG文件 。JPG。 的條件是在網站上的該首標, 之前,成為這一行:

iOS 網站圖標 - iPhone、iPad 和 iPod Touch

In iOS 我們可以添加 網頁快捷方式 pe 主屏幕CPC iPhone, iPad的 si iPod的觸摸.

如何在網站上添加快捷方式 iPhone、iPad 和 iPod 主屏幕

我們通過打開一個網頁來做到這一點 iPhone (Safari、Chrome 等互聯網瀏覽器),單擊帶有箭頭的方塊(iOS 中“共享”的符號),然後單擊選項Add 到主屏幕“。

如果網站已設置圖標您的瀏覽器,但不能設置 iOS設備特定圖標的網站,屏幕上會出現一個圖標組成的 圖片預覽 網頁。

如何添加網頁圖標 iPhone、iPad 和 Android。

所述第一個步驟是 創建一個圖像圖標出現在 主屏幕中國共產黨的iDevice社區。 對於網頁圖標上的所有設備,並清楚地看到兼容,我們必須創造形象 對於所有決議 iPhone 和 iPad.

分辨率和標準圖標大小 iPhone、iPad、iPod 和安卓

  • 經典款 iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod 視網膜 = 120 × 120
  • iPad視網膜= 152×152
  • iPhone 6 / 6S 加 = 180 × 180

Apple 定期更新 建議圖標大小網站 應用 si 網頁 pe 此頁.

對於設備Android,圖標是兩個方面:

  • Android經典版= 128×128
  • 具有高分辨率(高分辨率)的Android = 192×192
圖標

製作完圖像後,將其上載到Web服務器上以及網站的HTML源中,然後關閉,添加了以下幾行:

<link href=”/apple-touch-icon.png“ rel =”apple-touch-icon” /> <link href=”/apple-touch-icon-76×76.png“ rel =”apple-touch-icon” sizes =” 76×76''/> <link href=”/apple-touch-icon-120×120.png“ rel =”apple-touch-icon” sizes =” 120×120''/> <link href=”/apple-touch-icon-152×152.png“ rel =”apple-touch-icon” sizes =” 152×152''/> <link href=”/apple-touch-icon-180×180.png“ rel =”apple-touch-icon” sizes =” 180×180''/>

對於設備 Apple,.PNG圖片名稱和“ rel =“必須包含前綴”apple-”。 對於Android,文件名將為“圖標hires.png“和”圖標normal.png“ With rel =”圖標“。

並非絕對需要為每種分辨率創建圖像。 您可以使圖像分辨率最高,而分辨率較低的設備會識別該圖像並將其設置為圖標。

iPhone-網站-圖標

該網站的快捷方式圖標看起來類似於任何 對於iOS應用程序.

如何 » iHowTo » iHowTo - iOS » 如何在網站上添加圖標 iPhone、iPad 和 iPod Touch

對技術充滿熱情,我喜歡測試和編寫有關操作系統的教程 macOS, Linux, Windows, 關於 WordPress, WooCommerce 和配置 LEMP 網絡服務器 (Linux、NGINX、MySQL 和 PHP)。 我寫在 StealthSettings.com 自 2006 年以來,幾年後我開始撰寫 iHowTo.Tips 教程和有關生態系統中設備的新聞 Apple: iPhone,iPad, Apple 手錶,HomePod, iMac, MacBook、AirPods 和配件。

發表評論