網頁圖示的製作方式

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

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

  1. dj equipments that are built by Sennheiser are the best in my opinion, we always use them when we have a gig.,

  2. EdwardSex表示:

    Deep Fake Nudes https://undressapp.net with Undress AI and Deepnude

  3. Dnrtvhj表示:

    Привет!
    Заказать документ о получении высшего образования вы имеете возможность в нашей компании.
    ast-diplomas.com/kupit-diplom-voronezh
    Успехов в учебе!

  4. Hello, Today in the new directory of blogs. I don’t learn how your blog came up, need to have been a typo. Your website looks good, possess a nice day.

  5. Thanks for taking the time to line this all out for people like us. This post was very useful in my opinion.

  6. HarryJaw表示:

    Immerse yourself in the charm of France https://france.life-in-france.net a land of fine cuisine, impressive architecture and picturesque landscapes. An unrivaled lifestyle.

  7. Its like you read my thoughts! You seem to grasp so much
    approximately this, such as you wrote the book in it or something.
    I believe that you just can do with a few
    p.c. to drive the message house a little bit, but instead of that,
    that is magnificent blog. A fantastic read. I’ll certainly
    be back.

    Also visit my site; is denticore safe

  8. Ronaldfiept表示:

    Rodri https://manchester-city.rodrigo-hernandez.com le maestro du milieu de terrain de Manchester City

  9. Doyledum表示:

    L’histoire epique du FC Barcelone https://espagne.barcelona-fr.com 120 ans de triomphes et de tribulations.

  10. LloydPhaps表示:

    Indibet https://indibeti.in is a premier online casino offering a wide array of games including slots, table games, and live dealer options. Renowned for its user-friendly interface and robust security measures, Indibet ensures a top-notch gaming experience with exciting bonuses and 24/7 customer support.

  11. Xazrugj表示:

    Привет, друзья!
    Можно ли быстро купить диплом старого образца и в чем подвох?
    arusak-diploms-srednee.ru/diplom-sredne-spetcialnoe-obrazovanie В 

  12. KennethOrelm表示:

    download screen capture for windows 10 https://screen-capture-free.com

  13. Manruxp表示:

    Привет, друзья!
    Купить документ о получении высшего образования
    ast-diploms.com/kupit-diplom-omsk

  14. Lazrvyw表示:

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

  15. Так, це варто уваги, актуальна тема, яка заслуговує на обговорення.

  16. Michaeldet表示:

    Свежие новости https://diesel.kyiv.ua автомобильного рынка, новинки автопрома

  17. WilberJet表示:

    The fascinating story of Ja Morant’s https://grizzlies-de-memphis.ja-morant-fr.com meteoric rise, from status from rookie to leader of the Memphis Grizzlies and rising NBA superstar.

  18. MarioGlard表示:

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

  19. Mazrevf表示:

    Здравствуйте!
    Где и как купить диплом о высшем образовании без лишних рисков
    mandiplomik.ru

  20. Ronaldtup表示:

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

  21. купить разработку сайта http://biztest.ru .

  22. Danrkur表示:

    Здравствуйте!
    Мы готовы предложить дипломы любой профессии.
    http://www.zainduz.eus/eu/купила-диплом-а-он-скачан/
    Рады помочь!.

  23. I have been browsing online more than three hours today, yet I never found any
    interesting article like yours. It is pretty worth enough for me.
    In my opinion, if all webmasters and bloggers made good content as you did,
    the web will be much more useful than ever before.

  24. Uazrhrr表示:

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

  25. Mazricr表示:

    Привет, друзья!
    Как безопасно купить диплом колледжа или ПТУ в России, что важно знать
    mandiplomikx.ru

  26. Woah! I’m really loving the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between superb
    usability and visual appeal. I must say you’ve done a superb job with this.

    Additionally, the blog loads extremely fast for me on Internet explorer.
    Superb Blog!

  27. That is a good tip especially to those new to the blogosphere.
    Brief but very accurate information… Thank you
    for sharing this one. A must read post!

  28. RobertUtile表示:

    PrestigeAvto https://prestige-avto.com.ua України автомобільний журнал

  29. BillyEmaro表示:

    Найбільший автомобільний портал https://mirauto.kyiv.ua України

  30. Diplomi_qvEa表示:

    Привет, друзья!
    Приобрести документ института вы сможете у нас в Москве.
    diplomasx.com/kupit-diplom-kandidata-naukВ 

發佈留言

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