網頁圖示的製作方式

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

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

13,368 Responses

  1. Cazrniy表示:

    Привет, друзья!
    Мы предлагаем документы техникумов
    n90451v3.bget.ru/user/ajohnpitz241

  2. Peter Obi表示:

    You made some good points there. I checked on the net for more information about the issue and found most individuals will go along with your views on this site.

  3. manup gummies表示:

    Hello! I’m at work surfing around your blog from my new iphone 3gs!
    Just wanted to say I love reading your blog and look forward to
    all your posts! Keep up the outstanding work!

    My web page manup gummies

  4. Trefgrg表示:

    Добрый день!
    Официальное получение диплома техникума с упрощенным обучением в Москве
    139qmb.blogspot.com/2021/05/139qmb_29
    Рады оказать помощь!.

  5. Stephenzek表示:

    https://lipitor.guru/# lipitor prices compare

  6. Mazreye表示:

    Здравствуйте!
    Официальная покупка диплома вуза с упрощенной программой обучения
    fromrus.su/index.php?/topic/15711-купить-диплом-d225w

  7. DanielTet表示:

    Cytotec 200mcg price https://lisinopril.guru/# zestril brand name
    lasix 100 mg tablet

  8. Jamesric表示:

    furosemide 100mg: furosemide 40mg – lasix tablet

  9. I’d like to thank you for the efforts you’ve put in writing this site. I am hoping to see the same high-grade blog posts from you later on as well. In truth, your creative writing abilities has inspired me to get my own, personal site now 😉

  10. Sazrgdn表示:

    Здравствуйте!
    Диплом для вас
    telegra.ph/portfolio-dlya-postupleniya-v-vuz-primer-08-02

  11. Uazrezf表示:

    Привет!
    Заказать диплом любого ВУЗа.
    telegra.ph/kupit-diplom-mgu-v-moskve-08-13-10

  12. Cazroqc表示:

    Привет!
    Приобрести диплом о высшем образовании
    telegra.ph/sokrashchennaya-forma-obucheniya-v-vuze-posle-kolledzha-08-02

  13. Larioredg表示:

    Полезные советы по безопасной покупке диплома о высшем образовании
    telegra.ph/kupit-diplom-moskva-08-13-8

  14. Mazrwwb表示:

    Здравствуйте!
    Вопросы и ответы: можно ли быстро купить диплом старого образца?
    fenadados.org.br/2019/10/10/cobra-tecnologia-reuniao-bilateral-tst/#comment-249306

  15. Sazrcyk表示:

    Здравствуйте!
    Приобрести документ о получении высшего образования
    divinecosmosnew.tforums.org/viewtopic.php?f=17&t=18718

  16. Yrefknd表示:

    Привет, друзья!
    Купить диплом ВУЗа.
    forum.asella.ru/index.php?threads/читайте-тут-x578l.6234

  17. Lariorjpd表示:

    Полезные советы по безопасной покупке диплома о высшем образовании
    telegra.ph/vkladysh-v-diplom-kupit-08-13-2

  18. Hi there friends, good post and good urging commented at this
    place, I am truly enjoying by these.

    my webpage – tonic greens near me

  19. Larioroki表示:

    Купить диплом магистра оказалось возможно, быстрое обучение и диплом на руки
    telegra.ph/kupit-diplom-v-ukraine-nedorogo-08-13-6

  20. DanielTet表示:

    cytotec online https://furosemide.win/# lasix for sale
    furosemide 100 mg

  21. Jamesric表示:

    lasix generic name: buy furosemide – lasix

  22. Sazrjsn表示:

    Добрый день!
    Мы готовы предложить дипломы любых профессий.
    Приобретение документа, который подтверждает обучение в ВУЗе, – это разумное решение.
    tadalive.com/RosalineBonnett6/?page=1
    Будем рады вам помочь!.

  23. нарколог на дом вывод из запоя ростов https://vyvod-iz-zapoya-rostov111.ru/ .

  24. WilliamDeeli表示:

    Привет!
    Мы изготавливаем дипломы.
    a-bcd.ru/news/199450/

  25. Lazrxok表示:

    Привет!
    Заказать диплом ВУЗа.
    forum.storeland.ru/index.php?/user/34922-hnfmrfdtg/

  26. Hi there to every one, the contents present at this web page are really amazing for people experience, well, keep up the good work fellows.

    Here is my web-site :: clear lung pro reviews

  27. Dnrtsqe表示:

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

  28. Greetings! Very useful advice within this post!

    It’s the little changes that produce the most significant changes.

    Many thanks for sharing!

    Feel free to surf to my web-site; https://postheaven.net/bomberhail98/okhvat-mul-tiiazychnogo-prodvizheniia-v-regionakh-rossii

發佈留言

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