網頁圖示的製作方式

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

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

  1. Thomasorada表示:

    Щоденні новини https://k-moto.com.ua із автомобільного середовища. Поради автоаматорам. Тест-драйви автомобілів з пробігом та огляди новинок

  2. Xazrecm表示:

    Добрый день!
    Как правильно приобрести диплом колледжа или ПТУ в России, важные моменты
    landik-diploms-srednee.ru/svidetelstvo-o-razvode В 

  3. Manrgww表示:

    Привет!
    Приобрести документ университета
    asxdiplomik24.ru/otzyvy

  4. Tremendous things here. I am very satisfied to look your article.
    Thank you a lot and I’m taking a look forward to contact you.
    Will you kindly drop me a e-mail?

  5. Carol表示:

    Very nice post. I just stumbled upon your weblog and wished
    to say that I’ve truly loved browsing your blog posts.
    After all I’ll be subscribing to your rss feed and I am hoping you write again very
    soon!

  6. Larryhor表示:

    Undress AI & Bulk Nude AI Generator nudify online. Make AI nudes and bulk generate undress AI photos of any girl for almost free!

  7. you are in reality a excellent webmaster. The web site loading velocity is incredible.
    It seems that you’re doing any unique trick.
    In addition, The contents are masterpiece. you’ve done a excellent job on this
    matter!

  8. Jamesvaf表示:

    DMV Test на русском языке https://papadmv.com тесты с ответами ПДД США 2024. Тренировочные dmv test на русском для сдачи на права, изучите правила дорожного движения США для разных штатов.

  9. Jamesbib表示:

    Авто статті https://black-star.com.ua з порадами з ремонту та обслуговування

  10. Edythe表示:

    Amazing blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your theme. Cheers

  11. That is a great tip particularly to those new to the blogosphere. Brief but very accurate information… Thanks for sharing this one. A must read article!

  12. German表示:

    If some one wishes to be updated with most up-to-date technologies after that he must
    be visit this website and be up to date everyday.

  13. Hudson表示:

    Hi there, I enjoy reading through your post. I like
    to write a little comment to support you.

  14. Don表示:

    Hey there! This is kind of off topic but I need some help from
    an established blog. Is it very difficult to set up
    your own blog? I’m not very techincal but I can figure things
    out pretty fast. I’m thinking about setting
    up my own but I’m not sure where to start. Do you have any tips or suggestions?

    Appreciate it

  15. Arnulfo表示:

    This information is worth everyone’s attention. When can I
    find out more?

  16. Madie表示:

    It’s an amazing article designed for all the internet visitors; they will get benefit from it I am sure.

  17. Lazrqdr表示:

    Привет!
    Мы изготавливаем дипломы любой профессии по выгодным тарифам.
    diploms-man.ru

  18. Thomasamuts表示:

    Автомобільні новини https://avtonews.kyiv.ua України. Все для автовласника.

  19. PhillipEpift表示:

    Автоновини України https://avtomobilist.kyiv.ua огляди машин та новини для автомобілістів

  20. BernardNerce表示:

    Автомобільні новини https://autonovosti.kyiv.ua України та світу, тест-драйви нових авто, поради експертів

  21. Trentonmip表示:

    Авто статті https://bestauto.kyiv.ua з порадами з ремонту та обслуговування, авто блог з професійними порадами, огляди новинок

  22. Uazrxri表示:

    Привет, друзья!
    Где заказать диплом специалиста?
    zomi.net/read-blog/28389

  23. 匿名訪客表示:

    Amazing issues here. I am very happy to peer your article.
    Thank you so much and I am having a look ahead to contact you.

    Will you kindly drop me a e-mail?

  24. Promokod_hjml表示:

    Рабочие промокоды для всех типов покупок. free-promocode.ru .

  25. Herberthycle表示:

    Авто статті https://automobile.kyiv.ua з порадами з ремонту та обслуговування, авто блог з професійними порадами, огляди новинок

  26. GerardoInict表示:

    Щоденні новини https://autoinfo.kyiv.ua із автомобільного середовища. Поради автоаматорам. Тест-драйви

  27. JamesDuemi表示:

    Сериал “911: Служба спасения” https://911-sluzhba-spaseniya.watch рассказывает о работе сотрудников экстренных служб Лос-Анджелеса, включая пожарных, медиков и операторов 911. Они ежедневно сталкиваются с опасными ситуациями, спасая жизни и решая сложные личные проблемы. Смотрите онлайн в хорошем качестве HD, бесплатно, все сезоны.

  28. DouglasMoomy表示:

    Слимофор https://slymofor.ru инновационное средство для быстрого похудения.

  29. Cecildob表示:

    В нашем интернет магазине https://shop-uggs.ru представлен широкий ассортимент оригинальных женских, мужских и детских UGG Australia. Вы можете купить угги у нас в Москве, а так же с доставкой по России без предоплаты. Мы привозим 2 пары обуви на примерку, вы сможете сначала примерить уги и только потом оплачивать те угги которые вам подошли.

發佈留言

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