網頁圖示的製作方式

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

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

28,457 Responses

  1. Jamesavata表示:

    пин ап – пин ап казино зеркало

  2. Williamuniot表示:

    пинап казино – pinup 2025

  3. Brian near me表示:

    This is a great article!

  4. Ophelia表示:

    Wow, marvelous blog layout! How lengthy have you ever been blogging for?
    you make running a blog glance easy. The whole glance of your web site is wonderful,
    as smartly as the content!

  5. JesseDex表示:

    пин ап вход: https://pinupkz.life/

  6. ycoo.ir表示:

    Oh my goodness! Impressive article dude! Thanks, However I am going
    through issues with your RSS. I don’t know the reason why I cannot join it.
    Is there anyone else having similar RSS issues? Anybody who knows the answer can you
    kindly respond? Thanx!!

  7. Kathy表示:

    Why people still use to read news papers when in this technological
    globe everything is existing on net?

  8. Hester表示:

    Undeniably believe that that you said. Your favorite reason seemed
    to be on the internet the easiest thing to bear in mind of.

    I say to you, I certainly get irked at the same time as other people consider issues
    that they plainly do not know about. You managed to
    hit the nail upon the top as well as defined out the whole thing without having side-effects , folks can take a signal.
    Will likely be back to get more. Thanks

  9. Darwin表示:

    Hello, Neat post. There is an issue together with your site in web explorer, would
    check this? IE nonetheless is the marketplace leader and a big section of people will leave out your excellent writing because of this problem.

  10. Levi表示:

    Hi there, after reading this remarkable article i am too
    cheerful to share my know-how here with friends.

  11. mostbet_ysKl表示:

    мостбет скачать https://mostbet6006.ru .

  12. Williamuniot表示:

    pinup 2025 – пин ап казино зеркало

  13. 1win_nsMa表示:

    зайти в 1вин https://1win6020.ru .

  14. Eloise表示:

    Hello there, just became alert to your blog through Google,
    and found that it is really informative. I am going to watch out for brussels.
    I’ll be grateful if you continue this in future. A lot of people will be benefited
    from your writing. Cheers!

  15. JesseDex表示:

    пин ап вход: https://pinupkz.life/

  16. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт бытовой техники в мск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  17. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт бытовой техники в мск
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  18. JesseDex表示:

    пин ап: https://pinupkz.life/

  19. Situs Penipu表示:

    If you want to grow your know-how just keep visiting this site and be updated with the most recent news update posted here.

  20. This is a great article!

  21. Jamesavata表示:

    пинап казино – пин ап казино

  22. Dwayneseisa表示:

    Tadalafil Easy Buy cialis without a doctor prescription Tadalafil Easy Buy

發佈留言

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