網頁圖示的製作方式

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

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

15,779 Responses

  1. KennethPah表示:

    buying generic clomid without a prescription clomidonpharm order generic clomid for sale

  2. Kellyadvah表示:

    Производство шпона в Москве https://shpon-massiv.ru качественный шпон из натурального дерева для мебели, дверей и отделки. Широкий выбор пород, гибкие размеры и выгодные цены.

  3. Myronrib表示:

    Предлагаем стекла для спецтехники https://steklo-ufa.ru любых типов и размеров. Прочные, устойчивые к ударам и погодным условиям материалы.

  4. KennethPah表示:

    purchase cipro cipro for sale ciprofloxacin mail online

  5. SamuelBix表示:

    can you get clomid no prescription: clomid on pharm – where to get clomid without insurance

  6. 有道词典是由网易有道出品的全球首款基于搜索引擎技术的全能免费语言翻译软件。简介. 支持中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、藏语、西语等109种语言翻译。拍照翻译、语音翻译、对话翻译、在线翻译、离线翻译更顺畅。更多的翻译 https://www.youdaoo.com

  7. MiguelUnind表示:

    https://prednibest.com/# online prednisone

  8. DanielAbice表示:

    http://clomidonpharm.com/# can i get clomid

  9. tronscan表示:

    Hi, I do think this is an excellent site. I stumbledupon it 😉 I am going to come back yet again since i have saved as a favorite it. Money and freedom is the best way to change, may you be rich and continue to help other people.

  10. MiguelUnind表示:

    https://prednibest.com/# prednisone 50 mg price

  11. RobertJar表示:

    cost cheap clomid now: clomid on pharm – can i get generic clomid pill

  12. DanielAbice表示:

    https://prednibest.com/# prednisone brand name in usa

  13. RobertJar表示:

    where can i buy cipro online: buy cipro cheap – buy cipro online without prescription

  14. RobertJar表示:

    get cheap clomid no prescription: order clomid – how to buy cheap clomid now

  15. Pretty! This was an incredibly wonderful post. Thank you for providing these details.

  16. KennethPah表示:

    can i buy amoxicillin online Amox Star can you buy amoxicillin over the counter canada

  17. KennethPah表示:

    prednisone 60 mg PredniBest prednisone online india

  18. The low tops will look just about the identical as they did when the present was known as the “Robert Haillet” – you realize, clean white leather upper, triple perforated stripes and green accents.

  19. snaptik表示:

    You have made some decent points there. I looked on the web to learn more about the issue and found most individuals will go along with your views on this site.

  20. Auahlap表示:

    Just wanted to express my gratitude for the wealth of information available here. It’s like having a personal library at my fingertips! Kost Murah

  21. Number of designs : As the material used are cheap , the makers don’t shy from experimenting with its seems and new add ons.

  22. GichardPheve表示:

    Hi i am kavin, its my first occasion to commenting anywhere, when i read this piece of writing i thought i could also create comment due to this good article.

    смотреть сериалы онлайн бесплатно без регистрации

發佈留言

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