網頁圖示的製作方式

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

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

  1. Billycet表示:

    аренда автомобиля в минеральных водах без водителя аренда машины в минеральных водах без водителя

  2. DavidSooni表示:

    pharmacy website india USA India Pharm indian pharmacy paypal

  3. Jariorvjq表示:

    Где купить диплом по нужной специальности?
    Наша компания предлагаетвыгодно приобрести диплом, который выполняется на бланке ГОЗНАКа и заверен печатями, водяными знаками, подписями. Документ пройдет лубую проверку, даже при помощи профессиональных приборов. Решите свои задачи быстро и просто с нашими дипломами. Приобрести диплом ВУЗа! tadhamon.tn/read-blog/2385_kupit-diplom-o-vysshem-obrazovanii.html

  4. DavidSooni表示:

    UsaIndiaPharm USA India Pharm reputable indian online pharmacy

  5. Billycet表示:

    аренда авто минеральные воды без водителя посуточно http://arenda-avto-mineralnye-vody.ru

  6. JasonCag表示:

    прокат авто калининград храброво arenda-avto-hrabrovo.ru/

  7. Robertmob表示:

    просто прокат авто в москве https://arenda-avto213.ru

  8. aquasculpt表示:

    I was suggested this website by way of my cousin. I am now not positive whether or not this publish is written by means of
    him as nobody else understand such certain approximately my problem.

    You’re amazing! Thank you!

  9. Waltonnix表示:

    UsaIndiaPharm: UsaIndiaPharm – UsaIndiaPharm

  10. CarltonUnith表示:

    http://usaindiapharm.com/# UsaIndiaPharm

  11. FrankGlora表示:

    UsaIndiaPharm: top 10 pharmacies in india – UsaIndiaPharm

  12. mostbet_jcEn表示:

    мостбет скачать казино http://mostbet6033.ru .

  13. FrankGlora表示:

    UsaIndiaPharm: indianpharmacy com – USA India Pharm

  14. Iariornvc表示:

    Заказать диплом университета по невысокой цене вы можете, обращаясь к проверенной специализированной фирме. Заказать документ института вы сможете в нашем сервисе. diplomp-irkutsk.ru/kupit-diplom-s-registratsiej-v-reestre-bistro-i-udobno-5

  15. CarltonUnith表示:

    https://usaindiapharm.com/# USA India Pharm

  16. Waltonnix表示:

    india pharmacy mail order: best online pharmacy india – USA India Pharm

  17. Mazrney表示:

    Приобрести диплом о высшем образовании!
    Мы оказываем услуги по изготовлению и продаже документов об окончании любых университетов Российской Федерации. Документы производятся на настоящих бланках. forummichiganrp.moibb.ru/viewtopic.php?f=21&t=1232

  18. Georgeunula表示:

    USA India Pharm: best india pharmacy – buy prescription drugs from india

  19. FrankGlora表示:

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

  20. Waltonnix表示:

    UsaIndiaPharm: indian pharmacies safe – buy prescription drugs from india

  21. Hello there! Do you know if they make any plugins to
    assist with SEO? I’m trying to get my blog to rank for
    some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Many thanks!

  22. Georgeunula表示:

    USA India Pharm: indian pharmacies safe – UsaIndiaPharm

  23. Georgeunula表示:

    india pharmacy: UsaIndiaPharm – USA India Pharm

  24. Lazrkvo表示:

    Выгодно купить диплом любого института!
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по невысоким ценам— diplomk-v-krasnodare.ru/kupit-diplom-vracha-po-lechebnomu-delu-vigodno/

  25. Mazrdaz表示:

    Мы изготавливаем дипломы любой профессии по доступным ценам. Стараемся поддерживать для заказчиков адекватную политику цен. Для нас очень важно, чтобы документы были доступными для большого количества наших граждан.
    Заказ диплома, который подтверждает обучение в университете, – это выгодное решение. Купить диплом ВУЗа: ry-diplom.com/diplom-kupit-ofitsialno-3/

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

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