HTML 網站圖標
- 王林原創
- 2024-09-04 16:48:111190瀏覽
Favicon 是收藏夾圖標的縮寫形式，也稱為書籤圖標，可以定義為帶有.ico 文件擴展名的小徽標，而不是通常在地址欄中看到的任何其他.bmp 或.gif 文件經常訪問的URL 的個人化圖像，有助於廣告、促銷或作為標準商標製作，同時在google、Facebook 等網站中發揮著重要作用，我們在地址欄左側注意到了一個小徽標，專業的外觀以及出現在用戶收藏夾書籤中，並且沒有圖標圖標，該網站仍然是通用網頁圖標，並作為收藏夾圖標的快捷方式而受到青睞。
範例即時範例如下圖所示。點擊書籤中的收藏夾會顯示典型圖示。甚至一些使用 XML 的 Web 服務和搜尋引擎也使用 favicon，因為它們具有獨特性。
文法：
下面給出了主要元標記以連結到網頁。
<link rel="icon" href="image path" type="image/icon type">
在上面的語法中，您將圖像路徑替換為 favicon.ico 的實際位置，您可以將其放置在圖像目錄中。最後一個值類型是 MIME 格式檔。您可以在這裡使用任何類型的圖像，但我們認為 GIF 格式更高級。
如何建立 HTML Favicon？
網頁設計師創建他們的個人化圖示並將其與網頁相關聯。支援網站圖示的瀏覽器將其顯示在其特定的網址列中，透過兩種方式實現這一點。其次，它在下一個連結中以選項卡式文件介面顯示。最重要的是，即使是從硬碟中選擇的圖標，也必須使用 (.ico) 檔案格式。有一些免費服務可以轉換圖像。
開發人員完成網站設計後，他們會加入網站圖示。簡而言之，它用官方網頁圖示取代了瀏覽器標籤上的空白文件圖示。這使得用戶能夠使網站更易於訪問或找到更易於訪問的網站。最受歡迎的搜尋引擎 Google 透過其徽標主題給用戶留下深刻印像或產生認同。由於圖標太小，用戶應該能夠清楚地理解。建立網站圖示有多種方法。方法1 – 使用檔案總管自動生成，方法-2：上傳常規映像。
建立 favicon.ico 的步驟。這是一個簡單的著陸過程：
- 產生尺寸為 16 x 16 像素的影像（影像辨識）。在這裡，您可以調整圖像大小，使其變小以用作圖標。
- 轉換為 favicon.ico 檔案格式以便瀏覽器理解。
- 將產生的圖示上傳到網站。
- 下一步是將程式碼加入 HTML。您甚至可以使用圖示作為桌面或 Apple 圖示。
如何在 HTML 檔案中插入 Favicon？
您也可以使用 .gif 或 .png 格式建立具有透明背景的圖示。可能會出現這樣的問題：為什麼我們需要圖標？答案非常簡單：在全球範圍內對我們的網站進行品牌推廣和行銷。小圖示讓網頁顯得更專業。您將網站圖示新增至 HTML 檔案中，該檔案必須具有特定的特徵。您可以隨時新增或變更網站上的圖示。
- 檔案格式的標準名稱：建立並命名映像後，預設有一個 favicon.ico（使用 X-ICON 編輯器完成的 ICO 檔案）。
- 圖片檔案大小：16 * 16、64 * 64、128 * 128 像素，檔案大小不超過 100KB。
- 顏色：也許8口，24或32口
- 圖片： 應為 gif 或 png 格式。
圖示位於
和 之間。元素並替換圖像位置。它使用定義檔連結的連結標籤。它使用兩個屬性：rel 和 href。我們可以使用帶有插件的 Photoshop 和其他線上產生器將圖像檔案轉換為 .ico 格式。圖示位置路徑：這是標準實作。
<link rel=" icon" ……….../> // It installs variety of icons. <link rel =" Shortcut icon" href=……….../> // here in the link attribute shortcut installs its own address bar icon.
下一個程式碼用於IOS使用者：
<link rel =" apple-touch -icon" sizes ="180 x 180 href=……….../>
以下是我們可以在 HTML 程式碼中使用的程式碼範例。
範例：
<!-- HTML code demo to display an icon in an address bar--> <!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> EDUCBA icon </title> <link rel = "icon" href =https://favi.png type = "image/x-icon"> </head> <body> <h1 style = "color:blue;"> EDUCBA Icon </h1> <p> Icon is added to the address bar </p> </body> </html>
輸出：
程式碼說明：我在上面的程式碼中建立了一個橢圓形小圖標，並將其轉換為favicon。我們注意到 Internet Explorer 中會顯示一個圖標，但許多瀏覽器不支援它。 IE 從根目錄取得圖示。如果不存在指定的路徑，HTML 檔案將顯示伺服器回應的 404 錯誤。您可能需要清空網站的快取才能更新網站圖標，因為網路瀏覽器會持續保留快取的網站圖標。
注意：雖然成功完成了圖示創建，但它並不在所有瀏覽器標籤中可見。與 Internet Explorer 5.0+ 和 Netscape 7.0+ 具有良好的兼容性。大多數現代瀏覽器都支援不同的圖形格式作為其圖示。當伺服器配置不當時就會出現問題：必須建立 type=“image/x-icon .ico 格式的根”。結論
最後，favicon標誌在網站開發中起著至關重要的作用，而且我們也看到了各種創建favicon的方法，從而實現跨瀏覽器的兼容性。此圖示有助於建立網域的視覺化規格。將它們添加到網站很容易，因為它們可以指導網站識別和品牌推廣，並支援網頁設計師展示他們的專業水平。
以上是HTML 網站圖標 的詳細內容。更多資訊請關注PHP中文網其他相關文章！