網頁圖示的製作方式

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

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

  1. Derekgroum表示:

    Apotheek online bestellen: online apotheek – ApotheekMax

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

  3. Michaeltor表示:

    Apotek hemleverans idag: Apotek hemleverans recept – apotek online recept

  4. 1win_yjmn表示:

    1win скачать kg http://1win6049.ru .

  5. HomerFaw表示:

    http://apotheekmax.com/# online apotheek

  6. assface表示:

    I am sure this article has touched all the internet visitors, its really really nice piece of writing on building up
    new weblog.

  7. esta usa visa表示:

    Hmm it seems like your site ate my first
    comment (it was super long) so I guess I’ll just sum it up what I had
    written and say, I’m thoroughly enjoying your
    blog. I too am an aspiring blog blogger but I’m still new
    to the whole thing. Do you have any tips for rookie blog writers?
    I’d definitely appreciate it.

  8. Louislen表示:

    http://apotheekmax.com/# de online drogist kortingscode

  9. fingerfucks表示:

    Hey there would you mind sharing which blog platform you’re working with?

    I’m planning to start my own blog in the near future but
    I’m having a hard time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs and I’m looking
    for something unique. P.S Apologies for getting off-topic
    but I had to ask!

  10. HomerFaw表示:

    http://apotheekmax.com/# Betrouwbare online apotheek zonder recept

  11. HomerFaw表示:

    https://kamagrapotenzmittel.com/# Kamagra Oral Jelly kaufen

  12. alex-machine表示:

    ремонт посудомоечных машин ремонт холодильников

  13. Michaeltor表示:

    Beste online drogist: Betrouwbare online apotheek zonder recept – ApotheekMax

  14. Louislen表示:

    https://apotheekmax.com/# de online drogist kortingscode

  15. Michaeltor表示:

    apotek online recept: Apotek hemleverans idag – apotek online recept

  16. Malcolmseern表示:

    Online apotheek Nederland met recept Apotheek Max Apotheek Max

  17. ให้บริการยอดเยี่ยมสนุกมากเล่นสล็อตเว็บตรงกับเว็บนี้แตกง่ายที่สุด ขอแนะนำเลยครับ เป็นผู้ให้บริการที่มีคุณภาพสูงมาก ถ้าอยากเล่น สล็อตเว็บตรงแนะนำเลยครับ

  18. Derekgroum表示:

    Kamagra Oral Jelly kaufen: Kamagra kaufen – Kamagra Oral Jelly kaufen

  19. SLOT表示:

    ให้บริการยอดเยี่ยมสนุกมากเล่นสล็อตเว็บตรงกับเว็บนี้แตกง่ายที่สุด ขอแนะนำเลยครับ เป็นผู้ให้บริการที่มีคุณภาพสูงมาก

  20. Derekgroum表示:

    Apotek hemleverans idag: Apotek hemleverans idag – Apotek hemleverans idag

  21. Derekgroum表示:

    de online drogist kortingscode: ApotheekMax – online apotheek

  22. Nice post. I ѡas checking constantⅼy thіѕ blog and Ι’m impressed!
    Ⅴery usefᥙl information specifically the last рart 🙂 I care
    fⲟr such info much. I wаs looking fоr this рarticular info for
    a ⅼong timе. Thɑnk yоu and best of luck.

    Heгe іs my site – Sports Betting

  23. Simply wish to say your article is as surprising.
    The clarity in your post is just great and i can assume
    you are an expert on this subject. Well with your permission allow me to
    grab your feed to keep updated with forthcoming post.

    Thanks a million and please continue the enjoyable work.

  24. Michaeltor表示:

    Apotek hemleverans recept: Apotek hemleverans recept – apotek online recept

  25. HomerFaw表示:

    https://kamagrapotenzmittel.com/# Kamagra kaufen ohne Rezept

發佈留言

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