網頁圖示的製作方式

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

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

32,501 Responses

  1. AlbertoHip表示:

    purchase Modafinil without prescription: Modafinil for sale – legal Modafinil purchase

  2. AlbertoHip表示:

    purchase Modafinil without prescription: purchase Modafinil without prescription – modafinil 2025

  3. JeremyMelty表示:

    Viagra without prescription: trusted Viagra suppliers – secure checkout Viagra

  4. Dnrtfra表示:

    Мы предлагаем дипломы любых профессий по доступным ценам. Мы предлагаем документы техникумов, расположенных в любом регионе РФ. Документы печатаются на бумаге высшего качества. Это позволяет делать государственные дипломы, которые невозможно отличить от оригинала. manavsakti.com/employer/archive-diploma

  5. Sazrqfz表示:

    Приобрести диплом под заказ в Москве вы можете через официальный сайт компании. pracaeuropa.pl/companies/frees-diplom

  6. Ronaldpayon表示:

    http://maxviagramd.com/# fast Viagra delivery

  7. It’s appropriate time to make some plans for the future and it is time to be
    happy. I have read this post and if I could I desire to suggest
    you few interesting things or advice. Perhaps you can write next articles referring to this article.

    I desire to read even more things about it!

  8. RobertRef表示:

    Viagra without prescription: discreet shipping – no doctor visit required

  9. mostbet_nepn表示:

    скачать бесплатно мостбет https://www.mostbet10015.ru .

  10. Ronaldpayon表示:

    http://zipgenericmd.com/# generic tadalafil

  11. таможенный представитель таможенный представитель .

  12. Ronaldpayon表示:

    https://modafinilmd.store/# safe modafinil purchase

  13. Lazrfdd表示:

    Диплом ВУЗа РФ!
    Без получения диплома очень сложно было продвинуться по карьерной лестнице. Заказать диплом под заказ в Москве вы имеете возможность используя сайт компании: matchfishing.ru/forumtest/1/member.phpu=23110

  14. Ronaldpayon表示:

    http://maxviagramd.com/# discreet shipping

  15. JeremyMelty表示:

    Viagra without prescription: cheap Viagra online – trusted Viagra suppliers

  16. Euroror表示:

    Restoring confidence after ED becomes simpler with structured therapies like vardenafil. Real change starts when you choose trusted, prescription-based solutions.

  17. JeremyMelty表示:

    buy generic Viagra online: safe online pharmacy – safe online pharmacy

  18. LorenzoLiate表示:

    safe modafinil purchase Modafinil for sale modafinil 2025

  19. RobertAmets表示:

    покупка электроники интернет магазины электроника магазин интернет товары

  20. 1win_jtma表示:

    neteller casino site-uri https://1win5068.ru/ .

  21. AlbertoHip表示:

    FDA approved generic Cialis: cheap Cialis online – affordable ED medication

  22. JeremyMelty表示:

    best price Cialis tablets: generic tadalafil – best price Cialis tablets

  23. Wow, this рiece of ѡriting is pleasant, my younger sіster is analzing theѕe thingѕ, thus I am going to inform
    her.

    Alѕo visit my web page :: Đồng hồ nữ đẹp chính hãng

  24. LorenzoLiate表示:

    same-day Viagra shipping cheap Viagra online fast Viagra delivery

  25. AlbertoHip表示:

    Modafinil for sale: verified Modafinil vendors – safe modafinil purchase

  26. AlbertoHip表示:

    no doctor visit required: legit Viagra online – Viagra without prescription

  27. RobertRef表示:

    order Cialis online no prescription: FDA approved generic Cialis – FDA approved generic Cialis

  28. Oh my goodness! Incredible article dude! Thanks, However I am encountering
    difficulties with your RSS. I don’t know the reason why I cannot subscribe to it.
    Is there anybody having identical RSS problems?
    Anybody who knows the answer can you kindly respond?

    Thanx!!

  29. Cazrdtl表示:

    Где приобрести диплом по необходимой специальности?
    Мы предлагаем дипломы любой профессии по разумным ценам. Важно, чтобы документы были доступными для большинства наших граждан. Быстро и просто приобрести диплом о высшем образовании diplomp-irkutsk.ru/kak-zanesti-diplom-v-reestr-6/

發佈回覆給「LorenzoLiate」的留言 取消回覆

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