網頁圖示的製作方式

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

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

32,774 Responses

  1. MicahTails表示:

    USMexPharm: mexican pharmacy – buying prescription drugs in mexico

  2. Eanryig表示:

    Для удачного продвижения по карьере потребуется наличие официального диплома о высшем образовании. Приобрести диплом об образовании у проверенной компании: diplomass.com/kupit-diplom-v-samare-bistro-i-bez-lishnix-zatrat/

  3. This design is incredible! You most certainly know how to keep a reader entertained.

    Between your wit and your videos, I was almost moved to start my own blog (well,
    almost…HaHa!) Excellent job. I really loved what you had to say, and more than that, how you presented it.

    Too cool!

  4. mostbet_scEn表示:

    мостбет chrono mostbet6033.ru .

  5. 1win_hyEt表示:

    1 win официальный сайт 1win6045.ru .

  6. MicahTails表示:

    reputable mexican pharmacies online: Mexican pharmacy ship to USA – mexico pharmacies prescription drugs

  7. MicahTails表示:

    mexican pharmacy: USMexPharm – certified Mexican pharmacy

  8. SLOT表示:

    แนะนำเพื่อนมาเล่น ได้โบนัสอีกด้วย https://nwcruiseship.org/

  9. Hi there to every one, the contents existing at this web
    site are genuinely awesome for people knowledge, well, keep up
    the good work fellows.

  10. as I did not work hard,ワンピース コスプレ エロI did not have to eat hard,

  11. Cletusiders表示:

    certified Mexican pharmacy: usa mexico pharmacy – USMexPharm

  12. DennisDor表示:

    UsMex Pharm: mexico drug stores pharmacies – Us Mex Pharm

  13. DennisDor表示:

    certified Mexican pharmacy: certified Mexican pharmacy – mexican pharmacy

  14. mostbet_uusa表示:

    мостбет мобильная версия скачать http://mostbet6035.ru/ .

  15. I simply could not leave your web site prior to suggesting that I really enjoyed the usual info a
    person provide for your guests? Is going to be again regularly in order to check out new posts

  16. SteveViand表示:

    https://usmexpharm.shop/# Us Mex Pharm

  17. Cazrakt表示:

    Где приобрести диплом специалиста?
    Мы изготавливаем дипломы психологов, юристов, экономистов и прочих профессий по выгодным ценам. Важно, чтобы дипломы были доступными для большинства граждан. Приобрести диплом об образовании diplomist.com/kupite-diplom-ob-obrazovanii-s-registratsiej-v-reestre-3/

  18. SteveViand表示:

    https://usmexpharm.com/# Us Mex Pharm

  19. Lazrtoj表示:

    Диплом ВУЗа Российской Федерации!
    Без института достаточно сложно было продвинуться по карьере. По этой причине решение о заказе диплома стоит считать выгодным и рациональным. Заказать диплом о высшем образовании jobspaceindia.com/companies/gosznac-diplom-24

  20. Trefplu表示:

    Выгодно купить диплом об образовании. Заказ диплома через качественную и надежную фирму дарит множество плюсов для покупателя. Данное решение позволяет сберечь время и существенные финансовые средства. oldforum.citysakh.ru/?talkid=30165

  21. check it out表示:

    Hi there I am so grateful I found your weblog, I really found
    you by mistake, while I was searching on Google for something else,
    Regardless I am here now and would just like to
    say cheers for a tremendous post and a all round enjoyable blog (I also love the theme/design), I don’t have time to go through it all at
    the moment but I have book-marked it and also included your RSS feeds, so when I have time
    I will be back to read a great deal more, Please do keep
    up the awesome job.

  22. SteveViand表示:

    http://usmexpharm.com/# certified Mexican pharmacy

  23. Cletusiders表示:

    mexico pharmacies prescription drugs: Us Mex Pharm – Mexican pharmacy ship to USA

  24. DennisDor表示:

    Us Mex Pharm: Us Mex Pharm – reputable mexican pharmacies online

  25. RandyKargo表示:

    mexican pharmacy usa mexico pharmacy mexican pharmaceuticals online

  26. mostbet_iusa表示:

    мостбет официальный сайт мостбет официальный сайт .

發佈留言

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