close
剛剛好在留言板中有同學問到了「如何製作網站圖示」這樣的問題
今天就來教大家一下如何設計一個去背的網站圖示囉~首先來講一下什麼是網站圖示
當我們進入某些網站,會在IE的網址、網站名稱、我的最愛看到如下圖所示的圖示
至於這個圖形是如何設計的呢?其實我們可以先利用美工軟體做出自己想要的樣式
然後依照該美工軟體儲存去背檔案的方式,儲存該圖示為PNG圖檔
(每個美工軟體的方法都有所差異唷~圖檔格式說明可參考這篇文章)
圖檔大小建議作成正方形的圖檔(例如:100x100或50x50即可..)
接下來我們到ConvertIco.com這個網站將我們的圖檔轉換成去背的ICO圖檔
在Upload a PNG or ICO file的地方按瀏覽上傳自己製作的圖檔,按下轉換鈕
轉換完成後你會看到如下圖的畫面,在Click here to Download處按下右鍵/選擇另存目標
接下來在你想要出現圖示的網頁中插入以下語法:
<link rel="shortcut icon" type="image/x-icon" href="fav_icon.ico" />
註:fav_icon.ico為剛轉好的圖檔名稱
接下來把圖示檔與網頁檔儲存在相同的路徑中,上傳到你的網頁空間即可
註:本機預覽是看不到的唷~
以下就是上傳測試後的結果,我們成功囉!
全站熱搜