幫網頁標題欄title加上logo(icon)圖示

參考網址:一化網頁設計

我們在瀏覽網站時,時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示,那麼該如何才能將icon加上去呢?

 

有兩個方法如下:

1.將圖片轉成ico格式,然後命名為favicon.ico,尺寸設16X16px,因為只是放在title上,占的範圍很小,所以圖檔不宜過大。

有不少將png、jpg等圖檔線上轉成ico的網站,可以直接將圖片上傳轉檔。

png轉ico:https://www.convertico.com/

原始圖片支援jpg、png、gif:http://tw.faviconico.org/

之後再將圖片放在網站的根目錄下即可。

 

第二個方法是在網頁的head裡放入

標題欄:

< link rel="icon" href="/favicon.ico" type="image/x-icon" / >

收藏夾:

< link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >

 

href裡可以放圖片的相對路徑或絕對路徑,所以不需放在網站的根目錄下,圖片名稱也不一定要取favicon.ico,可以自由命名。

例如:

< link rel="icon" href="images/logo.ico" type="image/x-icon" / >

< link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / > 

但還是建議使用ico檔案,因為相較於png、jpg等圖片,ico在瀏覽器的支援度更廣。

本篇發表於 程式設計。將永久鏈結加入書籤。