基本操作概念

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

目標

alt

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

操作方法

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

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

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

alt 

 

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

alt

 

上圖為放大800%後效果
 

B.進入到網頁,將圖片檔案上傳轉檔:

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

alt
 

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

alt
 

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

alt
 

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

alt

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

alt

 

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

alt
 

d.將製作好的favicon圖片,放到網站上:

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

舉例如下:

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

 

e. 完成

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

{#Carol}

網頁設計服務

RWD網頁設計 | 網站系統建置 | 客製程式開發 | SEO優化 | 商業攝影 | 主機空間 | 維護諮詢

 

整體
規劃
從產業策略洞悉到網頁設計
專精RWD網頁技術及SEO架構
簡約
設計
堅持化繁為簡的設計理念
讓網頁用戶專注您的產品服務
彈性
管理
透過全站式網站管理系統
讓您隨時調整網站架構與內容
維護
諮詢
不論是網站維護諮詢或網站行銷
我們是您長期的網路策略夥伴

 

網頁設計常見問題

 

還是搞不懂什麼是RWD網頁設計?用八張圖讓你一眼就懂

RWD網頁設計已經出來一段時間了,但我們還是常常接到客戶詢問,常常不斷的說明和解釋。所以我們做了幾張圖,希望能用最簡單的方式、看圖說故事,讓大家理解什麼是RWD網頁設計。

官網網頁計前,有哪些準備工作?

網站建置前要確認的事項很多,以我們過去執行網頁設計專案的經驗,用淺顯易懂的方式來讓你了解網站建置前有哪些事項是需要留意的,提供您和網頁設計團隊進一步討論。

如何增加網頁設計的價值感?要如何提升公司網站形象?

我們的企業網站需要商業攝影嗎?有沒有攝影真的差很多嗎?商業攝影的費用是不是很貴?買圖庫或用自己手機拍的照片來做網頁設計不行嗎?這些都是我們常常聽到的客戶疑問,當網站形象成為客戶對公司的第一印象,首要條件就是擁有專業級的形象照片。

網頁設計是什麼?網頁設計公司可以幫你做什麼?

經常有人問我們,網頁設計到底是在做什麼?簡單的說,網頁設計就是將文字、圖片、影片等媒體,以網頁的形式進行規劃組織與編排設計,將內容呈現在網路上,提供客戶或顧客了解企業的訴求。而這個過程,就是網頁設計公司可以幫你做的事。

 

 

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >  或撥 04-2221-0688