[研究]Favicon圖示、圖標、規格、透明背景
2023-01-06
********************************************************************************
Favicon - 維基百科，自由的百科全書
https://zh.wikipedia.org/zh-tw/Favicon
Favicon是favorites icon的縮寫，亦被稱為website icon（網站圖示）、page icon（頁面圖示）或urlicon（URL圖示）。Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將favicon顯示於瀏覽器的網址列中，也可置於書籤列表的網站名前，還可以放在標籤式瀏覽介面中的頁標題前。
最初，定義一個favicon的方法是將一個名為「favicon.ico」的檔案置於Web伺服器的根目錄下，Internet Explorer的我的最愛（即書籤）可以自動顯示該檔案。[1] 後來出現了一種更為靈活的方法，即使用HTML來為任何一個網頁指示其圖示所儲存的位置。這種方法是透過在頁面的<head>部分添加兩個link元件來實現的。這樣，任何一個適當大小的（16×16像素或更大）的圖像都可以用作favicon。儘管如此，多數情況下仍然使用ICO格式。其他網頁瀏覽器現在也支援PNG（可攜式網路圖片）格式，和GIF（圖形交換格式）動畫圖像格式。
市面上多數瀏覽器同時支援上述兩種方法。正因此，網路伺服器要接受很多對「favicon.ico」檔案的請求，即使該檔案根本不存在。網站管理員對此很不滿，因為這樣會增加大量的伺服器紀錄檔項，並導致很多不必要的磁碟讀取和CPU、網路資源的占用。另一個常見的問題是，當清除瀏覽器的快取後，favicon可能會消失。
Favicon - Wikipedia
https://en.wikipedia.org/wiki/Favicon
********************************************************************************
W3C網路標準化組織關於如何添加favicon的建議
How to Add a Favicon to your Site
https://www.w3.org/2005/10/howto-favicon
********************************************************************************
圖示 (設計基本概念) - Win32 apps | Microsoft Learn
https://learn.microsoft.com/zh-tw/windows/win32/uxguide/vis-icons
Icons (Design basics) - Win32 apps | Microsoft Learn
https://learn.microsoft.com/en-us/windows/win32/uxguide/vis-icons
********************************************************************************
favicon.ico Generator - 免費透明圖製作網站
https://www.favicon.cc/
對現有icon做透明背景
- 點左上角 Import Image
- 按下「選擇檔案」按鈕，按下「Upload」按鈕
- 勾選右下角 transparent
- 把空白透明地方點選
- 按下中間下方「Download Favicon」按鈕。
Default.html，在本機上測試
<head> <link style="color:red" rel="icon" href="favicon.64x64.Transparent.ico" type="image/x-icon" / > <link rel="shortcut icon" href="favicon.64x64.Transparent.ico" type="image/x-icon" / > </head> 可在 Chrome 無痕模式下測試 |
Default.html，在網站上測試 (路徑改一下)
<head> <link style="color:red" rel="icon" href="/favicon.64x64.Transparent.ico" type="image/x-icon" / > <link rel="shortcut icon" href="/favicon.64x64.Transparent.ico" type="image/x-icon" / > </head> 可在 Chrome 無痕模式下測試 |
(完)
沒有留言:
張貼留言