網頁圖示的製作方式

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

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

13,394 Responses

  1. Davidknill表示:

    Свіжі новини України https://lenta.kyiv.ua останні новини з-за кордону, новини політики, економіки, спорту, культури.

  2. StephenVargo表示:

    Популярные репортажи https://infotolium.com в больших фотографиях, новости, события в мире

  3. KennethChona表示:

    Україна свіжі новини https://kiev-pravda.kiev.ua останні події на сьогодні

  4. Eddiepusty表示:

    Новини України https://kiev-online.com.ua останні події в Україні та світі сьогодні, новини України за минулий день онлайн

  5. Lazrtds表示:

    Привет, друзья!
    Мы изготавливаем дипломы любой профессии по приятным ценам.
    newsbizlife.ru/kupit-diplom-vyisokoe-kachestvo-i-nadezhnost

  6. Jamesjeand表示:

    Останні новини України https://gromrady.org.ua сьогодні онлайн – головні події світу

  7. Lazrpoo表示:

    Здравствуйте!
    Купить диплом любого университета.
    blogs.rufox.ru/~sonnick84/48075.htm

  8. Fine way of telling, and nice post to obtain information concerning my presentation subject matter, which i am going to deliver in college.

    Stop by my web blog: how to take tonic greens

  9. Harryhic表示:

    Новинний ресурс https://actualnews.kyiv.ua про всі важливі події в Україні та світі.

  10. RobertKap表示:

    Новини сьогодні https://gau.org.ua останні новини України та світу онлайн

  11. Williamdug表示:

    сколько стоит продвижение сайта seo продвижение сайта казань

  12. BrandonPioge表示:

    продвижение сайта в топ 10 казани https://seo-optimizatsia.ru

  13. It’s remarkable in favor of me to have a web site,
    which is beneficial in favor of my know-how. thanks admin

  14. Dnrtxkt表示:

    Здравствуйте!
    Купить документ о получении высшего образования можно в нашей компании в Москве.
    ast-diplom24.ru/kupit-diplom-rostov-na-donu
    Успехов в учебе!

  15. Dnrtxio表示:

    Привет!
    Заказать документ института можно в нашем сервисе.
    asxdiplomik.com/kupit-diplom-nizhnij-novgorod
    Успешной учебы!

  16. Mr. West posters are truly awesome. They capture his distinctive
    essence flawlessly. Anyone who adores Kanye should certainly grab one.
    They bring a great aspect to any room.

    Plus, the variety of designs you can find is extensive.
    Whether you like minimalist designs or bold artworks, there’s something for
    every taste. They serve as great presents for loved ones who admire Kanye equally.

    Also, owning Kanye images in your home might start great talks with anyone who visits.

    They can serve as focal points, leading to conversations
    about creativity.

    All in all, Kanye posters are a must-have for every dedicated art lover.
    They enhance your living space and display your admiration for a legendary creative genius.

  17. Mazruea表示:

    Привет, друзья!
    Всё о покупке аттестата о среднем образовании: полезные советы
    androidinweb.ru/diplomyi-ot-luchshih-obrazovatelnyih-uchrezhdeniy

  18. Uazrlbi表示:

    Добрый день!
    Заказать диплом о высшем образовании.
    elviraobol.ru/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=568

  19. StevenNah表示:

    продвижение сайта в топ 10 казани заказать продвижение сайта сео

  20. Stephenboure表示:

    Помощь студентам в выполнении рефератов https://referatkupit-oline.ru. Низкие цены и быстрое написание рефератов!

  21. Hi there every one, here every person is sharing
    such know-how, so it’s nice to read this webpage, and I used to pay a quick visit this weblog every day.

  22. I’ve been surfing online more than three hours
    today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my view, if all website owners and bloggers made good
    content as you did, the internet will be much more useful than ever before.

  23. CEO quang huy表示:

    After checking out a number of the articles on your blog, I truly appreciate your technique of blogging. I added it to my bookmark webpage list and will be checking back soon. Take a look at my website too and tell me what you think.

  24. Everything is very open with a very clear clarification of the challenges.
    It was definitely informative. Your site is very helpful.
    Many thanks for sharing!

  25. Lazrniw表示:

    Добрый день!
    Мы можем предложить дипломы любой профессии по выгодным ценам.
    http://www.techhackly.xyz/2024/06/30/купить-дипломы-университета/

  26. YtMp3表示:

    I blog quite often and I genuinely thank you for your information. This article has truly peaked my interest. I’m going to bookmark your site and keep checking for new information about once per week. I subscribed to your RSS feed too.

  27. IWIN表示:

    Hi, I do believe this is an excellent blog. I stumbledupon it 😉 I’m going to come back yet again since i have bookmarked it. Money and freedom is the best way to change, may you be rich and continue to guide others.

  28. Can you tell us more about this? I’d want to find out some additional information.

發佈留言

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