網頁圖示的製作方式

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

網站圖示的製作方式 示意圖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...

675 Responses

  1. IsiahSoith表示:

    buy cipro online without prescription ciprofloxacin mail online

  2. You need to really control the comments listed here

  3. I’ve read several good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to make such a magnificent informative site.

  4. dordSimb表示:

    furosemide 20 mg http://furosemide.directory lasix dosage

  5. viagra drink cheap viagra australia fast delivery cialis 20 mg best price where can i buy viagra without a doctor

  6. IsiahSoith表示:

    diflucan 2 pills diflucan cost in india

  7. Tjjvwe表示:

    buy clopidogrel online cheap – methotrexate usa order reglan generic

  8. WilliamTraug表示:

    aromatase inhibitor tamoxifen tamoxifenworld

  9. WilliamTraug表示:

    tadalafil over the counter uk best price for tadalafil 20 mg

  10. Edwarddaf表示:

    lasix furosemide 40 mg lasix medication

  11. Anthonynug表示:

    https://buylipitor.store/# lipitor australia

  12. RaymondCrype表示:

    https://buylipitor.store/# generic lipitor online

  13. Anthonynug表示:

    https://buytadalafil.men/# tadalafil online paypal

  14. Edwarddaf表示:

    buy tadalafil from canada tadalafil 2

  15. Homerphest表示:

    buy lipitor online uk lipitor 20 mg daily

  16. Jwbxpp表示:

    flexeril generic – cyclobenzaprine online order purchase inderal

  17. This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I have shared your website in my social networks!

  18. Edwarddaf表示:

    tadalafil pills 20mg tadalafil online canada

  19. Homerphest表示:

    drug lipitor lipitor 40 mg price comparison

  20. cialis et kamagra kamagra en france livraison rapide qu est ce que du kamagra comment savoir si il prend du kamagra

  21. generic cialis 20mg cialis online europe cialis 20 mg effet indesirable cialis 20 mg ou 10 mg

  22. RaymondCrype表示:

    https://buylasix.icu/# lasix medication

  23. Xiqylx表示:

    accutane 10mg generic – buy isotretinoin buy tetracycline 250mg

  24. Just what I needed to know thank you for this.

  25. GeorgegaifF表示:

    prednisone 10 mg tablets price of prednisone tablets

  26. RobertBet表示:

    doxycycline brand name doxycycline without rx

  27. ShelbyImimb表示:

    buy clomid online paypal genuine clomid online

  28. viagra dosage instructions cheapest viagra prices best place to buy cialis online forum how long does viagra keep you erect

  29. Stepheninsug表示:

    https://zithromaxforsale.shop/# zithromax 500mg over the counter

發佈留言

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