How to create a favicon.ico for your web site如何創建的favicon.ico為您的網站

by Ross McKillop on May 2, 2007 Ross麥基洛普 2007年5月2日

網頁設計與開發

This brief tutorial will show you how to create a unique favicon.ico (that icon in your address bar - ex. Simplehelp’s favicon.ico is這簡短的指南將告訴您如何建立一個獨特的favicon.ico (即圖標在您的地址欄中-當然。 s implehelp的的f avicon.ico是 ) for your own site. )自己的網站。

A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar. 1圖標(簡稱收藏夾圖標)是一個偉大的方式,讓您的網站一個難忘的和獨特的圖標將顯示在瀏覽器地址欄中。 In addition, favicon’s show up next to ‘your site’ when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site beside the bookmark name it is a good way let them find it again.在此外,圖標的顯示旁邊的'您的網站'當人們書籤,並且由於大多數的鄉親有一個非常混亂的書籤列表,圖形,提醒您的網站旁邊的書籤名稱,它是一個好方法,讓他們再次找到它。

  1. First, select the image you want to use as a favicon.首先,選擇的形象,您想要使用作為一個圖標。 Something that blends in with your sites look, colour scheme and general “feel” is best.一些共混物在與您的網站看看,膚色計劃和一般“感覺”是最好的。 Since favicons are quite small, it’sa good idea not to try and get too complicated.自網站圖示是相當小,最好不要嘗試,並取得太複雜了。 The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc.的形象,您選擇的應該是一個正方形( 64 × 64 , 32 × 32等) ,並且可以一個JPG , GIF , PNG等骨形態發生蛋白等。
  2. Next, visit明年,請訪問 FavIcon from Pics圖標從照片 - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic -一個絕對的輝煌(而且完全免費! )在線工具,可以生成一個圖標,從圖片,標識或其他圖形
  3. Upload your picture and click the magic Generate Favicon.ico button.上傳您的圖片,並點擊魔術產生的favicon.ico按鈕。 You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button.您將可以預覽您的圖標,如果您滿意,請點擊下載圖標按鈕。 Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files.圖標從照片將提示您保存。 zip檔案-將它保存到您的桌面或在何處,你寧願將文件保存。 Unzip it.將它解壓縮。
  4. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*.消防您喜愛的FTP程序(或工具,無論您使用將文件上載到您的網站)和上傳的favicon.ico文件的根源,您的網站*. You’ll want the file to be located at www.your-site.com/favicon.ico.您想要的文件,以設在www.your-site.com/favicon.ico 。
  5. Visit your web site to check out your new favicon!訪問您的網站,檢查你的新圖標! If it doesn’t appear, you may need to clear your browsers cache and then reload.如果它不出現,您可能需要清除您的瀏覽器緩存和然後重新載入。
  6. * = if you don’t have access to the root of your site, add the following line of code somewhere in the <head> of your html: * =如果您還沒有接觸到的根源,您的網站,添加以下代碼行某處的<head>在您的HTML :

    <link rel=”shortcut icon” href=”http://www.your-site.com/path/to/favicon.ico”> <link rel="shortcut icon" href="http://www.your-site.com/path/to/favicon.ico">

Related Posts: 相關文章:
  • How to revert to the “old” Google favicon如何回复到“老”的Google網站圖示
  • Simplehelp Recap: May 2007 - wow, and thank you! simplehelp回顧一下: 2007年5月-哇,謝謝大家!
  • How to create a custom iPhone and iPod touch icon for your web site如何創建自定義iphone和iPod觸摸的圖標為您的網站
  • Welcome!歡迎!
  • How to insert a Google Map into your website using iWeb如何插入Google地圖到您的網站使用iWeb
  • Get Simple Help tutorials just like this one in your email inbox every day - for free!獲得簡單的幫助指南,就像這一次在您的電子郵件收件匣,每一天-免費的! Just enter your email address below:只需輸入您的電子郵件地址如下:

    You can always opt out of this email subscription at any time.您隨時可以選擇退出此電子郵件訂閱在任何時間。

    { 4 trackbacks } 4 trackbacks

    20 Free RSS Readers Reviewed - Simplehelp 20免費RSS閱讀器檢討-s implehelp
    05.06.07 at 6:40 pm 05.06.07在下午6時40分
    WordPress: The Complete Post-Install Checklist, Redux - Simplehelp在WordPress :完成安裝後的清單, redux -s implehelp
    05.26.07 at 2:15 pm 05.26.07在下午2時15分
    How to revert to the “old” Google favicon - Simplehelp如何回复到“老”的Google網站圖示-s implehelp
    05.30.08 at 9:12 pm 05.30.08在下午9點12分
    Favicon Design : ..:.:..圖標設計: ..:.:.. Todd And = Marketing + Media ..:.:..托德和=營銷+媒體..:.:..
    07.22.08 at 4:59 pm 07.22.08在下午4時59分

    { 1 comment… read it below or 1條評論…閱讀下面或 add one新增1 }

    1 1 LGR lgr 05.30.07 at 9:55 am 05.30.07在上午09時55分

    Good post.良好的職位。 I have used that favicon generator in the past and it works well.我已經用圖標發電機,在過去和它運作良好。 Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here:有時候,我沒有足夠的時間或創造性,使我自己,並已發現了一些偉大的免費網站圖示在這裡: http://www.freefavicon.com/

    Leave a Comment留下意見

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 您可以使用這些HTML標記和屬性:的<a href="" title=""> <abbr title=""> <acronym title="">的<b> <blockquote cite=""> <cite>的<code> <del datetime="">的<em>的<i> <q cite=""> <strike>的<strong>