網頁圖示的製作方式

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

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

  1. ZackaryGer表示:

    http://vavadavhod.tech/# vavada casino

  2. Elmerbuils表示:

    вавада зеркало: вавада зеркало – vavada casino

  3. KennethKex表示:

    pin up azerbaycan: pin-up casino giris – pin up azerbaycan

  4. Fastidious respond in return of this question with
    solid arguments and explaining all about that.

  5. 1win_zbsr表示:

    1win ставки на спорт скачать приложение http://www.1win10069.ru .

  6. Uazrvpm表示:

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

  7. Elmerbuils表示:

    pin up casino: pin up casino – pin up

  8. I know this site presents quality based articles or reviews
    and additional material, is there any other site which provides
    these kinds of information in quality?

  9. Richardfek表示:

    pin up casino pin up azerbaycan pin up azerbaycan

  10. Cazrzln表示:

    Приобрести диплом о высшем образовании!
    Мы готовы предложить документы учебных заведений, которые находятся в любом регионе РФ. Документы выпускаются на бумаге высшего качества: kanon.kabb.ru/viewtopic.phpf=50&t=4657

  11. Hello my loved one! I want to say that this article is amazing, nice
    written and include almost all significant infos. I would like
    to peer extra posts like this .

  12. 1win_taka表示:

    1win зеркало скачать на андроид http://www.1win10065.ru .

  13. magnificent points altogether, you just received a new reader.
    What would you recommend about your submit that you simply made a few
    days in the past? Any certain?

  14. Just wish to say your article is as amazing. The clarity to your post is just great and that i can suppose you’re an expert in this
    subject. Fine together with your permission allow me to clutch your feed to keep up to date with
    approaching post. Thank you a million and please keep up the rewarding work.

  15. Sazrugw表示:

    Приобрести диплом любого ВУЗа!
    Приобрести диплом института по невысокой стоимости вы можете, обращаясь к надежной специализированной компании. Быстро купить диплом о высшем образовании: asxdiploman.com/otkrojte-dveri-k-uspexu-s-diplomom-o-visshem-obrazovanii

  16. mostbet_goma表示:

    букмекерские конторы в кыргызстане http://www.mostbet10010.ru .

  17. mostbet_zbel表示:

    как зайти на сайт mostbet https://mostbet10008.ru/ .

  18. It’s awesome to visit this web page and reading the views of аll mates
    on thе topic of tһis paragraph, whilе I am also eager of getting familiarity.

    Ⅿy page :: Sports Betting

  19. ZackaryGer表示:

    http://vavadavhod.tech/# вавада

  20. Dnrtbma表示:

    Мы готовы предложить дипломы любой профессии по разумным тарифам. Мы можем предложить документы ВУЗов, расположенных на территории всей Российской Федерации. Документы выпускаются на бумаге самого высшего качества. Это позволяет делать настоящие дипломы, не отличимые от оригиналов. rogerfilms.com/index.phptitle=Документы_об_учебе_—_официально

  21. Richardfek表示:

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

  22. mostbet_yjma表示:

    казино мостбет скачать http://mostbet10010.ru .

  23. ZackaryGer表示:

    https://pinuprus.pro/# пин ап казино

  24. Risingbmn表示:

    Онлайн-консультация психолога. Получить онлайн консультацию психолога чате. Онлайн-консультация психолога.

    Поможет поставить цель терапии и приведет к результату.
    Раздражительность на членов своей семьи.
    Сколько встреч нужно?

發佈回覆給「pornhub 18+ child sex eporner」的留言 取消回覆

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