網頁圖示的製作方式

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

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

29,866 Responses

  1. I have been surfing on-line more than 3 hours today,
    yet I never discovered any attention-grabbing article like yours.

    It is lovely price sufficient for me. In my opinion, if all webmasters and bloggers made just
    right content as you probably did, the web shall be a lot more useful than ever
    before.

  2. Hi, I do think this is an excellent blog. I stumbledupon it 😉 I will return once again since
    I saved as a favorite it. Money and freedom is the greatest way to change, may you be rich and
    continue to guide others.

  3. ChesterFus表示:

    indianpharmacy com: www india pharm – www india pharm

  4. EdwinWency表示:

    buying prescription drugs in mexico online: medicine in mexico pharmacies – п»їbest mexican online pharmacies

  5. I know this if off topic but I’m looking into starting my own blog
    and was curious what all is needed to get set up?
    I’m assuming having a blog like yours would cost a
    pretty penny? I’m not very internet savvy so I’m not 100% certain. Any recommendations or advice would be greatly appreciated.
    Thank you

  6. Hi, I do think your site could possibly be having browser compatibility problems.
    Whenever I take a look at your blog in Safari, it looks
    fine but when opening in I.E., it’s got some overlapping issues.
    I merely wanted to give you a quick heads up! Apart from that, wonderful blog!

  7. EdwinWency表示:

    buying from canadian pharmacies: go canada pharm – canadian valley pharmacy

  8. EdwinWency表示:

    Agb Mexico Pharm: best online pharmacies in mexico – п»їbest mexican online pharmacies

  9. Sazrccy表示:

    Мы изготавливаем дипломы психологов, юристов, экономистов и других профессий по приятным ценам. О преимуществах приобретения документов у нас
    Вы заказываете диплом через надежную фирму. Это решение сэкономит не только средства, но и ваше время.
    На этом плюсы не заканчиваются, их намного больше:
    • Дипломы изготавливаются на фирменных бланках с печатями и подписями;
    • Дипломы любого ВУЗа РФ;
    • Стоимость в разы меньше той, которую довелось бы платить на очном обучении в университете;
    • Быстрая доставка в любые регионы России.
    Купить диплом института– http://c904581v.beget.tech/2025/03/03/oficialnyy-diplom-novye-gorizonty-dlya-vashey-karery.html/ – c904581v.beget.tech/2025/03/03/oficialnyy-diplom-novye-gorizonty-dlya-vashey-karery.html

  10. Trenterone表示:

    escrow pharmacy canada: reputable canadian pharmacy – canadian pharmacy drugs online

  11. Diplomi_bfSa表示:

    петербург купить диплом о высшем образовании diplomys-vsem.ru .

  12. MatthewTek表示:

    https://gocanadapharm.com/# canadian pharmacy online

  13. Trenterone表示:

    canadian pharmacy 365: canadian mail order pharmacy – canadapharmacyonline com

  14. MatthewTek表示:

    http://gocanadapharm.com/# canadian pharmacy review

  15. Sazrwvh表示:

    Хочу рассказать о своем опыте по заказу аттестата пту, думал это не реально и стал искать информацию в сети, про диплом фармацевта с занесением в реестр дистанционного обучения, бланки дипломов о высшем образовании купить, покупка дипломов, диплом среднего профессионального образования с занесением в реестр, купить диплом о высшем образовании с занесением в реестр в иркутске, постепенно вникая в суть дела нашел отличный материал здесь kyc-diplom.com/geography/blagoveshchensk.html)

  16. hi!,I like your writing very a lot! percentage we be in contact extra about your post on AOL?
    I need an expert in this space to solve my problem. May be that is you!
    Having a look forward to look you.

  17. ChesterFus表示:

    best online pharmacy india: top 10 online pharmacy in india – indian pharmacy paypal

  18. I take pleasure in, result in I found just what I was
    looking for. You have ended my four day long hunt! God Bless you man. Have a great
    day. Bye

  19. ChesterFus表示:

    cheapest online pharmacy india: indian pharmacies safe – www india pharm

  20. Valuable information. Lucky me I discovered your website unintentionally, and I am shocked why
    this accident didn’t took place in advance! I bookmarked it.

  21. 1win_qkpn表示:

    1win официальный сайт скачать https://1win6004.ru/ .

  22. 18win表示:

    Thank you for the auspicious writeup. It in truth used to be a entertainment account it.
    Look complex to far introduced agreeable from you!
    However, how can we communicate?

  23. MatthewTek表示:

    https://agbmexicopharm.shop/# Agb Mexico Pharm

  24. pet exam表示:

    Very energetic article, I loved that bit. Will there be a part 2?

  25. Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I get actually enjoyed account your
    blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently fast.

  26. RobertPaync表示:

    canadian pharmacy king GoCanadaPharm legit canadian pharmacy

  27. ChesterFus表示:

    canadian pharmacy cheap: GoCanadaPharm – best rated canadian pharmacy

  28. ремонт грузовых карданных валов http://4-x-4.ru/remont-i-balansirovka-kardannyh-valov// .

  29. Fantastic website. A lot of useful information here. I’m
    sending it to several buddies ans also sharing in delicious.

    And certainly, thanks to your sweat!

  30. Trenterone表示:

    best online pharmacy india: Online medicine order – www india pharm

發佈留言

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