網頁圖示的製作方式

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

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

  1. Dannytal表示:

    ordering drugs from canada: Buy medicine from Canada – canadian drugs

  2. Michaelrom表示:

    canadian drug pharmacy: Buy medicine from Canada – canadian world pharmacy

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

  4. mostbet_tpmt表示:

    mostbet casino скачать mostbet casino скачать .

  5. mostbet_rpMn表示:

    как зайти на сайт мостбет http://mostbet8008.ru .

  6. WilliamDeeli表示:

    Мы изготавливаем дипломы любых профессий по доступным ценам. Дипломы производят на настоящих бланках Купить диплом о высшем образовании diplomv-v-ruki.ru

  7. mostbet_yfMn表示:

    mostbet официальный сайт скачать https://www.mostbet8008.ru .

  8. Lozxstus表示:

    платформа для покупки аккаунтов платформа для покупки аккаунтов

  9. Lazrdew表示:

    Где приобрести диплом специалиста?
    Заказать диплом ВУЗа по доступной стоимости можно, обратившись к проверенной специализированной компании.: peoplediplom.ru

  10. WalterIcort表示:

    https://medicinefromindia.com/# indian pharmacy

  11. MichaelLoapy表示:

    Medicine From India indian pharmacy online indian pharmacy online

  12. Mazracm表示:

    Быстро и просто купить диплом института!
    Мы предлагаем документы об окончании любых ВУЗов РФ. Документы изготавливаются на оригинальных бланках. aurorahcs.com/forum/viewtopic.php?f=8&t=926774

  13. Sazrtrb表示:

    Будучи студентом, я наслаждался учебой до тех пор, пока не пришло время писать диплом. Но паниковать не стоило, ведь существуют компании, которые помогают с написанием и защитой диплома на отличные оценки!
    Изначально я искал информацию по теме: купить диплом ветеринара, купить диплом воспитателя, купить диплом техникума ссср, купить диплом кемерово, диплом московский купить, затем наткнулся на diplomybox.com/kupit-diplom-o-vysshem-obrazovanii-cherepovets

  14. AnnaTax表示:

    Being present to your partner’s emotional world strengthens mutual connection enhanced by cenforce kaufen. Others talk about saving – we deliver it every day.

  15. AnnaTax表示:

    Practicing patience on days when energy feels low is part of sustaining long-term success with iversun. Each heartbeat sketches desire across the fragile night.

  16. ZacharyRetry表示:

    металлические значки на заказ с логотипом пины на заказ

  17. Dannytal表示:

    cheap canadian pharmacy: Generic drugs from Canada – canada pharmacy online

  18. Michaelrom表示:

    canada pharmacy: is canadian pharmacy legit – certified canadian pharmacy

  19. MichaelLoapy表示:

    best rated canadian pharmacy Canadian pharmacy shipping to USA canada discount pharmacy

  20. StevenDuase表示:

    Medicine From India: indian pharmacy – medicine courier from India to USA

  21. Moneyaez表示:

    Психолог t me. Психолог онлайн анонимно. Получить онлайн консультацию психолога чате.
    Запись на прием, оплата, подробная информация о специалистах и отзывы клиентов.
    Индивидуальное консультирование.
    Психолог владеет множеством приемов и техник, которые помогут разобраться в себе.
    Психологическое консультирование.
    Нужен хороший психолог?
    Услуги психолога · — Консультация психолога.
    Личные или онлайн-встречи с высококвалифицированными специалистами.

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

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