網頁圖示的製作方式

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

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

17,562 Responses

  1. Zelda表示:

    Good replies in return of this issue with firm arguments and
    explaining the whole thing on the topic of that.

  2. Bryan表示:

    Hello my loved one! I wish to say that this post is awesome, great
    written and include approximately all vital infos.
    I would like to look extra posts like this .

  3. Jamestus表示:

    mail order pharmacy india indian pharmacies safe top online pharmacy india

  4. Marcia表示:

    Oh my goodness! Incredible article dude! Thanks, However I am experiencing problems with your
    RSS. I don’t understand why I cannot subscribe to it.

    Is there anybody else getting similar RSS issues? Anybody who knows the answer
    will you kindly respond? Thanx!!

  5. ClaytonGauct表示:

    canadian online pharmacy reviews: best canadian online pharmacy – canadapharmacyonline

  6. Logan表示:

    It’s truly a nice and useful piece of info. I am glad that
    you simply shared this helpful information with us.
    Please keep us up to date like this. Thanks for sharing.

  7. Forest表示:

    Appreciating the persistence you put into your site and detailed information you
    present. It’s great to come across a blog every once in a while that
    isn’t the same outdated rehashed material.
    Fantastic read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  8. Brianchoky表示:

    https://mexicanpharmacy.store/# mexican border pharmacies shipping to usa

  9. Zack表示:

    I feel that is among the such a lot important information for me.
    And i am glad studying your article. But wanna commentary on some common issues, The website taste is perfect, the articles is in point of fact nice :
    D. Good activity, cheers

  10. Denny表示:

    What a data of un-ambiguity and preserveness of valuable knowledge
    regarding unpredicted emotions.

  11. Brianchoky表示:

    http://indianpharmacy.win/# reputable indian pharmacies

  12. Myrna表示:

    Touche. Great arguments. Keep up the great
    effort.

  13. Jamestus表示:

    canadian pharmacy 1 internet online drugstore canadian pharmacy win canadian pharmacy king

  14. AbrahamEncab表示:

    Доставка грузов из Китая https://cargotlk.ru под ключ. Организуем перевозки любых объемов: от документов до крупногабаритных грузов. Авиа, морская и автодоставка. Полное сопровождение, таможенное оформление, страхование.

  15. ClaytonGauct表示:

    top 10 online pharmacy in india: top online pharmacy india – indian pharmacies safe

  16. Carmella表示:

    I do not even know how I finished up right here, but I thought this publish used to
    be great. I don’t recognise who you’re but definitely you are going to
    a well-known blogger when you aren’t already. Cheers!

  17. Zulma表示:

    Hey there! Do you know if they make any plugins to help with SEO?
    I’m trying to get my blog to rank for some
    targeted keywords but I’m not seeing very good success. If you know of any please share.
    Many thanks!

  18. Ntniej表示:

    cheap prednisone 40mg – order nateglinide 120 mg without prescription cheap capoten

  19. Camilla表示:

    My brother suggested I might like this blog. He was entirely right.
    This post actually made my day. You cann’t imagine just how much time I had
    spent for this info! Thanks!

  20. Filomena表示:

    Wow that was strange. I just wrote an very long comment but after I clicked submit my comment didn’t appear.
    Grrrr… well I’m not writing all that over again. Regardless, just wanted to say wonderful blog!

  21. Virgilio表示:

    Excellent post. I will be going through some of these issues as well..

發佈留言

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