網頁圖示的製作方式

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

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

  1. If you desire to increase your familiarity only keep visiting this web page and be updated with the newest gossip
    posted here.

  2. Sazrcxp表示:

    Приобрести диплом ВУЗа !
    Приобретение диплома университета РФ у нас является надежным делом, так как документ заносится в реестр. Заказать диплом об образовании diplomp-irkutsk.ru/mozhno-li-kupit-diplom-o-srednem-obrazovanii

  3. 1win_wrKa表示:

    1win казино зеркало 1win казино зеркало .

  4. link resmi表示:

    Hi there! Quick question that’s entirely off topic. Do you know how to make
    your site mobile friendly? My web site looks weird when viewing from my iphone4.
    I’m trying to find a template or plugin that might be able
    to fix this problem. If you have any recommendations, please share.
    Thank you!

  5. ZackaryGer表示:

    https://pinupaz.top/# pinup az

  6. Thomasjat表示:

    Современный и удобный сайт spbgunews.ru на котором легко найти нужную информацию, товары или услуги. Простая навигация, понятный интерфейс и актуальное содержание подойдут как для новых пользователей, так и для постоянной аудитории. Работает быстро, доступен круглосуточно.

  7. Salt trick表示:

    Hi there! This blog post could not be written any better!
    Going through this post reminds me of my previous roommate!
    He always kept preaching about this. I most certainly will send this article to him.
    Pretty sure he’ll have a great read. I appreciate you for
    sharing!

  8. Richardfek表示:

    вавада vavada вход vavada

  9. Petertwirl表示:

    регистрация фирмы в англии https://zaregistrirovat-kompaniyu-england.com

  10. This is a topic that’s near to my heart… Cheers!
    Exactly where are your contact details though?

  11. Sazrifj表示:

    Заказать диплом ВУЗа по невысокой стоимости возможно, обратившись к проверенной специализированной фирме. Заказать документ университета можно в нашей компании в Москве. insna.info/kupit-diplom-gosudarstvennogo-obrazca-200-2

  12. 1win_nqSr表示:

    скачать 1вин на айфон https://www.1win10072.ru .

  13. Elmerbuils表示:

    пин ап вход: пинап казино – пин ап казино

  14. mostbet_gqsa表示:

    мобильное приложение регистрация вход mostbet app приложении рейтинг 4 8 https://mostbet10011.ru/ .

  15. 1win_vtoi表示:

    русская букмекерская контора официальный сайт скачать http://1win10007.ru .

  16. 1win_psSr表示:

    1xставка официальный сайт http://1win10072.ru/ .

  17. 1win_yzMn表示:

    ракета 1 вин https://1win10070.ru/ .

  18. It’s very effortless to find out any topic on net as compared to
    textbooks, as I found this article at this web page.

  19. 1win_lfPa表示:

    1win зеркало сайта online https://1win10073.ru .

  20. Uazrwyd表示:

    Купить диплом университета. Изготовление диплома занимает минимум времени, а цена – невысокая. В результате вы получаете возможность сохранить деньги и время и получить прекрасную работу вашей мечты. Заказать диплом под заказ можно через сайт компании. – uaecareerhub.com/employer/russiany-diplomans

  21. Elmerbuils表示:

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

  22. Richardfek表示:

    pin up casino pin up az pin-up casino giris

  23. Hi there, after reading this amazing paragraph i
    am too delighted to share my experience here with colleagues.

  24. JamesLoarf表示:

    открыть бизнес в англии открыть бизнес в англии

  25. Sazroph表示:

    Купить диплом ВУЗа по доступной цене возможно, обратившись к надежной специализированной фирме. Мы оказываем услуги по продаже документов об окончании любых университетов России. Купить диплом о высшем образовании– karkadan.ru/users/77829

  26. Sazrpck表示:

    Приобрести документ о получении высшего образования можно у нас. Мы предлагаем документы об окончании любых ВУЗов Российской Федерации. Вы получите диплом по любой специальности, любого года выпуска, в том числе документы Советского Союза. Даем 100% гарантию, что при проверке документа работодателями, подозрений не возникнет. diplomus-spb.ru/zanesite-diplom-v-reestr-obrazovaniya-legko-i-bistro-2/

發佈回覆給「Sazrifj」的留言 取消回覆

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