網頁圖示的製作方式

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

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

28,761 Responses

  1. Danieldrymn表示:

    ZithPharmOnline: ZithPharmOnline – buy zithromax

  2. Discover Top AI Development Agencies
    Find Your Perfect AI Development Partner

  3. Sazrroa表示:

    Мы предлагаем дипломы любой профессии по выгодным тарифам. Стоимость может зависеть от выбранной специальности, года получения и образовательного учреждения. Стараемся поддерживать для заказчиков адекватную ценовую политику. Для нас важно, чтобы дипломы были доступны для подавляющей массы граждан. диплом мастера маникюра купить

  4. Danieldrymn表示:

    order prednisone with mastercard debit: prednisone 5 50mg tablet price – prednisone buy without prescription

  5. Купить смартфон в Москве http://www.techno-line.store/ .

  6. Danieldrymn表示:

    AmOnlinePharm: amoxicillin medicine – 875 mg amoxicillin cost

  7. Richardaudit表示:

    https://predpharmnet.shop/# prednisone 10mg tabs

  8. Lazrhts表示:

    Где купить диплом по нужной специальности?
    Заказать диплом университета по невысокой стоимости возможно, обратившись к надежной специализированной компании.: kdiplom.ru

  9. Trefzmx表示:

    Заказать документ о получении высшего образования вы имеете возможность у нас в столице. diplomd-magazinp.ru/kupit-diplom-sankt-peterburg-4-2

  10. WilliamDeeli表示:

    Мы изготавливаем дипломы любой профессии по приятным тарифам. Дипломы производятся на подлинных бланках государственного образца Приобрести диплом об образовании diplom-ryssia.com

  11. Diplomi_ibEa表示:

    Купить диплом ВУЗа!
    Мы можем предложить документы университетов, расположенных на территории всей России.
    diplomp-irkutsk.ru/diplom-s-zaneseniem-v-reestr-dlya-uspeshnoj-kareri/

  12. mostbet_tasn表示:

    скачать mostbet на телефон https://mostbet6010.ru/ .

  13. Dnrtigh表示:

    Где заказать диплом специалиста?
    Мы изготавливаем дипломы любой профессии по приятным ценам. Мы предлагаем документы техникумов, которые расположены в любом регионе Российской Федерации. Вы можете купить диплом за любой год, указав подходящую специальность и хорошие оценки за все дисциплины. Документы выпускаются на “правильной” бумаге самого высокого качества. Это дает возможности делать настоящие дипломы, которые невозможно отличить от оригинала. Они будут заверены всеми обязательными печатями и штампами. Стараемся поддерживать для клиентов адекватную ценовую политику. Для нас важно, чтобы документы были доступными для большого количества наших граждан. institute-diplom.ru/kupit-diplom-v-nizhnem-novgorode-8

  14. Iariorfsm表示:

    Приобрести диплом университета по выгодной стоимости возможно, обращаясь к проверенной специализированной фирме. Приобрести документ о получении высшего образования вы сможете в нашей компании в столице. kupitediplom.ru/bistro-i-nadezhno-kupit-diplom-s-zaneseniem-v-reestr

  15. Michaelscoob表示:

    lisinopril 5 mg tablet cost: lisinopril prescription cost – lisinopril 2.5 mg buy online

  16. Richardaudit表示:

    http://zithpharmonline.com/# zithromax price canada

  17. курсовая работа нейросеть для студентов бесплатно https://studgen.ru/ .

  18. LanceFen表示:

    Lisin Express: lisinopril 2.5 – lisinopril 20mg for sale

  19. Eanrhbp表示:

    Для быстрого продвижения вверх по карьере понадобится наличие диплома о высшем образовании. Заказать диплом о высшем образовании у надежной компании: diplomv-v-ruki.ru/kupit-attestat-starogo-obraztsa/

  20. I visited several blogs except the audio feature for audio songs present at this website is actually wonderful.

  21. Мечтаете о щедрых выигрышах?
    Добро пожаловать в Jetton Casino – инновационное казино,
    где доступен огромный ассортимент развлечений.

    онлайн слоты с джекпотом и почувствуйте настоящий драйв!

    В чем наши преимущества?

    Лучшие игровые автоматы – эксклюзивные
    новинки казино.
    Выгодные акции – регулярные турниры с крупными призами.

    Мгновенные выплаты – вывод средств без скрытых комиссий.

    Доступность на всех устройствах – адаптивный дизайн
    без ограничений.
    Дружелюбные операторы – онлайн-чат и e-mail 24/7.

    Начните выигрывать уже сегодня и испытайте удачу на полную!

  22. ChesterFus表示:

    canadian online pharmacy reviews: GoCanadaPharm – canadian pharmacy tampa

  23. Sazrbus表示:

    Мы изготавливаем дипломы любых профессий по приятным ценам. Цена зависит от выбранной специальности, года выпуска и ВУЗа. Всегда стараемся поддерживать для заказчиков адекватную ценовую политику. Для нас важно, чтобы дипломы были доступны для подавляющей массы граждан. купить настоящий диплом с занесением в реестр

  24. нейросеть для написания курсовой http://www.studgen.ru/ .

  25. EdwinWency表示:

    reputable indian pharmacies: best online pharmacy india – top 10 online pharmacy in india

  26. Trenterone表示:

    india pharmacy mail order: indian pharmacy paypal – www india pharm

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

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