網頁圖示的製作方式

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

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

  1. Williszew表示:

    http://mexicanpharminter.com/# mexican pharmacy online

  2. PENIPU ONLINE表示:

    Thanks for your personal marvelous posting!
    I quite enjoyed reading it, you can be a great author.
    I will remember to bookmark your blog and will often come back someday.

    I want to encourage you continue your great job, have a nice weekend!

  3. Montebeera表示:

    canada online pharmacy legitimate canadian pharmacies online canadian pharmacy king reviews

  4. Montebeera表示:

    canada cloud pharmacy InterPharmOnline canadian pharmacy meds

  5. You made some really good points there. I checked on the internet for more info about
    the issue and found most people will go along with your views
    on this site.

  6. JamesGag表示:

    Mexican Pharm International: Mexican Pharm Inter – reliable mexican pharmacies

  7. JamesGag表示:

    pharmacy rx world canada: legitimate canadian pharmacies online – real canadian pharmacy

  8. Arthurhow表示:

    https://indiamedfast.com/# lowest prescription prices online india
    www canadianonlinepharmacy

  9. Arthurhow表示:

    https://mexicanpharminter.shop/# Mexican Pharm International
    canadian pharmacy reviews

  10. Georgewhend表示:

    cheapest online pharmacy india: order medicines online india – cheapest online pharmacy india

  11. Arthurhow表示:

    https://mexicanpharminter.shop/# mexican pharmacy online order
    online canadian pharmacy reviews

  12. pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт духовых шкафов в Москве в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

  13. Georgewhend表示:

    Mexican Pharm Inter: mexican drug stores online – mexican drug stores online

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

  15. TK88表示:

    Thanks for sharing such a pleasant thinking, post is fastidious, thats why i have
    read it completely

  16. JamesGag表示:

    buying from online mexican pharmacy: reliable mexican pharmacies – mexican pharmacy online store

  17. pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт планшетов в Волгограде в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

  18. Wow that was odd. I just wrote an incredibly long comment
    but after I clicked submit my comment didn’t show up. Grrrr…
    well I’m not writing all that over again. Regardless, just
    wanted to say fantastic blog!

  19. Montebeera表示:

    Mexican Pharm Inter reliable mexican pharmacies mexican drug stores online

  20. pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт кондиционеров в Йошкар-Оле в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

  21. JamesGag表示:

    Mexican Pharm International: mexican pharmacy online store – mexican pharmacy online order

  22. Williszew表示:

    https://mexicanpharminter.shop/# mexican pharmacy online

  23. esta usa visa表示:

    You made some really good points there. I looked
    on the internet to learn more about the issue and found most individuals will go along with your views on this site.

  24. Williszew表示:

    https://mexicanpharminter.shop/# mexican pharmacy online order

  25. pdacenter.ru – сервис по ремонту бытовой техники
    Ремонт ПНВ в Барнауле в официальном сервисном центре PDACENTER.
    Наши инженеры выполняют ремонт любой сложности по дотупным ценам!

  26. Arthurhow表示:

    http://interpharmonline.com/# canadian pharmacy 24h com
    canadian pharmacy

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

  28. Williszew表示:

    http://mexicanpharminter.com/# buying from online mexican pharmacy

  29. Thanks , I have recently been looking for info approximately this subject for a long time and
    yours is the greatest I have came upon till now. However,
    what in regards to the conclusion? Are you sure in regards to
    the supply?

  30. Carlosgycle表示:

    Строительные бытовки
    Бытовки и модульные здания: проверенное подход для ваших задач
    Контейнеры и передвижные помещения организовывают создать место для деятельности, кладовую или временный модуль. Наши специалисты гарантируем сооружения, которые удовлетворяют высоким стандартам надёжности и комфорта.

    Преимущества
    Прочность. Любые бытовки выполнены из элементов, стойких к испытаниям и внешним воздействиям.
    Моментальная доставка. Постройка перевозится в течение 1–2 рабочих дней после оформления заказа.
    Персонализация. Осуществляется добавление термоизоляции, электрики или системы проветривания.
    Сферы использования
    На объектах строительства для размещения оборудования или устройства комнаты для рабочих.
    Во время событий для организации стойки приёма или помещения для инвентаря.
    В качестве временных офисов или пунктов управления.
    Плюсы
    Экономия времени. Отпадает потребность создавать временные конструкции.
    Комфорт. Условия, которые увеличивают качество выполнения задач работников.
    Подстройка. Опция временного использования или долгосрочного использования под разные периоды и денежные средства.
    Пример использования
    Строительная компания внедрила блок-контейнер для создания хранилища и комнаты отдыха. Модуль была доставлена за сутки, с дополнительным утеплением. Партнёр подчеркнул на повышение комфорта и отсутствие простоев.

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

發佈留言

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