也就是 favorites icon，
是一個代表網站的小圖，
也就是網站的 Logo，
它會顯示在瀏覽器分頁標籤上。
下圖是幾個網站的網站小圖示範例，
包括維基百科、Google、Yahoo奇摩，
網站小圖示可以自己製造，
也可以用線上工具產生。
網頁開發人員與網站小圖示
網站小圖示通常放置在網站根目錄底下，
也可以自行設定網站小圖示的路徑。
例如臉書的網站小圖示就沒有放在網站根目錄底下，
是自行設定路徑的:
<link rel="shortcut icon" href="https://static.xx.fbcdn.net/rsrc.php/yD/r/d4ZIVX-5C-b.ico">
就會到臉書小圖示
如果是網站開發者或管理員，
因為他們有足夠的權限，
可以把網站小圖示放在網站根目錄，
或者自行設定小圖示要放在哪裡，
並在每個網頁 (例如: HTML) 的<head></head>區段中放置如:
<link href="favicon.ico" rel="icon" type="image/x-icon">樣
或者
<link rel="shortcut icon" href="favicon.ico">
如此設定之後，
開啟或重新刷新該網頁，
瀏覽器的分頁標籤就會顯示所設定的網站小圖示。
用線上工具製造網站小圖示
如果懶得自己製造圖片，
可以善用線上的工具來製作，
用Google搜尋關鍵字: "favorite icon generator"，
就會顯示一些用來製造網站小圖示的線上工具網站。
用線上工具製造網站小圖示還有其他好處，
就是它會產生相應於不同裝置的小圖示，
例如用於安卓顯示的圖示、用於蘋果手機顯示的圖示，
並且有不同的大小圖片，
而當然有這些不同尺寸的圖片，
其在HTML中的設定也會更複雜一些。
我自己選擇了這個網站:
因為它看起來挺不錯的，
裡面有幾種產生網站小圖示的方式:
Generate from Text
由文字產生網站小圖示，輸入一個字或兩個字，產生相對應的小圖。
Generate from Image
由圖片產生網站小圖示
Generate from Emoji
由 Emoji 產生網站小圖示
我選擇用Generate from Text來製造，
輸入文字 (Text)、
選文字顏色 (Font Color) 和背景顏色 (Background Color) 之後，
就可以按下 Download 下載製造好的小圖。
下載之後會得到名為 favicon_io 的壓縮檔，
解壓縮之後就會得到不同大小的圖示。
在Google Blogger中設定網站小圖示
首先要登入 Google，
接著在 Google Blogger 的後台，
在左側欄位選單選擇 設定，
然後選擇網站小圖示
就會到這頁: 設定網站小圖示
點選 選擇檔案
然後選擇一張圖片上傳，
然後儲存即可。
接著再重新刷新Blogger的網頁，
就能看到網站小圖示更新了。
){kind=link}
0 留言