網頁圖示的製作方式

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

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

17,271 Responses

  1. Jeffreywex表示:

    https://gramster.ru/# пин ап вход

  2. WilliamDen表示:

    http://gramster.ru/# пин ап казино

  3. Hi, I do think this is an excellent site. I stumbledupon it 😉 I may revisit yet again since i have saved as a
    favorite it. Money and freedom is the best way to change, may you be rich and continue to help other people.

  4. RobertCow表示:

    пин ап: gramster.ru – пин ап казино

  5. DarrenWab表示:

    пин ап казино официальный сайт gramster пин ап вход

  6. DarrenWab表示:

    пинап казино gramster.ru пин ап вход

  7. Jeffreywex表示:

    http://gramster.ru/# пин ап зеркало

  8. Jeffreywex表示:

    https://gramster.ru/# пин ап

  9. With NJ Bail Bonds it potential for a fast launch from jail, so it is essential to have the perfect NJ Bail Bond agency representing you.

  10. Jamesboype表示:

    https://gramster.ru/# пин ап казино официальный сайт

  11. JeffreyBiody表示:

    Steam Desktop Authenticator https://authenticatorsteam.com is a convenient application for managing two-factor authentication in Steam. Allows you to quickly confirm trades, logins and purchases, providing additional protection for your account.

  12. WilliamDen表示:

    https://gramster.ru/# пинап казино

  13. StephenDeery表示:

    Hello! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in exchanging links or maybe guest authoring a blog article or vice-versa? My blog addresses a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you are interested feel free to send me an email. I look forward to hearing from you! Terrific blog by the way!

    https://saunalux.kiev.ua/pochemu-steklo-dlya-far-vliyaet-na-osveshchenie-i-bezopasnost

  14. DarrenWab表示:

    пин ап казино gramster.ru пин ап казино

  15. So, engineers at Mission Management had to plan a method to adapt the air flow from the lunar module by the square lithium hydroxide canisters.

  16. JeffreyBiody表示:

    Steam Desktop Authenticator https://authenticatorsteam.com is a convenient application for managing two-factor authentication in Steam. Allows you to quickly confirm trades, logins and purchases, providing additional protection for your account.

  17. Jamesboype表示:

    https://gramster.ru/# пин ап казино зеркало

  18. What’s Happening i am new to this, I stumbled upon this I have found It positively useful and it has aided me out loads.
    I hope to contribute & assist different users like its helped
    me. Good job.

  19. Jamesboype表示:

    https://gramster.ru/# pinup 2025

  20. WilliamDen表示:

    https://gramster.ru/# пин ап

發佈留言

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