網頁圖示的製作方式

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

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

  1. сколько стоит аппарат узи для людей цена kupit-uzi-apparat13.ru .

  2. купить аппарат узи цены новый http://kupit-uzi-apparat11.ru/ .

  3. RussellCof表示:

    where can i get cheap clomid pills: cost of clomid now – can you buy generic clomid

  4. 1win_qdEa表示:

    cele mai bune cazinouri portofele electronice cele mai bune cazinouri portofele electronice .

  5. OscarOmist表示:

    Amo Health Care: buy amoxicillin online no prescription – Amo Health Care

  6. Judsonrax表示:

    best pharmacy prednisone: price for 15 prednisone – prednisone cost us

  7. Rogerbup表示:

    http://clomhealth.com/# clomid cheap

  8. MatthewMof表示:

    order cheap clomid cost generic clomid pills get generic clomid without rx

  9. Judsonrax表示:

    buying clomid: get cheap clomid no prescription – how to get clomid price

  10. melbet_jgOl表示:

    melbet официальный сайт http://melbet1011.ru/ .

  11. Judsonrax表示:

    Amo Health Care: amoxicillin 500mg pill – cheap amoxicillin 500mg

  12. MatthewMof表示:

    how to get clomid price Clom Health where can i get generic clomid without a prescription

  13. Rogerbup表示:

    https://amohealthcare.store/# Amo Health Care

  14. RussellCof表示:

    cheap clomid without rx: where to buy clomid without a prescription – where can i get cheap clomid pills

  15. портативные узи сканеры цены https://kupit-uzi-apparat14.ru/ .

  16. OscarOmist表示:

    buy cheap clomid: Clom Health – how to get generic clomid without prescription

  17. 1win_kqpr表示:

    how to activate bonus code in 1win https://1win5070.ru/ .

  18. Stormskn表示:

    Онлайн общение с психологом. Психолог онлайн отзывы. Анонимный видео чат.

    Мы обязательно поможем преодолеть эмоциональный кризис, избавиться от тревожности и апатии, справиться со стрессом и депрессией, связанными с неуверенностью и многим другим.
    Психолог Москва. Психолог СПБ. Психолог онлайн.
    Индивидуальное консультирование.

  19. RussellCof表示:

    PredniHealth: buy prednisone online usa – PredniHealth

  20. посчитать полис осаго https://www.niievmash.ru .

  21. Sazrjth表示:

    Заказать диплом любого института!
    Купить диплом об образовании. Приобретение документа о высшем образовании через надежную фирму дарит ряд преимуществ. Такое решение помогает сберечь как личное время, так и серьезные деньги. gracebook.app/blogs/29012/Дипломы-которые-открывают-двери

  22. Diplomi_qoEa表示:

    Заказать диплом любого университета!
    Мы предлагаем документы университетов, расположенных в любом регионе Российской Федерации.
    diplomers.com/kupit-diplom-vuza-s-zaneseniem-v-reestr-10/

  23. Sazrqzw表示:

    Приобрести диплом института по доступной стоимости возможно, обращаясь к проверенной специализированной компании. Приобрести документ института вы можете в нашем сервисе. cyberdefenseprofessionals.com/companies/originals-diplomsi

  24. Iariorrow表示:

    Купить диплом университета по доступной цене можно, обращаясь к надежной специализированной фирме. Купить документ о получении высшего образования можно в нашей компании. rusd-diplomj.ru/kupit-diplom-visshem-obrazovanii-zaneseniem-reestr-14

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

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