網頁圖示的製作方式

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

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

30,021 Responses

  1. Lazrphu表示:

    Купить диплом об образовании!
    Мы можем предложить дипломы любых профессий по приятным ценам— diplomers.com/kupit-diplom-s-vneseniem-v-reestr-20/

  2. Howdy, i read your blog occasionally and i own a similar one
    and i was just wondering if you get a lot of spam comments?
    If so how do you prevent it, any plugin or anything
    you can advise? I get so much lately it’s driving me insane so
    any help is very much appreciated.

  3. Right away I am going away to do my breakfast, after
    having my breakfast coming over again to read more
    news.

  4. Eanrwcs表示:

    Для удачного продвижения вверх по карьерной лестнице понадобится наличие диплома о высшем образовании. Приобрести диплом института у сильной организации: diplomv-v-ruki.ru/kupite-diplom-o-srednem-texnicheskom-obrazovanii-segodnya/

  5. Michaelscoob表示:

    Clom Fast Pharm: Clom Fast Pharm – can i order clomid tablets

  6. Spot Adipex表示:

    It’s difficult to find knowledgeable people on this subject,
    but you seem like you know what you’re talking about! Thanks

  7. pinco表示:

    Pinco onlayn kazinosu geniş oyun çeşidi ilə fərqlənir|Pinco ilə real pul qazanmaq mümkündür|Pinco canlı dəstək xidməti çox operativdir|Pinco ilə oyun təcrübəsi maraqlı və gəlirlidir|Pinco saytında qazanma şansı yüksəkdir|Pinco qeydiyyat prosesi çox rahatdır|Pinco ilə həm əylənmək, həm də pul qazanmaq olar|Pinco onlayn kazinosunda müxtəlif oyun növləri var|Pinco casino azerbaijan istifadəçilərinə yüksək keyfiyyətli xidmət göstərir pinco online.

  8. Richardaudit表示:

    http://clomfastpharm.com/# Clom Fast Pharm

  9. LanceFen表示:

    lisinopril best price: Lisin Express – Lisin Express

  10. Hi there! This post could not be written any better!

    Looking at this article reminds me of my previous roommate!
    He continually kept talking about this. I’ll forward this post
    to him. Fairly certain he will have a great read.
    Thank you for sharing!

  11. Michaelscoob表示:

    lisinopril 20 mg coupon: how much is lisinopril 40 mg – buy lisinopril online no prescription india

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

  13. This paragraph is genuinely a fastidious one it assists new web visitors, who are wishing for blogging.

  14. Sazrwri表示:

    Мы изготавливаем дипломы любых профессий по приятным ценам.– diplomv-v-ruki.ru/kupit-gosudarstvennij-diplom-s-zaneseniem-v-reestr/

  15. BrianTom表示:

    buy zithromax no prescription zithromax buy online zithromax price canada

  16. Mazrtfz表示:

    Мы предлагаем дипломы любой профессии по разумным ценам. Стараемся поддерживать для заказчиков адекватную ценовую политику. Важно, чтобы документы были доступными для большинства граждан.
    Приобретение документа, который подтверждает окончание института, – это рациональное решение. Купить диплом любого университета: diplomius-docs.com/diplom-kupit-sredne-texnicheskoe-obrazovanie-2/

  17. LanceFen表示:

    ZithPharmOnline: buy azithromycin zithromax – zithromax prescription online

  18. LanceFen表示:

    zestril generic: lisinopril 12.5 mg price – Lisin Express

  19. Michaelscoob表示:

    Pred Pharm Net: Pred Pharm Net – Pred Pharm Net

  20. Michaelscoob表示:

    Clom Fast Pharm: where can i buy clomid prices – where buy cheap clomid no prescription

  21. Danieldrymn表示:

    Lisin Express: how to buy lisinopril – lisinopril 10 mg canada cost

  22. Sazrlbs表示:

    Приобрести документ о получении высшего образования можно в нашей компании в столице. Мы предлагаем документы об окончании любых ВУЗов России. Вы получите необходимый диплом по любым специальностям, включая документы образца СССР. Гарантируем, что при проверке документов работодателем, никаких подозрений не возникнет. diplomk-v-krasnodare.ru/kupit-diplom-s-reestrom-v-moskve-bistro-i-udobno-2/

  23. Richardaudit表示:

    https://clomfastpharm.com/# how to get clomid

  24. Danieldrymn表示:

    can i get clomid price: can i buy cheap clomid without prescription – Clom Fast Pharm

  25. Danieldrymn表示:

    prinivil drug: Lisin Express – Lisin Express

  26. Thanks for the good writeup. It in reality was once a enjoyment account it.
    Look advanced to more brought agreeable from you!
    By the way, how can we be in contact?

  27. omgprice5.cc表示:

    I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and entertaining, and without a doubt, you’ve hit the
    nail on the head. The problem is something too few men and
    women are speaking intelligently about. I’m very happy I stumbled across
    this in my hunt for something concerning this.

發佈回覆給「best crypto casinos online」的留言 取消回覆

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