網頁圖示的製作方式

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

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

28,761 Responses

  1. RobertPaync表示:

    canadianpharmacymeds canadian pharmacy near me legit canadian pharmacy online

  2. Sazreis表示:

    Приобрести документ о получении высшего образования можно в нашей компании. Мы оказываем услуги по продаже документов об окончании любых ВУЗов России. Вы сможете получить диплом по любой специальности, включая документы СССР. Гарантируем, что в случае проверки документа работодателями, каких-либо подозрений не возникнет. diploml-174.ru/kupit-diplom-instituta-s-reestrom-bistro-i-nedorogo-3/

  3. EdwinWency表示:

    www india pharm: www india pharm – www india pharm

  4. RobertPaync表示:

    Agb Mexico Pharm mexico drug stores pharmacies purple pharmacy mexico price list

  5. Trenterone表示:

    mexican border pharmacies shipping to usa: Agb Mexico Pharm – Agb Mexico Pharm

  6. EdwinWency表示:

    top 10 pharmacies in india: cheapest online pharmacy india – india online pharmacy

  7. 721490 44791quite good post, i certainly enjoy this wonderful web site, persist with it 814530

  8. page表示:

    Wonderful article! We will be linking to this particularly great post on our website.
    Keep up the good writing.

  9. где купить алкоголь в москве ночью http://www.dostavka-alkogolya248.ru .

  10. Everyone loves it when people get together and share ideas.
    Great site, keep it up!

  11. Sazrpbv表示:

    Мы готовы предложить дипломы любых профессий по приятным тарифам.– diplomus-spb.ru/pokupka-diplomov-s-reestrom/

  12. MatthewTek表示:

    http://wwwindiapharm.com/# www india pharm

  13. ChesterFus表示:

    pharmacy website india: www india pharm – indianpharmacy com

  14. bokep indo表示:

    Oh my goodness! Impressive article dude!
    Thank you so much, However I am going through problems with your
    RSS. I don’t understand the reason why I cannot subscribe to it.
    Is there anybody having the same RSS issues? Anyone that
    knows the answer will you kindly respond? Thanks!!

  15. Mazrkxo表示:

    Где приобрести диплом специалиста?
    Мы предлагаем документы об окончании любых университетов России. Документы изготавливаются на настоящих бланках. Рєzyrofisher.co.uk/employer/premialnie-diplom-24

  16. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт крупногабаритной техники в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. ChesterFus表示:

    mexican online pharmacies prescription drugs: mexican rx online – Agb Mexico Pharm

  18. MatthewTek表示:

    https://wwwindiapharm.com/# www india pharm

  19. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервисные центры по ремонту техники в мск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  20. Trenterone表示:

    Agb Mexico Pharm: mexican pharmaceuticals online – mexico drug stores pharmacies

  21. Supplier Sinar Baja Medan – Harga BESI BAJA Terlengkap dikota medan, Jual
    BESI ASH PUTIH Terbaik di medan, Supplier BESI EXPANDED Terbaik di medan , Harga PLAT HITAM Terlengkap
    dikota medan – Sinar Baja

  22. Xazrpzn表示:

    Заказать диплом ВУЗа!
    Мы изготавливаем дипломы любой профессии по выгодным ценам. Вы покупаете документ через надежную компанию. : digicoshxyz.copiny.com/question/details/id/1072941

  23. Lazrzdi表示:

    Диплом любого университета Российской Федерации!
    Без получения диплома достаточно сложно было продвигаться вверх по карьерной лестнице. Именно из-за этого решение о покупке диплома следует считать рациональным. Заказать диплом любого университета sealedraid.flybb.ru/viewtopic.php?f=9&t=698&sid=7011287787beadf406d7b05d0ade5fe6

  24. EdwinWency表示:

    mexican rx online: mexican mail order pharmacies – Agb Mexico Pharm

  25. bokep hijab表示:

    Hi there, I discovered your blog by way of Google
    at the same time as looking for a related matter, your website got here up, it appears to be like great.
    I have bookmarked it in my google bookmarks.
    Hi there, simply become aware of your weblog through Google, and found that it is really informative.
    I am gonna be careful for brussels. I will be grateful if
    you happen to proceed this in future. Numerous other folks might be
    benefited from your writing. Cheers!

  26. ChesterFus表示:

    medication from mexico pharmacy: Agb Mexico Pharm – mexican rx online

  27. Very rapidly this site will be famous among all blog viewers, due to it’s pleasant content

  28. RobertPaync表示:

    www india pharm www india pharm reputable indian online pharmacy

  29. Dnrtuod表示:

    Где заказать диплом по необходимой специальности?
    Мы изготавливаем дипломы любой профессии по невысоким ценам. Мы готовы предложить документы ВУЗов, которые расположены в любом регионе России. Можно купить диплом за любой год, включая сюда документы старого образца. Документы выпускаются на бумаге самого высшего качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. Документы заверяются необходимыми печатями и штампами. Стараемся поддерживать для покупателей адекватную политику тарифов. Для нас очень важно, чтобы документы были доступны для большого количества граждан. prodiplome.com/kupit-attestati-za-11-2-6

  30. EdwinWency表示:

    vipps approved canadian online pharmacy: GoCanadaPharm – canadian pharmacy

發佈留言

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