網頁圖示的製作方式

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

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

  1. MatthewMof表示:

    PredniHealth how to buy prednisone PredniHealth

  2. RussellCof表示:

    buy cheap clomid without dr prescription: cost of clomid for sale – clomid no prescription

  3. OscarOmist表示:

    prednisone 20 mg purchase: PredniHealth – prednisone 10 mg tablets

  4. Rogerbup表示:

    http://prednihealth.com/# best pharmacy prednisone

  5. OscarOmist表示:

    Amo Health Care: price of amoxicillin without insurance – Amo Health Care

  6. Rogerbup表示:

    https://clomhealth.shop/# how to buy generic clomid without rx

  7. Judsonrax表示:

    cheap clomid tablets: Clom Health – cost of clomid pills

  8. MatthewMof表示:

    how to get clomid without rx get cheap clomid no prescription clomid pills

  9. Finovexispro表示:

    Link exchange is nothing else but it is only placing the
    other person’s blog link on your page at appropriate place and
    other person will also do similar in support of you.

  10. Judsonrax表示:

    where can i buy cheap clomid no prescription: Clom Health – can you buy generic clomid pills

  11. Judsonrax表示:

    where to get clomid without insurance: can i get cheap clomid online – where can i buy generic clomid without a prescription

  12. Cazrxhm表示:

    Привет!
    Мы изготавливаем дипломы любых профессий по приятным ценам. Стоимость зависит от той или иной специальности, года получения и университета: п»їtutdiploms.com/

  13. аппарат узи купить цена в россии аппарат узи купить цена в россии .

  14. Heya i am for the first time here. I found this board and
    I find It truly useful & it helped me out much. I hope to give something back and aid others like you helped me.

  15. Mazripu表示:

    Мы можем предложить дипломы психологов, юристов, экономистов и других профессий по невысоким тарифам. Приобретение документа, который подтверждает окончание университета, – это грамотное решение. Приобрести диплом любого ВУЗа: pokypke.flybb.ru/viewtopic.phpf=2&t=813

  16. RussellCof表示:

    Amo Health Care: Amo Health Care – amoxicillin 500 mg without prescription

  17. OscarOmist表示:

    Amo Health Care: order amoxicillin online – amoxicillin 775 mg

  18. Aw, this was a really good post. Taking a few minutes and actual effort to make a really good article…
    but what can I say… I hesitate a lot and never seem to
    get nearly anything done.

  19. RussellCof表示:

    prednisone cream over the counter: 10 mg prednisone tablets – prednisone 20 mg purchase

  20. melbet_maSi表示:

    melbet официальный сайт https://www.melbet1017.ru .

  21. аппарат узи цена в россии новый http://www.kupit-uzi-apparat14.ru/ .

  22. I’m gone to tell my little brother, that he should also pay a quick visit this website
    on regular basis to obtain updated from newest news.

  23. полис осаго калькулятор https://www.niievmash.ru .

  24. Sazrpuu表示:

    Купить диплом института по доступной стоимости возможно, обращаясь к надежной специализированной фирме. Мы оказываем услуги по продаже документов об окончании любых университетов России. Приобрести диплом ВУЗа– amazonadvt.com/profile/christophercur

  25. Xazrupr表示:

    Приобрести диплом о высшем образовании!
    Мы готовы предложить дипломы любых профессий по невысоким ценам. Вы приобретаете диплом в надежной и проверенной временем компании. : walsallads.co.uk/profile/marcodemko4166

  26. OscarOmist表示:

    pharmacy cost of prednisone: order prednisone on line – PredniHealth

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

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