如何製作Favicon(我的最愛icon)？

基本操作概念

為了要製作能加入網站上方的小型icon，因此需要先設計一個16x16大小的圖片，然後利用網路將圖片轉換為favicon.ico檔案，最後將圖片應用在網頁上，即大功告成囉！

 

目標

讓網站導覽列及我的最愛的icon可顯示自訂後結果

 

操作方法

A.製作一個16x16大小的圖片：

1.小編使用Fireworks製作，從「檔案/新增文件」中，輸入16*16大小，並將畫布設定為「白色」

註：先設定畫布顏色，是因為設定為透明之後轉存出來的.ico圖片會稍微變形，因此直接設定畫布底色

 

 

2、圖片抓好大小後，將圖片轉存出來，可存成 jpg, jpeg, gif, png, bmp, ico, cur，圖片最大不超過5MB。

 

 

上圖為放大800%後效果
 

B.進入到網頁，將圖片檔案上傳轉檔：

1、進入favicon.cc網站，按Import Image

 

 

2、按下Image File內的「選擇檔案」，選擇剛才做好的16x16大小的圖片

 

 

3、選擇其中一種上傳模式，第一種是等比例縮小(Keep dimensions)，第二種是非等比例縮小(Shrink to square icon)，當然是選第一種囉！選好後按Upload上傳！

 

 

4、上傳完後，可以在「Preview」看到預覽畫面，或是在導覽列上方看到圖片，這時如果對顏色不滿意，可以使用右邊的「Color Picker」修正圖片

 

在瀏覽器的導覽列上可看到剛才上傳的圖片

 

 

5、檢查沒問題，按「Download Favicon」將上傳的圖片檔下載下來。

 

 

d.將製作好的favicon圖片，放到網站上：

開啟您的網頁在中加入下列程式碼，經測試，必須為「絕對路徑」才能讀到icon：

舉例如下：

<link href="http://www.chiayi.gov.tw/images/inner/cyicon.ico" rel="shortcut icon" type="image/ico" />

 

e. 完成

教學到此結束，謝謝大家的收看，如果有疑問歡迎一起來留言討論喔！

 

 

 

 

=========

 

＊ 歡迎分享這篇文章

 

 

 

想詢問網站設計方面的問題？

凱士網站設計公司深受B2B外銷公司、上市櫃公司及外商公司推薦，累積超過100個網頁設計作品。

我們很樂意用淺顯易懂的方式讓我們的客戶輕鬆了解網頁設計的各種疑難雜症。

 

如果您對網站設計規劃有任何問題，歡迎聯絡凱士網頁設計：立即填寫諮詢表單，或直接撥打電話 04-22210688