網頁圖示的製作方式

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

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

30,194 Responses

  1. Amazing issues here. I’m very glad to peer your post.
    Thanks a lot and I am looking forward to contact you.
    Will you kindly drop me a e-mail?

  2. Dnrtoxp表示:

    Мы готовы предложить дипломы любой профессии по приятным тарифам. Мы можем предложить документы техникумов, которые расположены на территории всей Российской Федерации. Дипломы и аттестаты выпускаются на бумаге высшего качества. Это позволяет делать государственные дипломы, которые невозможно отличить от оригинала. babygirls037.copiny.com/question/details/id/1082951

  3. Hello There. I found your blog using msn.
    This is a very well written article. I will be sure to bookmark it and return to read more
    of your useful info. Thanks for the post. I’ll certainly return.

  4. Weldonsib表示:

    casino turkey: casibom guncel adres – popГјler bahis casibom1st.com

  5. RobertCex表示:

    deneme bonusu veren siteler: deneme bonusu veren siteler – casino siteleri 2025 casinositeleri1st.com

  6. Weldonsib表示:

    siteler bahis: casibom giris – en iyi casino oyunlarД± casibom1st.com

  7. Data SGP 2025表示:

    It’s very straightforward to find out any topic on net as compared to
    textbooks, as I found this piece of writing at this site.

  8. I am really grateful to the holder of this website who has shared this great piece of writing at at this time.

  9. BradyGem表示:

    100tl hosgeldin bonusu veren siteler: casibom giris – en iyi kumar siteleri casibom1st.com

  10. I enjoy what you guys tend to be up too. Such clever work and reporting!

    Keep up the great works guys I’ve included you guys to our blogroll.

  11. Lazrdxy表示:

    Выгодно купить диплом об образовании!
    Мы можем предложить дипломы любой профессии по разумным тарифам— kupitediplom0027.ru/kupit-diplom-vracha-terapevta-legalno-i-bistro/

  12. BradyGem表示:

    canli oyun: casibom giris – superbetin giriЕџ casibom1st.com

  13. BradyGem表示:

    sweet bonanza siteleri: sweet bonanza 1st – sweet bonanza sweetbonanza1st.shop

  14. I visited various sites except the audio feature for audio songs
    present at this web site is truly wonderful.

  15. Treforo表示:

    Заказать диплом об образовании. Приобретение подходящего диплома через проверенную и надежную фирму дарит множество плюсов для покупателя. Это решение позволяет сэкономить как личное время, так и существенные финансовые средства. babygirls006.copiny.com/question/details/id/1083650

  16. 1win_bemt表示:

    1вин бет официальный сайт http://1win6043.ru .

  17. Web Design表示:

    Hi there it’s me, I am also visiting this web page daily, this web site
    is actually pleasant and the visitors are actually sharing fastidious thoughts.

  18. Weldonsib表示:

    bet siteler: casino siteleri 2025 – casino siteleri 2025 casinositeleri1st.com

  19. RobertCex表示:

    bahis oyun siteleri: casibom resmi – Гјcretsiz deneme bonusu veren bahis siteleri casibom1st.com

  20. GarrettMom表示:

    sweet bonanza slot sweet bonanza yorumlar sweet bonanza slot sweetbonanza1st.com

  21. Why viewers still use to read news papers when in this technological globe the whole
    thing is available on web?

  22. RobertCex表示:

    sweet bonanza 1st: sweet bonanza siteleri – sweet bonanza sweetbonanza1st.shop

  23. as he was entitled to do,and announce that he wished tojoin them.ラブドール 通販

  24. Lazrjdm表示:

    Где заказать диплом специалиста?
    Заказать диплом института по невысокой цене вы можете, обращаясь к проверенной специализированной компании.: diplomoz-197.com

  25. WilliamDeeli表示:

    Мы можем предложить дипломы любых профессий по доступным тарифам. Дипломы изготавливаются на оригинальных бланках Заказать диплом об образовании diplom-club.com

發佈留言

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