| 最近文章 |
| 星期二 九月 13, 2011 馬老師部落格搬新家 星期日 十一月 15, 2009 PNG去背與IE相容性問題 星期六 十一月 14, 2009 免費的3D迴轉Flash相簿（flShow） 星期五 十一月 13, 2009 網站圖示的製作方式 |
| 最近迴響 |
Re: 網站圖示的製作方式 by 小樂 (八月 23, 2010) |
網站圖示的製作方式
剛剛好在留言板中有同學問到了「如何製作網站圖示」這樣的問題
今天就來教大家一下如何設計一個去背的網站圖示囉～首先來講一下什麼是網站圖示
當我們進入某些網站，會在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為剛轉好的圖檔名稱
接下來把圖示檔與網頁檔儲存在相同的路徑中，上傳到你的網頁空間即可
註：本機預覽是看不到的唷～
以下就是上傳測試後的結果，我們成功囉！
Filed under 網頁設計 |
1 迴響 |
Permalink
| 評分： |
|
得分: 0.0/ 投票數: 0 |
由...發表 小樂 on 八月 23, 2010 at 02:29 下午 CST #