網頁圖示的製作方式

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

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

  1. RobertAffor表示:

    аренда строительной техники

    Аренда спецтехники и грузоперевозки от Строительно-коммерческой компании МИТ

    Находясь в Москве на Озерковском переулке, 12, компания организует всеобъемлющие услуги для строительных и логистических задач. Способность моментально реагировать на заявки обеспечивается парком свыше 150 единиц спецтехники, каждая из которых проходит регулярное ТО.

    Особенности предоставления услуг:

    Быстрота выполнения:
    Гарантированная доставка техники в двухчасовой срок
    Постоянное наличие аварийных бригад круглые сутки
    Возможность доставки техники собственными эвакуаторами

    Рентабельность:
    Прозрачная система ценообразования без дополнительных сборов
    Программа лояльности с экономией до 20%
    Точечный учет времени эксплуатации

    Технические характеристики доступной техники:

    Краны-манипуляторы:
    Возможность подъема грузов весом 3-12 тонн
    Длина стрелы до 22 метров
    Срок прибытия техники – 2 часа

    Землеройная техника:
    Максимальная глубина рытья 6.5 метров
    Максимальная скорость движения 41 км/ч
    Емкость ковша до 1.3 м?

    Грузовой транспорт:
    Грузоподъемность от 0.5 до 20 тонн
    Объем кузова от 2 до 92 м?
    Возможность погрузки со всех сторон

    Основные достоинства:
    Современный автопарк последних модификаций
    Полное документальное сопровождение согласно законодательству РФ
    Система работы с НДС и гибкие условия оплаты
    Гарантированная страховка объектов
    Профессиональные машинисты и водители

    Польза от работы с нами:
    Уменьшение простоев строительства на 40%
    100% работоспособность техники
    Экономия до 30% бюджета по сравнению с содержанием собственного парка
    Четкое документальное подтверждение всех работ

    Профессиональная организация маршрутов, с оформлением всех необходимых разрешений. Личный специалист отвечает за реализацию проекта.

  2. Michaeltor表示:

    Kamagra kaufen: Kamagra kaufen ohne Rezept – Kamagra kaufen

  3. ok365表示:

    I think the admin of this site is genuinely working hard in support of his web site, since here every
    data is quality based data.

  4. Michaeltor表示:

    Kamagra online bestellen: Kamagra online bestellen – kamagra

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

  6. Derekgroum表示:

    apotek online: Apotek hemleverans idag – apotek pa nett

  7. Derekgroum表示:

    Apoteket online: Apotek hemleverans recept – Apotek hemleverans recept

  8. Derekgroum表示:

    Online apotheek Nederland zonder recept: Betrouwbare online apotheek zonder recept – de online drogist kortingscode

  9. เตรียมตัวพบกับ ความสนุก ของการเล่น เกมสล็อตทำเงิน รูปแบบเกมที่ไม่เหมือนใคร ที่ทั้ง เพลิดเพลิน เร้าใจสุด ๆ และยังสามารถ ทำเงินได้จริง อย่างต่อเนื่องทุกวัน กับ สล็อตเว็บตรง 5 เกมสล็อตแนะนำ สล็อตแจกจริง ที่ รองรับการใช้งาน ทั้งมือถือและคอม ใครที่กำลัง อยากลองเกมสล็อต ที่มี โบนัสแจกจริง ต้อง มารู้จัก กับ ตัวเลือกนี้ ได้เลย

  10. รอให้คุณมาทดลอง ประสบการณ์ ในการเล่น เกมสล็อตทำเงิน รูปแบบเกมที่ไม่เหมือนใคร ที่ทั้ง น่าสนใจ ลุ้นทุกวินาที และยังสามารถ ทำเงินได้จริง ทุกวันไม่มีหยุด กับ สล็อตเว็บตรง 5 เกม สล็อตแตกดี ที่ รองรับการใช้งาน ทุกแพลตฟอร์ม ใครที่กำลัง มองหาเกมปั่นสล็อต ที่มี แจ็กพอตแตกง่าย ต้อง เข้ามาทดลอง กับ 5 เกมนี้ ได้เลย

  11. Michaeltor表示:

    Kamagra online bestellen: Kamagra Oral Jelly kaufen – Kamagra Original

  12. HomerFaw表示:

    https://apotheekmax.com/# Online apotheek Nederland zonder recept

  13. Malcolmseern表示:

    ApotheekMax Apotheek online bestellen online apotheek

  14. HomerFaw表示:

    http://apotheekmax.com/# Apotheek online bestellen

  15. You really make it seem so easy with your presentation however I in finding this topic to be really something which I feel I might never understand.

    It seems too complicated and extremely broad for
    me. I am taking a look forward for your subsequent put up, I will attempt to get the hold of it!

  16. Louislen表示:

    http://apotheekmax.com/# Betrouwbare online apotheek zonder recept

  17. Michaeltor表示:

    Kamagra Original: Kamagra kaufen – Kamagra Original

  18. Michaeltor表示:

    Kamagra kaufen ohne Rezept: Kamagra Oral Jelly kaufen – Kamagra Oral Jelly

  19. Malcolmseern表示:

    Online apotheek Nederland met recept ApotheekMax ApotheekMax

  20. Malcolmseern表示:

    apotek online recept apotek online recept Apotek hemleverans recept

  21. Derekgroum表示:

    Kamagra Gel: Kamagra kaufen ohne Rezept – Kamagra Original

  22. After I initially left a comment I seem to have clicked
    on the -Notify me when new comments are added-
    checkbox and now whenever a comment is added I recieve four emails with the same
    comment. There has to be a way you are able to remove me from that service?
    Thanks!

  23. Derekgroum表示:

    Online apotheek Nederland zonder recept: de online drogist kortingscode – Online apotheek Nederland zonder recept

發佈留言

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