網頁圖示的製作方式

之前在馬老師舊的部落格就有教導過網站圖示的製作方式,不過因為部落格搬新家,也再把這個教學重新講解與製作一遍,如下圖所示,許許多多的網頁都有製作網頁圖示。

網站圖示的製作方式 示意圖1

這樣的圖示我們可以利用任何的美工軟體來設計,而我是在Fireworks中製作(個人覺得比較方便),首先開一個正方形的透明圖檔(寬、高相同),大小可以自訂,底色設為透明。

網站圖示的製作方式 示意圖2

底色透明的部分是希望可以製作一個去背的網站圖示,像上面範例奇摩的圖示就有去背,維基百科則沒有,接下來就看你怎麼樣設計這個圖示囉~

網站圖示的製作方式 示意圖3

製作完成後儲存成png的格式,進入這個網站將我們的PNG圖檔轉換成ICO圖檔,進入後按下選擇檔案,找到我們剛剛所儲存的PNG圖檔,接下來就按下轉換的按鈕。

網站圖示的製作方式 示意圖4

待轉換完成後在Click here to Download的文字上面按右鍵選擇另存目標。

網站圖示的製作方式 示意圖5

接下來在想出現此圖示的網頁上,輸入以下的HTML程式碼。

<link href="favicon.ico" rel="shortcut icon" />

網頁圖示的製作方式 示意圖6

其中href代表這個圖檔的名稱和路徑,如果是整個網站的所有頁面都要有本圖示的話,那每一頁都必須要有這段語法喔!接下來預覽網頁就可以看到你所設計的網頁圖示了。

註:在網頁還沒上傳的情形之下I.E.會看不到這個圖示,大家可以用Chrome或Firefox來預覽

You may also like...

2,879 Responses

  1. Jameswaw表示:

    can you buy generic clomid for sale order clomid without dr prescription where to get generic clomid without rx

  2. BrainDer表示:

    http://azithromycina.pro/# zithromax buy online

  3. JosephBix表示:

    https://clomida.pro/# where can i buy generic clomid pill

  4. Jameswaw表示:

    purchase oral ivermectin stromectol tablets for humans stromectol online pharmacy

  5. BryanAgist表示:

    ivermectin 0.2mg: ivermectin 0.5% brand name – order stromectol

  6. DomenicEcoff表示:

    buy amoxicillin from canada: how to buy amoxicillin online – amoxicillin 500 mg tablet price

  7. BrainDer表示:

    http://clomida.pro/# how to buy clomid for sale

  8. Ukoslp表示:

    clarinex 5mg drug – buy beclomethasone cheap albuterol order online

  9. Jameswaw表示:

    amoxicillin 500mg price canada amoxacillian without a percription amoxicillin 775 mg

  10. BrainDer表示:

    http://prednisonea.store/# purchase prednisone from india

  11. BryanAgist表示:

    buy azithromycin zithromax: zithromax capsules price – how to buy zithromax online

  12. Jameswaw表示:

    stromectol 3 mg tablets price ivermectin 5 mg price ivermectin tablets

  13. JosephBix表示:

    https://prednisonea.store/# cost of prednisone tablets

  14. Miagmy表示:

    how to get methylprednisolone without a prescription – medrol cheap buy astelin 10ml sale

  15. Jameswaw表示:

    can i order clomid pill where to buy generic clomid online where buy cheap clomid without rx

  16. DomenicEcoff表示:

    prednisone 20mg by mail order: prednisone 5 mg tablet price – prednisone 20mg capsule

  17. BryanAgist表示:

    amoxicillin 500mg no prescription: amoxicillin 500mg capsules – buy amoxicillin online without prescription

  18. BryanAgist表示:

    amoxicillin generic brand: amoxicillin 500 mg for sale – buy amoxicillin 500mg uk

  19. Jamesempiz表示:

    tamoxifen dose: tamoxifen warning – tamoxifen premenopausal

  20. Jeromedug表示:

    buy cytotec in usa buy cytotec pills online cheap buy cytotec

  21. ArchieAnice表示:

    http://ciprofloxacin.guru/# buy cipro online

  22. Williampiree表示:

    tamoxifen and depression: tamoxifen citrate pct – should i take tamoxifen

  23. Jeromedug表示:

    diflucan online cheap without a prescription diflucan 100 mg tab diflucan buy in usa

  24. CurtisCom表示:

    Вывоз мусора с грузчиками https://vivozmusora67.ru/

  25. Jeromedug表示:

    doxycycline generic 100mg doxycycline doxycycline without prescription

  26. Williampiree表示:

    tamoxifen depression: tamoxifen 20 mg tablet – tamoxifen dosage

  27. Jamesempiz表示:

    buy cipro online without prescription: п»їcipro generic – buy cipro cheap

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。