網頁圖示的製作方式

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

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

13,307 Responses

  1. Buy puts: Puts are options you can buy when you believe a stock market is going lower.

  2. индийский пасьянс гадание онлайн индийский пасьянс гадание онлайн .

  3. Look for a fund having a stubborn vintage track record.

  4. Trefpsx表示:

    Привет, друзья!
    Официальная покупка диплома ПТУ с упрощенной программой обучения
    mandiplomiks.ru/kupit-diplom-samara
    Рады помочь!.

  5. DouglasGed表示:

    order ed pills online: ED meds online with insurance – ed online treatment

  6. 벼룩시장 구인구직 및 신문 그대로 보기 (PC/모바일) | 구인구직 앱 어플 무료 설치 다운로드 | 모바일 벼룩시장 보는 방법 | 벼룩시장 부동산 | 지역별 벼룩시장 | 벼룩시장 종이신문 에 대해 알아보겠습니다. 섹스카지노사이트

  7. Diplomi_ctEa表示:

    Привет, друзья!
    Заказать документ ВУЗа вы можете в нашей компании.
    rushkas-diplomasxx.ru

  8. kontol表示:

    This website was… how do I say it? Relevant!! Finally I’ve found something which helped me. Thanks a lot!

  9. Lazrezl表示:

    Добрый день!
    Мы готовы предложить дипломы психологов, юристов, экономистов и других профессий по выгодным тарифам.
    diploms-rushkas.ru

  10. Mazrlwx表示:

    Привет, друзья!
    Полезные советы по покупке диплома о высшем образовании без риска
    diploms-rushka.ru/kupit-diplom-vracha

  11. DouglasGed表示:

    buying ed pills online: ED meds online with insurance – buy erectile dysfunction medication

  12. Leonardpar表示:

    http://edpillpharmacy.store/# ed prescriptions online

  13. Matilda表示:

    Wonderful site. Lots of helpful info here. I’m sending it to a few
    friends ans additionally sharing in delicious. And naturally, thanks to
    your sweat!

  14. Lazrixe表示:

    Привет, друзья!
    Мы предлагаем дипломы любых профессий по приятным ценам.
    diploms-rushkas.ru/diplom-tekhnikuma-kolledzha

  15. DouglasGed表示:

    low cost ed meds online: ED meds online with insurance – get ed prescription online

  16. Backpage表示:

    Pretty! This was a really wonderful post. Thanks for providing this information.

  17. Lazrymi表示:

    Добрый день!
    Купить диплом любого ВУЗа.
    diplomyx-man.ru/kupit-svidetelstva

  18. Marcusjam表示:

    гадание онлайн правдивое https://gadanie-online-free.ru

  19. DouglasGed表示:

    Online medicine home delivery: Indian pharmacy online – Online medicine order

  20. Very good blog post. I definitely appreciate this site. Stick with it!

  21. Charleshon表示:

    https://edpillpharmacy.store/# low cost ed pills
    erectile dysfunction medications online

  22. آشر表示:

    Hi, I think your blog might be having browser compatibility issues.
    When I look at your blog in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that,
    great blog!

  23. Trefbnm表示:

    Добрый день!
    Реально ли приобрести диплом стоматолога? Основные этапы
    mans-diplomy.ru/kupit-diplom-sssr
    Окажем помощь!.

  24. Mazrvdg表示:

    Привет!
    Где и как купить диплом о высшем образовании без лишних рисков
    rushkas-diplomxx.ru/kupit-diplom-bukhgaltera

  25. Everything is very open with a very clear explanation of the challenges. It was truly informative. Your website is very helpful. Many thanks for sharing!

  26. Marcusjam表示:

    онлайн гадание бесплатно самое правдивое гадание онлайн правдивое

  27. DouglasGed表示:

    indian pharmacies safe: Indian pharmacy online – indian pharmacy online

發佈留言

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