網頁圖示的製作方式

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

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

  1. Diplomi_yyPa表示:

    менеджер по продажам вакансии екатеринбург менеджер по продажам вакансии екатеринбург .

  2. ngentot memek表示:

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

  3. Lazrwvq表示:

    Добрый день!
    Мы готовы предложить дипломы любой профессии по доступным ценам.
    http://www.cetprocapci.com/inicio/uncategorized/купить-диплом-кассира/

  4. Diplomi_waei表示:

    купить дипломы техникума цена москва ast-diploms.com .

  5. Yrefrbc表示:

    Привет, друзья!
    Заказать диплом о высшем образовании.
    29ru.listbb.ru/viewtopic.php?f=26&t=1848
    Успешной учебы!

  6. Bryanfoone表示:

    Michael Jordan https://chicago-bulls.michael-jordan-ar.com is one of the greatest basketball players of all time, whose career with the Chicago Bulls is legendary.

  7. Stevenkar表示:

    дизайн интерьера отзывы https://dizayn-interera-doma.ru

  8. Edwinviark表示:

    The Formula One World Championship https://world-circuit-racing-championship.formula-1-ar.com, known as the Formula Championship in motor racing, is the highest tier of professional motor racing.

  9. Chriszep表示:

    After some difficult years in the late 2010s, Manchester United https://england.manchester-united-ar.com returned to greatness in English football by 2024.

  10. Useful info. Lucky me I found your website by accident,
    and I am surprised why this coincidence did not happened in advance!

    I bookmarked it.

  11. Cazrbsv表示:

    Здравствуйте!
    Мы можем предложить документы ВУЗов, расположенных на территории всей РФ. Можно купить диплом за любой год, включая документы СССР. Дипломы и аттестаты печатаются на “правильной” бумаге высшего качества. Это дает возможность делать настоящие дипломы, которые не отличить от оригиналов. Документы будут заверены всеми необходимыми печатями и подписями.
    instakos.mn.co/posts/61838214

  12. Mazrfea表示:

    Здравствуйте!
    Официальная покупка аттестата о среднем образовании в Москве и других городах
    shugakukai.co.jp/диплом-в-хасавюрте/

  13. RobertBem表示:

    Jennifer Lopez https://lets-get-loud.jenniferlopez-ar.com was born in 1969 in the Bronx, New York, to parents who were Puerto Rican immigrants.

  14. ngentot表示:

    Pretty! This has been a really wonderful post. Thanks for supplying these details.

  15. Sazrtkt表示:

    Привет!
    Аттестат школы купить официально с упрощенным обучением в Москве
    mirfinrealty.ru/vash-diplom-bez-truda-i-usiliy
    Рады оказать помощь!

  16. Kennethfidly表示:

    When Taylor Swift https://shake-it-off.taylor-swift-ar.com released “Shake It Off” in 2014, she had no idea how much the song would impact her life and music career.

  17. Robertdalty表示:

    Priyanka Chopra https://baywatch.priyankachopra-ar.com is an Indian actress, singer, film producer and model who has achieved global success.

  18. Xazrasc表示:

    Добрый день!
    Парадокс, но купить диплом кандидата наук оказалось не так и сложно
    arusak-diploms-srednee.ru/kupit-diplom-medicinskogo-uchilishha  

  19. MatthewBic表示:

    Liverpool https://england.liverpool-ar.com holds a special place in the history of football in England.

  20. RaymondNak表示:

    Автомобили Hongqi https://hongqi-krasnoyarsk.ru в наличии – официальный дилер Hongqi Красноярск

  21. Lariorhmv表示:

    Официальная покупка диплома вуза с сокращенной программой в Москве
    asxdiplomik24.ru/otzyvy

  22. Diplomi_bqkl表示:

    купить диплом курск asxdiplomik24.ru .

  23. ngentot表示:

    Hi there! I could have sworn I’ve visited this blog before but after looking at some of the posts I realized it’s new to me. Anyhow, I’m definitely delighted I discovered it and I’ll be book-marking it and checking back frequently.

  24. Yrefxhq表示:

    Здравствуйте!
    Заказать диплом любого университета.
    deadreckoninggame.com/index.php/??????_??????:_???????????_???_???????????
    Успешной учебы!

  25. Dnrtzgc表示:

    Привет, друзья!
    Приобрести документ о получении высшего образования можно у нас в Москве.
    ast-diplom24.ru/kupit-diplom-o-srednem-obrazovanii
    Успехов в учебе!

  26. trani表示:

    While Pi Network has managed to build a large community of more than 33 million users, it has also gone years without launching a blockchain or its cryptocurrency, meaning PI coins have no value. Here’s a full guide to how Pi works and if it’s worth checking out. What should we do in this case? Most experts tend to turn to pure speculation. It’s even impossible to carry out a full-fledged fundamental analysis. To speak about the Pi coin’s price prediction, we need to evaluate the cryptocurrency’s current and potential use case, mind the number of people that already hold Pi coins, the team of developers standing behind it, the Pi Network’s future potential, etc. In Pi’s case, there’s no way we can predict how many users will hold the coins when the Pi Network goes live. As of now, buying and selling Pi in Enclosed Mainnet violates Pi network policy, and the Core Team can act against violators. However, Pioneers can use Pi within the Pi Network for P2P transactions to buy or sell goods and services.
    https://links2directory.com/listings12749247/eth-gas-tracker
    API is short for Application Programming Interface, which is basically a set of rules describing how two applications interact with each other. (Optional) Show only transactions from specified transaction id. If since_id parameter is used, limit parameter is set to 1000. Go to Crypto and create an account by filling in your personal details, agree with the Privacy Notice and Exchange Terms & Conditions, and agree that you’re data will be used to check and notify you on whether Crypto exchange is available in your region. If your main goal is to trade altcoins, perhaps look somewhere else. You can only trade 20+ of the most popular coins on the exchange. If, however, you’re more on the conservative side, Gemini’s coin offerings might be enough for you.

  27. Diplomi_wvPa表示:

    купить высшее диплом нижнем новгороде diplomasx.com .

發佈留言

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