網頁圖示的製作方式

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

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

  1. DavidSooni表示:

    indian pharmacy paypal UsaIndiaPharm USA India Pharm

  2. sklad_uqKi表示:

    склады хранения вещей в московской области склады хранения вещей в московской области .

  3. Sazrvtx表示:

    Купить документ о получении высшего образования можно в нашем сервисе. Мы оказываем услуги по производству и продаже документов об окончании любых ВУЗов РФ. Вы сможете получить необходимый диплом по любым специальностям, любого года выпуска, в том числе документы Советского Союза. Гарантируем, что при проверке документа работодателями, никаких подозрений не возникнет. diplomc-v-ufe.ru/kupit-diplom-vuza-s-zaneseniem-v-reestr-bistro/

  4. Mazrvbv表示:

    Где заказать диплом по актуальной специальности?
    Полученный диплом с приложением отвечает стандартам, никто не сумеет отличить его от оригинала – даже со специальным оборудованием. Не стоит откладывать собственные цели на пять лет, реализуйте их с нами – отправьте заявку на диплом уже сегодня! Диплом о среднем образовании – запросто! sudanre.com/profile/rudyworsnop559

  5. CarltonUnith表示:

    https://usaindiapharm.com/# indian pharmacy online

  6. Waltonnix表示:

    п»їlegitimate online pharmacies india: indian pharmacy – indian pharmacy

  7. My programmer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using WordPress on numerous websites for about a year and am concerned
    about switching to another platform. I have heard fantastic things
    about blogengine.net. Is there a way I can transfer all my
    wordpress content into it? Any help would be greatly appreciated!

  8. Jarioryzd表示:

    Где купить диплом специалиста?
    Мы предлагаембыстро заказать диплом, который выполняется на бланке ГОЗНАКа и заверен печатями, штампами, подписями должностных лиц. Документ способен пройти любые проверки, даже при использовании специально предназначенного оборудования. Решите свои задачи быстро и просто с нашим сервисом. Приобрести диплом университета! п»їaboutallfinance.ru/prostaya-sistema-zakaza-i-operativnaya-dostavka

  9. Charleszem表示:

    комплексная уборка спб http://cleaning-top24.ru

  10. Stevencic表示:

    аренда машин в сочи без водителя дешево снять машину в аренду в сочи

  11. FrankGlora表示:

    USA India Pharm: india pharmacy mail order – reputable indian online pharmacy

  12. Albertfah表示:

    аренда легкового автомобиля в адлере снять машину в аренду в адлере

  13. Darrylges表示:

    аренда машины москва крым прокат машин в крыму

  14. Sazrrjb表示:

    Купить диплом института!
    Купить диплом университета по невысокой цене возможно, обращаясь к проверенной специализированной компании. Приобрести диплом о высшем образовании: diplomist.com/diplomi-s-zaneseniem-v-reestr-po-vigodnim-tsenam

  15. Darrylges表示:

    аренда машины москва крым аренда авто крым

  16. CarltonUnith表示:

    https://usaindiapharm.com/# best india pharmacy

  17. FrankGlora表示:

    UsaIndiaPharm: buy medicines online in india – UsaIndiaPharm

  18. Sazrhul表示:

    Купить диплом ВУЗа по невысокой цене возможно, обращаясь к проверенной специализированной фирме. Мы предлагаем документы об окончании любых университетов Российской Федерации. Заказать диплом ВУЗа– diplomh-40.ru/kupit-diplom-vuza-s-zaneseniem-v-reestr-bezopasno-2/

  19. Waltonnix表示:

    USA India Pharm: Online medicine home delivery – USA India Pharm

  20. DavidSooni表示:

    buy prescription drugs from india reputable indian online pharmacy USA India Pharm

  21. Georgeunula表示:

    USA India Pharm: USA India Pharm – UsaIndiaPharm

  22. DavidSooni表示:

    indian pharmacy online USA India Pharm pharmacy website india

  23. Waltonnix表示:

    top 10 online pharmacy in india: best online pharmacy india – world pharmacy india

  24. Georgeunula表示:

    USA India Pharm: top 10 online pharmacy in india – USA India Pharm

  25. Georgeunula表示:

    pharmacy website india: USA India Pharm – india online pharmacy

  26. roxcasino表示:

    Рабочее зеркало rox casino всегда доступно. Депозит зачисляется мгновенно, удобно играть. Выигрыши приходят вовремя, без задержек. Приложение на андроид работает стабильно. Удобная фильтрация по провайдерам. Rox casino — приятный и честный сервис. Сайт стабильно работает даже при нагрузке. Есть VIP-программа для активных игроков. Rox — отличный выбор в 2024 году rox casino официальный сайт вход.

發佈留言

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