網頁圖示的製作方式

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

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

  1. kids cloths表示:

    Saved as a favorite, I like your blog.

  2. Diplomi_zlEa表示:

    Добрый день!
    Заказать документ университета можно в нашей компании в столице.
    ast-diploms.com/kupit-diplom-tehnikuma-kolledzha 

  3. коллекция порно смотреть онлайн porn-library.ru .

  4. Diplomi_bzEa表示:

    купить диплом в новоуральске diploms-x.com .

  5. Hi, I do believe this is a great web site. I stumbledupon it 😉 I will come back yet again since I book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to guide others.

  6. This is a good tip especially to those new to the blogosphere. Brief but very accurate information… Appreciate your sharing this one. A must read post!

  7. Trefrdy表示:

    Здравствуйте!
    Как официально приобрести аттестат 11 класса с минимальными затратами времени
    ekra.kz/index.php?subaction=userinfo&user=oducafyby
    Рады оказать помощь!.

  8. Larryhef表示:

    завод подъемно транспортного оборудования подъемное оборудование лифты

  9. Victordieli表示:

    Bayern Munich’s https://bayern.jamal-musiala-ar.com young midfielder, Jamal Musiala, has become one of the brightest talents in European football.

  10. DavidZib表示:

    Thibaut Courtois https://real-madrid.thibaut-courtois-ar.com was born on May 11, 1992 in Belgium.

  11. kubet77表示:

    You are so interesting! I don’t believe I’ve read through something like this before. So great to find someone with some unique thoughts on this issue. Seriously.. many thanks for starting this up. This web site is something that is needed on the web, someone with some originality.

  12. Xgloen表示:

    order speman generic – speman canada fincar drug

  13. Dnrtvfg表示:

    Привет, друзья!
    Заказать документ о получении высшего образования можно в нашей компании.
    asxdiplomik.com/kupit-diplom-o-srednem-obrazovanii
    Успешной учебы!

  14. This is a topic that’s near to my heart… Thank you! Exactly where can I find the contact details for questions?

  15. OscarvaL表示:

    Arsenal https://arsenal.mesut-ozil-ar.com made a high-profile signing in 2013, signing star midfielder Mesut Ozil from Real Madrid.

  16. Mazregi表示:

    Здравствуйте!
    Приобрести документ университета вы сможете в нашей компании в столице. Мы предлагаем документы об окончании любых университетов РФ. Вы получите необходимый диплом по любой специальности, любого года выпуска, в том числе документы Советского Союза. Даем гарантию, что в случае проверки документа работодателями, подозрений не возникнет.
    Мы изготавливаем дипломы любых профессий по выгодным тарифам. Цена может зависеть от определенной специальности, года получения и образовательного учреждения. Стараемся поддерживать для заказчиков адекватную политику тарифов. Для нас важно, чтобы дипломы были доступными для большинства наших граждан.
    sportraketka.ru/poluchite-diplom-byistro-nadezhnyie-sposobyi
    Рады помочь!

  17. KennethDef表示:

    EuroAvia24.com – Cheap flights, hotels and transfers around the world!

  18. Robertfaply表示:

    The Saudi Football League https://saudi-arabian-championship.saudi-pro-league-ar.com known as the Saudi Professional League, is one of the most competitive and dynamic leagues in the world.

  19. IsaiasImaxy表示:

    Rodrigo Goes https://real-madrid.rodrygo-ar.com better known as Rodrigo, is one of the brightest young talents in modern football.

  20. Martinutick表示:

    In an era when many young footballers struggle to find their place at elite clubs, Javi’s https://barcelona.gavi-ar.com story at Barcelona stands out as an exceptional one.

  21. Mazrcet表示:

    Привет!
    Официальная покупка аттестата о среднем образовании в Москве и других городах
    mizunosoccershoesfans.com/read-blog/3329_gramotno-zakazyvaem-dokumenty-v-internete-avtorskij-obzor.html?mode=night

  22. iptv表示:

    I was very pleased to discover this web site. I wanted to thank you for ones time due to this fantastic read!! I definitely appreciated every bit of it and I have you book-marked to check out new stuff on your blog.

  23. Eanrtlg表示:

    Привет!
    Мы готовы предложить дипломы любых профессий по приятным тарифам.
    snaprama.com/read-blog/828_proverennyj-i-nadezhnyj-internet-magazin-s-bolshim-vyborom-diplomov.html

  24. Trefbdp表示:

    Привет, друзья!
    Пошаговая инструкция по официальной покупке диплома о высшем образовании
    boosty.to/zukunft2/posts/cc9b2ee9-289d-4320-94e0-1fde4e3749a4
    Поможем вам всегда!.

  25. iptv表示:

    I couldn’t resist commenting. Very well written.

發佈留言

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