網頁圖示的製作方式

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

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

28,141 Responses

  1. Kennethslity表示:

    http://tadalafileasybuy.com/# TadalafilEasyBuy.com

  2. GregoryJough表示:

    Generic Tadalafil 20mg price: Tadalafil Easy Buy – cialis without a doctor prescription

  3. TerryDus表示:

    https://tadalafileasybuy.com/# Generic Tadalafil 20mg price

  4. WilliamNop表示:

    Kamagra Kopen Online: Kamagra Kopen – kamagra pillen kopen

  5. This is a great article!

  6. Kennethslity表示:

    https://kamagrakopen.pro/# kamagra kopen nederland

  7. Kennethslity表示:

    https://generic100mgeasy.shop/# buy generic 100mg viagra online

  8. View more表示:

    Hi it’s me, I am also visiting this web page daily, this website is actually nice and the viewers are genuinely sharing good
    thoughts.

  9. Dwayneseisa表示:

    Kamagra KamagraKopen.pro kamagra pillen kopen

  10. What’s up, this weekend is fastidious in favor of me, as this occasion i am reading this impressive
    educational paragraph here at my house.

  11. Dwayneseisa表示:

    Kamagra Kopen KamagraKopen.pro kamagra kopen nederland

  12. TerryDus表示:

    http://tadalafileasybuy.com/# п»їcialis generic

  13. lezbo表示:

    There is definately a great deal to know about this subject.

    I really like all the points you have made.

  14. In a small business that is in most cases run by a single person or has only five to ten employees, automation of business reports prove handy in the long run.

  15. Kasihjp slot表示:

    When someone writes an paragraph he/she keeps the idea of a user in his/her brain that how a user can be aware of it.

    Therefore that’s why this piece of writing is outstdanding.
    Thanks!

  16. You actually make it seem so easy with your presentation but I find
    this matter to be actually something that I think I would never understand.
    It seems too complicated and very broad for me. I’m looking forward for
    your next post, I’ll try to get the hang of it!

  17. GregoryJough表示:

    kamagra gel kopen: kamagra pillen kopen – Officiele Kamagra van Nederland

  18. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт крупногабаритной техники в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  19. web site表示:

    It’s going to be end of mine day, but before end I am reading this impressive paragraph to increase my
    knowledge.

  20. WilliamNop表示:

    cialis without a doctor prescription: TadalafilEasyBuy.com – Cialis over the counter

  21. mostbet表示:

    Zkuste štěstí na Mostbet online je to snadné | Mostbet nabízí kasino s živými dealery | S Mostbet máte jistotu kvalitní podpory https://mostbet-casino-register-cz.com.

  22. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  23. TerryDus表示:

    https://tadalafileasybuy.shop/# Buy Cialis online

  24. WilliamNop表示:

    Tadalafil Easy Buy: Tadalafil Easy Buy – TadalafilEasyBuy.com

  25. Kennethslity表示:

    http://tadalafileasybuy.com/# Generic Cialis price

  26. Leo表示:

    Hi there, just became alert to your blog through Google, and found that it’s truly informative.
    I’m gonna watch out for brussels. I’ll appreciate if you continue this
    in future. Many people will be benefited from your writing.
    Cheers!

  27. GregoryJough表示:

    kamagra kopen nederland: kamagra kopen nederland – kamagra pillen kopen

  28. Kennethslity表示:

    http://generic100mgeasy.com/# buy generic 100mg viagra online

  29. Kennethslity表示:

    https://tadalafileasybuy.shop/# Cialis 20mg price

發佈留言

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