網頁圖示的製作方式

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

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

6,206 Responses

  1. Wesleycrins表示:

    Kevin De Bruyne https://manchester-city.kevin-de-bruyne-ar.com is a name every football fan knows today.

  2. Qazrsvb表示:

    Здравствуйте!
    Сколько стоит диплом высшего и среднего образования и как это происходит?.
    Купить диплом о высшем образовании.
    http://www.euusedgoodstrading.com/read-blog/2792

  3. Sazrzqi表示:

    Привет!
    Покупка диплома о среднем полном образовании: как избежать мошенничества?
    bdfeu.ukraine7.com/t19982-topic#36429
    Рады помочь!.

  4. ngentot表示:

    Hello, I do think your website could be having web browser compatibility issues. Whenever I take a look at your website in Safari, it looks fine however when opening in IE, it’s got some overlapping issues. I just wanted to give you a quick heads up! Aside from that, great blog.

  5. ngentot pepek表示:

    Way cool! Some extremely valid points! I appreciate you writing this post and also the rest of the website is very good.

  6. Hello my friend! I want to say that this post is amazing, nice written and come with approximately all significant infos.
    I’d like to peer more posts like this .

  7. WalterGed表示:

    In 2018, the basketball world witnessed one of the most remarkable transformations in NBA history. LeBron James https://los-angeles-lakers.lebronjames-ar.com one of the greatest players of our time, decided to leave his hometown Cleveland Cavaliers and join the Los Angeles Lakers.

  8. Cazroat表示:

    Здравствуйте!
    Мы предлагаем документы ВУЗов, расположенных в любом регионе Российской Федерации. Можно купить диплом за любой год, включая документы старого образца. Документы печатаются на “правильной” бумаге высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригинала. Они будут заверены всеми обязательными печатями и подписями.
    rab.chsl.ru/club/user/2/blog/8/

  9. Sazrqtj表示:

    Привет!
    Как избежать рисков при покупке диплома колледжа или ВУЗа в России
    worldgonews.ru/legkiy-put-k-diplomirovannomu-uspehu-byistro-i-nadezhno
    Будем рады вам помочь!.

  10. Rogertaith表示:

    Cristiano Ronaldo https://al-nassr.cristiano-ronaldo.ae is one of the greatest names in football history, with his achievements inspiring millions of fans around the world.

  11. CharlesDob表示:

    Karim Benzema https://al-ittihad.karimbenzema.ae is a name worthy of admiration and respect in the world of football.

  12. Lazrubd表示:

    Добрый день!
    Где заказать диплом специалиста?
    Купить диплом о высшем образовании.
    http://www.startspresto.ru/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=145

  13. JeffreyVek表示:

    RDBox.de https://rdbox.de bietet schallgedammte Gehause fur 3D-Drucker, die eine sehr leise Druckumgebung schaffen – nicht lauter als ein Kuhlschrank. Unsere Losungen sorgen fur stabile Drucktemperatur, Vibrationsisolierung, Luftreinigung und mobile App-Steuerung.

  14. porn表示:

    Next time I read a blog, Hopefully it doesn’t disappoint me as much as this one. After all, I know it was my choice to read through, nonetheless I actually thought you would probably have something useful to say. All I hear is a bunch of crying about something that you could fix if you were not too busy seeking attention.

  15. ngentot pepek表示:

    You made some good points there. I looked on the internet to learn more about the issue and found most individuals will go along with your views on this website.

  16. Lazrwff表示:

    Здравствуйте!
    Мы предлагаем дипломы любой профессии по доступным ценам.
    newmanstrength.com/%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%BF%D1%80%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BA%D1%83%D0%BF%D0%B8%D1%82%D1%8C/

  17. kontol表示:

    I blog often and I really appreciate your content. This great article has truly peaked my interest. I will bookmark your blog and keep checking for new details about once a week. I opted in for your RSS feed as well.

  18. kontol besar表示:

    Hello there! This article couldn’t be written any better! Reading through this article reminds me of my previous roommate! He continually kept talking about this. I’ll forward this information to him. Pretty sure he’ll have a very good read. I appreciate you for sharing!

  19. Dnrtjqx表示:

    Здравствуйте!
    Приобрести документ института можно у нас в Москве.
    diploms-x.com/kupit-diplom-ekaterinbur
    Удачи!

  20. Mazrlxi表示:

    Добрый день!
    Приобретение диплома ПТУ с сокращенной программой обучения в Москве
    shabab.galaxy.ps/%D0%BA%D1%83%D0%BF%D0%B8%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D0%B8%D0%B1%D0%B8%D1%80%D1%81%D0%BA/

  21. Xazrzbi表示:

    Здравствуйте!
    Предлагаем документы техникумов, расположенных на территории всей России. Вы можете приобрести диплом от любого учебного заведения, за любой год, указав необходимую специальность и оценки за все дисциплины. Документы печатаются на бумаге высшего качества. Это дает возможность делать настоящие дипломы, которые невозможно отличить от оригинала. Они заверяются необходимыми печатями и штампами.
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по разумным ценам. Цена будет зависеть от выбранной специальности, года выпуска и ВУЗа. Стараемся поддерживать для покупателей адекватную политику тарифов. Важно, чтобы документы были доступны для большого количества граждан.
    arusak-diploms-srednee.ru/diplom-sredne-spetcialnoe-obrazovanie  
    Успешной учебы!

  22. link bokep表示:

    When I originally commented I appear to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve four emails with the exact same comment. There has to be an easy method you can remove me from that service? Kudos.

發佈留言

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