基本操作概念

為了要製作能加入網站上方的小型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}

CADIIS凱士網頁設計公司,專為中小企業設計、規劃、建置網站

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

 

整體
規劃
從產業策略洞悉到網頁設計
專精RWD網頁技術及SEO架構
簡約
設計
堅持化繁為簡的設計理念
讓網頁用戶專注您的產品服務
彈性
管理
透過全站式網站管理系統
讓您隨時調整網站架構與內容
維護
諮詢
不論是網站維護諮詢或網站行銷
我們是您長期的網路策略夥伴
REVIEWS
  • 對於中小企業而言,在費用效益的考量下,想擁有一個簡潔明瞭並符合企業文化的公司網站,並不是件易事!經由此次與凱士的合作,從網站設計發想到最後的內容定稿,溝通順暢,工作進程掌控適當,問題排解得宜,進而可達到成立公司網站的目標。此次非常感謝凱士提供的服務,這是令人印象深刻的合作案!

    相成貿易, 2018
  • 自從網站改版後,搜尋排序漸漸提升也收到更多詢問信件,非常感謝凱士幫忙,讓我們的網站揮別以往單調無趣的感覺,呈現出全新的風格,在這個專案合作過程中,可以很明顯的感受到凱士的專業與熱忱,從開始到結束,每一次的溝通討論都很用心,有問必答而且一點都不馬虎,從凱士這裡我們學到很多網站相關的資訊,像這樣的團隊並不容易找,非常值得推薦給正在找網頁設計公司的大家!

    高野機械, 2018
  • 從網站規劃到完成,發現凱士數位細心及專業度都很足夠,如果有下一次機會,我們還是會再給凱士數位施作。

    康普材料, 2017
  • Eric是個非常有經驗的專案經理,了解客戶的需求,並能快速釐清卡關障礙並迅速排除、總是從專業角度分析及建議怎麼做會比較好、和客戶一起腦力激盪,如期如質將網站建置專案完成,並提供相當有用的SEO建議及訣竅。結案後的諮詢及微調修改,凱士的專業團隊也總是非常及時給予支援,維護與管理的服務也同樣令人放心!

    HEF, 2017
  • 作為材料界的國際化公司,誌陽需要的不只是內容完整,還需要情境來提供目標客戶知的權益!正由於這個堅持我們找上了CADIIS幫我們完成這些規劃。在互動的過程中可以看出他們的用心,除了提供以往經驗讓我更容易感受外,對於我們不斷提出高門檻的技術問題也能以最快的時間完成使命,如果你沒法感受我的心情,不妨進到我們網站去感受吧!www.allightec.com 好東西就是要跟好朋友分享。

    誌陽科技, 2017
網頁設計獲獎

設計獲獎 AWARD

台灣廣告主協會與動腦雜誌聯合主辦「台灣50家最佳設計公司」票選活動,CADIIS榮獲入選「傑出多媒體設計公司」。
 

 

有任何網頁設計問題?

跟我們說說您的網站構想,或是目前面臨的網站規劃問題

我們將與您聯絡、共同討論解決方案。

 

網頁設計洽詢