網頁圖示的製作方式

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

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

31,837 Responses

  1. Elmerbuils表示:

    пинап казино: пин ап казино – пин ап вход

  2. Elmerbuils表示:

    пинап казино: pin up вход – пин ап казино

  3. KennethKex表示:

    пин ап вход: пин ап вход – пин ап казино

  4. knob表示:

    My partner and I stumbled over here from a different web address and thought I may as well check things out.
    I like what I see so now i’m following you. Look forward to looking into your web page yet again.

  5. ZackaryGer表示:

    https://pinuprus.pro/# пин ап зеркало

  6. SDiozxstus表示:

    магазин аккаунтов магазин аккаунтов

  7. RonnieAnogy表示:

    отоларинголог центр платные детские лоры

  8. JamesWeent表示:

    косметолог эстетист uslugi-kosmetologa2.ru/

  9. Iariorocg表示:

    Приобрести диплом университета по выгодной стоимости вы сможете, обратившись к надежной специализированной компании. Приобрести документ университета можно у нас в столице. diplom-kaluga.ru/kupite-diplom-o-visshem-obrazovanii-s-proverkoj-v-reestre

  10. Cazrhzj表示:

    Добрый день!
    Мы готовы предложить дипломы психологов, юристов, экономистов и прочих профессий по приятным тарифам. Стоимость будет зависеть от выбранной специальности, года выпуска и ВУЗа: diploman.com/

  11. ZackaryGer表示:

    http://vavadavhod.tech/# vavada вход

  12. 1win_liOt表示:

    1win официальный сайт скачать на андроид бесплатно https://www.1win8004.ru .

  13. 1win_wysi表示:

    игра лаки джет отзывы http://1win8020.ru .

  14. operatoto表示:

    Hey There. I found your blog using msn. This is a really well written article.

    I’ll make sure to bookmark it and come back to read more of your
    useful information. Thanks for the post. I’ll definitely return.

  15. Uazrvwq表示:

    Приветствую!
    Для некоторых людей, приобрести диплом ВУЗа – это необходимость, уникальный шанс получить выгодную работу. Однако для кого-то – это желание не терять массу времени на учебу в ВУЗе. С какой бы целью вам это не потребовалось, мы готовы помочь вам. Максимально быстро, профессионально и недорого сделаем диплом любого года выпуска на настоящих бланках со всеми печатями.
    Главная причина, почему многие прибегают к покупке документа, – получить хорошую работу. К примеру, способности и опыт дают возможность кандидату устроиться на работу, однако документального подтверждения квалификации нет. Если для работодателя важно присутствие “корочек”, риск потерять хорошее место очень высокий.
    Заказать документ университета можно в нашей компании в столице. Мы предлагаем документы об окончании любых университетов РФ. Вы сможете получить диплом по любым специальностям, включая документы Советского Союза. Даем гарантию, что в случае проверки документа работодателем, никаких подозрений не появится.
    Ситуаций, которые вынуждают купить диплом ВУЗа много. Кому-то прямо сейчас нужна работа, в результате нужно произвести хорошее впечатление на руководителя на протяжении собеседования. Другие задумали попасть в большую компанию, для того, чтобы повысить свой статус и в последующем начать собственное дело. Чтобы не тратить впустую годы жизни, а сразу начинать успешную карьеру, используя врожденные таланты и полученные знания, можно заказать диплом в интернете. Вы сможете стать полезным в обществе, получите денежную стабильность в максимально короткий срок- купить диплом техникума

  16. 1win_kvst表示:

    1 win казино скачать http://www.1win5055.ru .

  17. MichaelLoapy表示:

    mexican rx online Rx Express Mexico mexican online pharmacy

  18. Sazrvgt表示:

    Приобрести диплом о высшем образовании!
    Купить диплом университета по выгодной цене можно, обращаясь к надежной специализированной фирме. Быстро заказать диплом: diplom-ryssia.com/diplomi-vuzov-s-ofitsialnim-reestrom-kupite-sejchas

  19. Pretty nice post. I just stumbled upon your weblog and
    wanted to mention that I have really loved browsing your weblog posts.
    In any case I’ll be subscribing on your rss feed and I am hoping you write once more soon!

  20. 1win_dhst表示:

    бонусный счет 1win как использовать https://www.1win5055.ru .

  21. Dnrtluz表示:

    Мы изготавливаем дипломы любой профессии по приятным ценам. Мы можем предложить документы ВУЗов, расположенных в любом регионе Российской Федерации. Документы выпускаются на бумаге самого высшего качества. Это позволяет делать государственные дипломы, не отличимые от оригинала. facetom.com/read-blog/3768_kupit-diplom-tehnikuma-s-zaneseniem-v-reestr-otzyvy.html

  22. 88GO表示:

    This piece of writing is genuinely a nice one it assists new net viewers, who are wishing
    in favor of blogging.

  23. five88 win表示:

    This information is priceless. Where can I find out more?

  24. kingslot96表示:

    Hello There. I found your blog using msn. This is a very well written article.
    I will make sure to bookmark it and return to read more of your useful information.
    Thanks for the post. I’ll certainly comeback.

  25. 1win_zasi表示:

    1 win регистрация и вход на сайт http://1win8020.ru .

  26. Cazrjwo表示:

    Заказать диплом ВУЗа по выгодной стоимости вы можете, обратившись к проверенной специализированной компании. Мы можем предложить документы учебных заведений, расположенных в любом регионе Российской Федерации. andonovproltd.com/employer/eonline-diploma

  27. 1win_rusa表示:

    1win промокод официальный сайт букмекерская контора http://www.1win8010.ru .

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

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