網頁圖示的製作方式

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

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

30,054 Responses

  1. ChesterFus表示:

    Agb Mexico Pharm: Agb Mexico Pharm – Agb Mexico Pharm

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

  3. Рады приветствовать в Водка Казино — платформа, где азарт сочетается с щедрыми бонусами и шансами для
    выигрыша. У нас каждый игрок найдет что-то для себя, будь то начинающий или опытный игрок.
    Здесь вы не только получите отличные впечатления,
    но и невероятные предложения.

    Игры в Водка Казино имеет высокие RTP,
    что повышает ваши шансы на успех.
    Мы подготовили интерактивные игровые автоматы и популярные карточные игры, которые
    делают игровой процесс еще более занимательным
    и выигрышным.

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

    Мы всегда готовы предложить вам красивые бонусы для того, чтобы вы могли получить больше шансов на выигрыш.
    Присоединяйтесь к Водка
    Казино, чтобы наслаждаться игрой
    с лучшими шансами на победу!

    Регистрация без задержек.

    Привлекательные бонусы для новичков.

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

    Круглосуточная поддержка, чтобы помочь вам
    в любой момент.

    Мобильная версия.

    Погрузитесь в азартный мир Водка Казино и проверьте свою
    удачу! https://vodka-casinosphere.space/

  4. papillomas表示:

    I pay a quick visit daily some web sites and sites to read articles or reviews, except this website gives feature based articles.

  5. MatthewTek表示:

    https://wwwindiapharm.shop/# www india pharm

  6. Trenterone表示:

    www india pharm: cheapest online pharmacy india – www india pharm

  7. RobertPaync表示:

    online shopping pharmacy india Online medicine home delivery www india pharm

  8. Mazrdkl表示:

    Мы изготавливаем дипломы любой профессии по разумным ценам. Стараемся поддерживать для покупателей адекватную ценовую политику. Важно, чтобы документы были доступны для большинства граждан.
    Покупка документа, который подтверждает окончание института, – это разумное решение. Приобрести диплом университета: okdiplom.ru/zaregistrirovannij-diplom-kupit-4/

  9. Lazrema表示:

    Приобрести диплом об образовании!
    Мы можем предложить дипломы психологов, юристов, экономистов и любых других профессий по приятным ценам— diplom-kaluga.ru/kupit-diplom-o-visshem-obrazovanii-s-zaneseniem-6/

  10. Hello! This is my first comment here so I just wanted to give a quick
    shout out and say I really enjoy reading your blog posts.
    Can you suggest any other blogs/websites/forums that go
    over the same subjects? Thanks!

  11. Trenterone表示:

    www india pharm: cheapest online pharmacy india – mail order pharmacy india

  12. It’s going to be end of mine day, except before ending I
    am reading this impressive article to improve my knowledge.

  13. ChesterFus表示:

    Agb Mexico Pharm: Agb Mexico Pharm – Agb Mexico Pharm

  14. MatthewTek表示:

    https://gocanadapharm.shop/# onlinecanadianpharmacy

  15. Dnrtfnj表示:

    Где заказать диплом специалиста?
    Мы изготавливаем дипломы любых профессий по приятным тарифам. Мы предлагаем документы ВУЗов, которые находятся на территории всей России. Вы можете приобрести качественно сделанный диплом от любого заведения, за любой год, включая сюда документы старого образца СССР. Дипломы и аттестаты делаются на “правильной” бумаге самого высшего качества. Это позволяет делать настоящие дипломы, которые не отличить от оригиналов. Документы заверяются необходимыми печатями и подписями. Всегда стараемся поддерживать для заказчиков адекватную политику тарифов. Важно, чтобы документы были доступны для большого количества граждан. kupitediplom0029.ru/kupit-diplom-universiteta-4

  16. Diplomi_mdEa表示:

    Купить диплом о высшем образовании!
    Мы можем предложить документы учебных заведений, которые расположены на территории всей России.
    diplom-ryssia.com/gde-kupit-diplom-s-zaneseniem-v-reestr/

  17. EdwinWency表示:

    indian pharmacies safe: top 10 pharmacies in india – www india pharm

  18. EdwinWency表示:

    canadian world pharmacy: canadian pharmacies that deliver to the us – best canadian online pharmacy

  19. EdwinWency表示:

    ed drugs online from canada: legitimate canadian mail order pharmacy – rate canadian pharmacies

  20. ChesterFus表示:

    online canadian pharmacy review: go canada pharm – canadapharmacyonline legit

  21. Brook表示:

    After I initially left a comment I appear to
    have clicked on the -Notify me when new comments are added- checkbox and from now on every time
    a comment is added I get four emails with the exact same comment.
    Is there a means you can remove me from that service?
    Kudos!

  22. RobertPaync表示:

    canadian pharmacy victoza go canada pharm cheap canadian pharmacy

  23. RobertPaync表示:

    canadian medications go canada pharm buying from canadian pharmacies

  24. Jariorxkr表示:

    Где заказать диплом специалиста?
    Мы предлагаем быстро приобрести диплом, который выполнен на оригинальной бумаге и заверен мокрыми печатями, штампами, подписями. Диплом способен пройти лубую проверку, даже с использованием профессионального оборудования. Достигайте свои цели быстро и просто с нашими дипломами. Купить диплом университета! alhambra.bestforums.org/posting.php?mode=post&f=10

  25. mostbet_hesa表示:

    мостбет скачать казино мостбет скачать казино .

  26. Iariorakq表示:

    Приобрести документ о получении высшего образования можно в нашей компании в столице. tibureau.com/envoyez-une-commande-en-ligne

  27. Исследуйте возможности vavadaukr.kiev.ua, где.
    самые актуальные новости, чтобы.
    Не упустите шанс посетить vavadaukr.kiev.ua, где.
    текущих событиях.
    вам доступны.
    Погрузитесь в контент vavadaukr.kiev.ua.
    Развивайтесь вместе с vavadaukr.kiev.ua, где.
    На vavadaukr.kiev.ua вы найдете, будут вам полезны.
    Ознакомьтесь с возможностями vavadaukr.kiev.ua, знать.
    С vavadaukr.kiev.ua вы открываете.
    Узнайте больше о vavadaukr.kiev.ua, находить вдохновение.
    vavadaukr.kiev.ua предлагает, обогатит ваш опыт.
    Преимущества vavadaukr.kiev.ua, эксклюзивные материалы.
    Воспользуйтесь ресурсами vavadaukr.kiev.ua для.
    vavadaukr.kiev.ua – это площадка для, где вам удобно.
    Узнайте о возможностях vavadaukr.kiev.ua, привнесут новые идеи.
    Как vavadaukr.kiev.ua может помочь вам, вдохновляя на новые идеи.
    vavadaukr.kiev.ua https://vavadaukr.kiev.ua/ .

  28. Trenterone表示:

    online pharmacy india: www india pharm – www india pharm

發佈留言

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