網頁圖示的製作方式

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

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

15,748 Responses

  1. blanking表示:

    I blog frequently and I really appreciate your information. This article has truly peaked my interest. I am going to bookmark your website and keep checking for new information about once a week. I subscribed to your Feed too.

  2. RobertJar表示:

    buy clomid without prescription: clomid on pharm – cost of generic clomid pills

  3. RobertJar表示:

    buy clomid tablets: clomidonpharm – generic clomid without a prescription

  4. Ismaelfer表示:

    An impressive share! I have just forwarded this onto a co-worker who has been doing a little research on this. And he actually ordered me lunch due to the fact that I stumbled upon it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanx for spending the time to discuss this matter here on your web site.

    http://ironsplit.ru/wp-content/pag/promokod_fonbet_na_segodnya.html

  5. Lhaneevige表示:

    Hi! I realize this is sort of off-topic however I needed to ask. Does managing a well-established blog like yours require a massive amount work? I am brand new to running a blog but I do write in my journal on a daily basis. I’d like to start a blog so I will be able to share my personal experience and thoughts online. Please let me know if you have any suggestions or tips for brand new aspiring bloggers. Thankyou!

    https://gtbike.ru/js/pgs/aktualnue_promokodu_bukmekerskoy_kontoru_fonbet.html

  6. iwin表示:

    Oh my goodness! Incredible article dude! Thank you so much, However I am having troubles with your RSS. I don’t know why I can’t join it. Is there anybody getting the same RSS issues? Anybody who knows the solution will you kindly respond? Thanx.

  7. Along with the large ferry vessels, which had been huge sufficient to hold giant coaches, and likely served for carrying horses and artillery in the course of the crossing, numerous Durham boats had been used to transport soldiers throughout the river.

  8. The marketing supervisor at New World College, Rice is a pawn of the nice Intelligence and makes an attempt to seize power for himself on the story’s conclusion however is destroyed in the crossfire.

  9. DanielAbice表示:

    https://amoxstar.com/# how to get amoxicillin over the counter

  10. Timothyjeavy表示:

    Геосинтетические материалы https://geobentomat.ru надежное решение для строительства и укрепления грунтов. Геотекстиль, георешетки, геомембраны и другие материалы для дренажа, армирования и защиты конструкций.

  11. Davidrib表示:

    Инженерные изыскания в Москве https://geology-kaluga.ru точные исследования для строительства и проектирования. Геологические, гидрологические, экологические и геодезические работы для строительства.

  12. SamuelBix表示:

    where can you buy amoxicillin over the counter: how much is amoxicillin prescription – amoxil generic

  13. This website was… how do I say it? Relevant!! Finally I’ve found something which helped me. Thank you!

  14. KennethPah表示:

    prednisone 20mg online PredniBest purchase prednisone no prescription

  15. DanielAbice表示:

    https://cipharmdelivery.com/# ciprofloxacin over the counter

  16. вызов нарколога на дом круглосуточно вызов нарколога на дом круглосуточно .

發佈留言

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