HTML 網站圖標 -html教學-PHP中文網

首頁

web前端

html教學

HTML 網站圖標

王林

Sep 04, 2024 pm 04:48 PM

htmlhtml5HTML TutorialHTML PropertiesHTML tags

Favicon 是收藏夾圖標的縮寫形式，也稱為書籤圖標，可以定義為帶有.ico 文件擴展名的小徽標，而不是通常在地址欄中看到的任何其他.bmp 或.gif 文件經常訪問的URL 的個人化圖像，有助於廣告、促銷或作為標準商標製作，同時在google、Facebook 等網站中發揮著重要作用，我們在地址欄左側注意到了一個小徽標，專業的外觀以及出現在用戶收藏夾書籤中，並且沒有圖標圖標，該網站仍然是通用網頁圖標，並作為收藏夾圖標的快捷方式而受到青睞。

範例即時範例如下圖所示。點擊書籤中的收藏夾會顯示典型圖示。甚至一些使用 XML 的 Web 服務和搜尋引擎也使用 favicon，因為它們具有獨特性。

HTML 網站圖標

文法：

下面給出了主要元標記以連結到網頁。

<link rel="icon" href="image%20path" 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="%E2%80%A6%E2%80%A6%E2%80%A6.../">   // 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%C2%A0" type="image/x-icon">


<h1 style="color:blue;">
EDUCBA Icon
</h1>
<p>
Icon is added to the address bar
</p>

輸出：

HTML 網站圖標

程式碼說明：我在上面的程式碼中建立了一個橢圓形小圖標，並將其轉換為favicon。我們注意到 Internet Explorer 中會顯示一個圖標，但許多瀏覽器不支援它。 IE 從根目錄取得圖示。如果不存在指定的路徑，HTML 檔案將顯示伺服器回應的 404 錯誤。您可能需要清空網站的快取才能更新網站圖標，因為網路瀏覽器會持續保留快取的網站圖標。

注意：雖然成功完成了圖示創建，但它並不在所有瀏覽器標籤中可見。與 Internet Explorer 5.0+ 和 Netscape 7.0+ 具有良好的兼容性。大多數現代瀏覽器都支援不同的圖形格式作為其圖示。當伺服器配置不當時就會出現問題：必須建立 type=“image/x-icon .ico 格式的根”。

結論

最後，favicon標誌在網站開發中起著至關重要的作用，而且我們也看到了各種創建favicon的方法，從而實現跨瀏覽器的兼容性。此圖示有助於建立網域的視覺化規格。將它們添加到網站很容易，因為它們可以指導網站識別和品牌推廣，並支援網頁設計師展示他們的專業水平。

以上是HTML 網站圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。