網頁圖示的製作方式

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

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

  1. Razrspw表示:

    Добрый день!
    Наша компания предлагает приобрести диплом в отличном качестве, неотличимый от оригинала без использования специального оборудования и квалифицированного специалиста.
    radshir.com/products/index.php?subaction=userinfo&user=avebagi
    Удачи!

  2. Manrzqn表示:

    Привет, друзья!
    Где приобрести диплом по актуальной специальности?
    Мы предлагаем документы ВУЗов, расположенных на территории всей РФ. Можно заказать диплом за любой год, указав подходящую специальность и хорошие оценки за все дисциплины. Дипломы делаются на бумаге высшего качества. Это дает возможности делать настоящие дипломы, которые невозможно отличить от оригиналов. Они заверяются необходимыми печатями и штампами.
    Мы готовы предложить дипломы психологов, юристов, экономистов и прочих профессий по доступным тарифам.
    ast-diplomy.com/kupit-diplom-voronezh
    Всегда вам поможем!

  3. There is definately a great deal to know about this subject. I like all of the points you’ve made.

  4. GeorgeWHabs表示:

    Yacine Bounou https://al-hilal.yassine-bounou-ar.com known simply as Bono, is one of the most prominent Moroccan footballers of our time.

  5. AiDigiTales表示:

    I’d like to thank you for the efforts you’ve put in penning this site. I really hope to check out the same high-grade content from you later on as well. In fact, your creative writing abilities has encouraged me to get my very own blog now 😉

  6. Robertuttew表示:

    Andreson Souza Conceicao https://al-nassr.talisca-ar.com known as Talisca, is one of the brightest stars of modern football.

  7. Marcelocaw表示:

    The story of Leo Messi https://inter-miami.lionelmessi.ae‘s transfer to Inter Miami began long before the official announcement. Rumors about Messi’s possible departure from Barcelona appeared in 2020

  8. STIKES表示:

    There’s definately a lot to know about this topic. I like all of the points you made.

  9. Pablochura表示:

    Pedro Gonzalez Lopez https://barcelona.pedri-ar.com known as Pedri, was born on November 25, 2002 in the small town of Tegeste, located on Tenerife, one of the Canary Islands.

  10. Dnrtxhl表示:

    Привет!
    Приобрести документ университета можно у нас в столице.
    ast-diploms.com/kupit-diplom-moskva
    Удачи!

  11. Diplomi_amPa表示:

    купить диплом о высшем образовании во владивостоке diplomasx.com .

  12. nami表示:

    Pasarantogel2 is a renowned brand offering the best online services currently available. Their platform is designed to provide users with an exceptional and seamless experience, ensuring that all your needs are met efficiently and effectively. Don’t hesitate to give it a try right away; delaying until tomorrow might lead to missed opportunities and potential regret.

  13. Yreftqb表示:

    Привет!
    Приобрести диплом о высшем образовании.
    http://www.arpt.gov.gn/rapport-annuel-2015
    Успешной учебы!

  14. Treftja表示:

    Привет, друзья!
    Как приобрести аттестат о среднем образовании в Москве и других городах
    xn--80apeih4a.xn--p1ai/communication/forum/messages/forum1/message9957/4954-khotite-bystro-priobresti-diplom-poluchenii-obrazovaniya?result=new#message9957
    Будем рады вам помочь!.

  15. Lariorfvr表示:

    Быстрая схема покупки диплома старого образца: что важно знать?
    ast-diplom.com/kupit-diplom-moskva

  16. Uazrxux表示:

    Здравствуйте!
    Где заказать диплом специалиста?
    drugisaitove.listbb.ru/viewtopic.php?f=2&t=639
    Успехов в учебе!

  17. Diplomi_emkl表示:

    подскажите где купить диплом о высшем образовании diploms-x.com .

  18. Uazrtdq表示:

    Привет, друзья!
    Приобрести диплом любого ВУЗа.
    karr83.world/read-blog/520

  19. WilliamDeeli表示:

    Добрый день!
    Мы предлагаем быстро и выгодно заказать диплом, который выполнен на оригинальном бланке и заверен печатями, водяными знаками, подписями. Документ пройдет любые проверки, даже при помощи специально предназначенного оборудования. Решите свои задачи быстро и просто с нашим сервисом.
    qna.habr.com/user/dilopluyy
    Удачи!

  20. Diplomi_wekl表示:

    купить диплом доктора asxdiplomik24.ru .

  21. Lazrbzt表示:

    Привет!
    Где купить диплом специалиста?
    Приобрести диплом о высшем образовании.
    spletninews.ru/legalnyiy-diplom-bez-lishnih-voprosov

  22. Very good write-up. I absolutely appreciate this site. Continue the good work!

  23. Wazrrqk表示:

    Здравствуйте!
    Мы готовы предложить документы ВУЗов, расположенных в любом регионе России. Вы имеете возможность приобрести диплом от любого заведения, за любой год, указав необходимую специальность и хорошие оценки за все дисциплины. Документы делаются на бумаге высшего качества. Это позволяет делать настоящие дипломы, которые невозможно отличить от оригиналов. Они будут заверены необходимыми печатями и подписями.
    karabash.chelbusiness.ru/index.php?name=account&op=info&uname=unypavaze

  24. I enjoy reading through an article that can make people think.
    Also, thank you for allowing for me to comment!

    Here is my web blog … Buy Ozempic Online Cross-Border

  25. Manrslg表示:

    Здравствуйте!
    Где приобрести диплом специалиста?
    Мы можем предложить документы ВУЗов, расположенных в любом регионе РФ. Вы сможете заказать качественно сделанный диплом за любой год, включая документы СССР. Дипломы печатаются на бумаге самого высшего качества. Это дает возможности делать настоящие дипломы, которые невозможно отличить от оригиналов. Документы заверяются необходимыми печатями и штампами.
    Мы готовы предложить дипломы любой профессии по выгодным ценам.
    diploms-x.com/otzyvy
    Окажем помощь!

  26. 1WIN Casino表示:

    I’m not sure exactly why but this web site is loading incredibly slow for me.
    Is anyone else having this problem or is it a problem on my
    end? I’ll check back later on and see if the problem still exists.

  27. Hxhrnc表示:

    buy generic atorlip over the counter – bystolic 5mg cost bystolic pills

  28. I like it when individuals come together and share ideas. Great blog, keep it up!

發佈留言

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