網頁圖示的製作方式

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

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

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

  2. DennisDor表示:

    mexican pharmacy: mexican pharmacy – UsMex Pharm

  3. Hi there all, here every one is sharing such knowledge, thus it’s good to read this weblog,
    and I used to pay a quick visit this weblog every day.

  4. лучшее протезирование зубов цены http://www.protezirovanie-zubov3.ru/ .

  5. Sazrjmh表示:

    Мы изготавливаем дипломы психологов, юристов, экономистов и любых других профессий по приятным тарифам.
    Вы покупаете диплом через надежную компанию. Купить диплом ВУЗа– http://freelancejobsbd.com/employer/diplomy-grup-24/ – freelancejobsbd.com/employer/diplomy-grup-24

  6. Jariorcde表示:

    Где приобрести диплом специалиста?
    Наши специалисты предлагают быстро приобрести диплом, который выполняется на оригинальной бумаге и заверен мокрыми печатями, штампами, подписями. Документ пройдет любые проверки, даже с использованием специального оборудования. Достигайте своих целей быстро и просто с нашим сервисом.
    Приобрести диплом о высшем образовании diplomv-v-ruki.ru/kupit-diplom-meditsinskogo-uchilisha-8/

  7. Cletusiders表示:

    UsMex Pharm: usa mexico pharmacy – certified Mexican pharmacy

  8. Mazrrdq表示:

    Где заказать диплом специалиста?
    Готовый диплом с приложением 100% отвечает стандартам Министерства образования и науки, неотличим от оригинала. Не откладывайте свои мечты и цели на потом, реализуйте их с нами – отправьте простую заявку на диплом прямо сейчас! Диплом о высшем образовании – не проблема! ripple-xrp-global-network.mn.co/posts/82089663

  9. протезирование зубов стоимость протезирование зубов стоимость .

  10. MicahTails表示:

    Us Mex Pharm: certified Mexican pharmacy – mexican pharmacy

  11. Cletusiders表示:

    usa mexico pharmacy: Mexican pharmacy ship to USA – USMexPharm

  12. DennisDor表示:

    certified Mexican pharmacy: mexican pharmacy – Us Mex Pharm

  13. Aurora Casino — это ваш идеальный выбор для захватывающих и выгодных игр.
    В нашем казино вас ждут лучшие игровые автоматы,
    классические настольные игры и уникальные предложения с настоящими дилерами.
    Участие в акциях и бонусах увеличивает шансы на выигрыш
    и добавляет удовольствия в игровой процесс.

    Что отличает Аврора программа
    лояльности от других казино?

    Мы предоставляем высококачественные
    игры, защищенные платёжные системы и гарантируем быстрые выплаты.
    Наши игроки всегда могут быть
    уверены в честности игры и прозрачности всех условий.

    Когда начать играть в Aurora Casino?
    Зарегистрируйтесь, чтобы уже сегодня получить доступ ко всем
    возможностям и бонусам. Вот,
    что вас ждет:

    Щедрые бонусы для новых игроков.

    Участвуйте в регулярных акциях и
    турнирах, чтобы повысить свои шансы на победу.

    Большой выбор слотов и настольных
    игр.

    В Aurora Casino ваши мечты о больших выигрышах становятся реальностью. https://aurora-diamondcasino.quest/

  14. MicahTails表示:

    Mexican pharmacy ship to USA: Us Mex Pharm – Mexican pharmacy ship to USA

  15. DennisDor表示:

    Mexican pharmacy ship to USA: USMexPharm – usa mexico pharmacy

  16. dzenru表示:

    Если не успеваете собрать документы — есть решение. | Чеки для отчётности от самозанятых — тоже есть. | Работают официально, чеки фискальные. | Налоговая приняла без вопросов. | Качественные чеки без подделок. | Чеки можно использовать для компенсации расходов. | Чеки подходят под любые виды деятельности. | Много положительных отзывов о сервисе. | Чеки для отчётности — удобно и просто. | Лучшее решение для занятых предпринимателей. http://dzen.ru/a/Z_kGwEnhIQCzDHyh.

  17. лечение и протезирование зубов стоимость лечение и протезирование зубов стоимость .

  18. MicahTails表示:

    usa mexico pharmacy: Mexican pharmacy ship to USA – mexican pharmacy

  19. Fine way of explaining, and fastidious post to get information about
    my presentation topic, which i am going to present in academy.

  20. Dnrthgu表示:

    Мы предлагаем дипломы любой профессии по выгодным тарифам. Мы предлагаем документы техникумов, которые находятся в любом регионе России. Документы выпускаются на бумаге высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригинала. babygirls001.copiny.com/question/details/id/1082967

  21. Cletusiders表示:

    USMexPharm: mexico pharmacies prescription drugs – certified Mexican pharmacy

  22. Emily Wilson表示:

    You may be able to secure larger loans and enjoy better interest rates by using your home’s equity. Find the best current offers today.

  23. Diplomi_rtEa表示:

    Купить диплом любого университета!
    Мы предлагаем документы учебных заведений, расположенных на территории всей РФ.
    diplom-onlinex.com/bistrij-i-nadezhnij-diplom-vuza-s-zaneseniem-v-reestr/

  24. RandyKargo表示:

    mexican pharmacy certified Mexican pharmacy usa mexico pharmacy

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

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