How to create a favicon.ico for your web site ±ÍÇÏÀÇ À¥ »çÀÌÆ®¸¦ ¸¸µå´Â ¹æ¹ý¿¡ ´ëÇÑ favicon.ico

by Ross McKillop on May 2, 2007 ·Î½º McKillop 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¸¦ ¸¸µå´Â ¹æ¹ýÀ» º¸¿©ÁÝ´Ï´Ù (Áï ±ÍÇÏÀÇ ÁÖ¼Ò Ç¥½ÃÁÙ¿¡ ¾ÆÀÌÄÜ - Àü. SimplehelpÀÇ favicon.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. ÇÑ faviconÀÌ (Áñ°Üã±â ¾ÆÀÌÄÜ)À» ªÀº ±ÍÇÏÀÇ »çÀÌÆ®¿¡¼­ ºê¶ó¿ìÀúÀÇ ÁÖ¼Ò Ç¥½ÃÁÙ¿¡ Ç¥½ÃµË´Ï´Ù ±â¾ï¿¡ ³²´Â µ¶Æ¯ÇÑ ¾ÆÀÌÄÜÀ»ÁÖ´Â ÁÁÀº ¹æ¹ýÀÔ´Ï´Ù. 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. ÀÌÈÄ ´ëºÎºÐÀÇ »ç¶÷µéÀº ±×°ÍµéÀ» ´Ù½Ã ãÀ» ¼ö ÀÖµµ·Ï ÁÁÀº ¹æ¹ýÀÔ´Ï´Ù Áñ°Üã±â À̸§ ¿·¿¡´Â ¸Å¿ì ÁöÀúºÐÇØ Áñ°Üã±â ¸ñ·Ï¿¡¼­ ±ÍÇÏÀÇ »çÀÌÆ®ÀÇ ±×·¡ÇÈ »ó±âÇØ¾ß ¶ÇÇÑ, faviconÀÌÀÇ °ø¿¬À» ±ÍÇÏÀÇ »çÀÌÆ® '´ÙÀ½'À» ¶§, ±×¸®°í Áñ°Üã±â .

  1. First, select the image you want to use as a favicon. ù°, ´ç½ÅÀº 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. ¶§¹®¿¡ favicons ÀÛÀ»ÇÏ´Â ½Ãµµ°¡ ³Ê¹« º¹ÀâÇÏÁö ¾Ê´Â °ÍÀÌ ÁÁ½À´Ï´Ù. 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, µîµîÀÌ µÉ ¼öÀÖ´Ù´Â BMP
  2. Next, visit ´ÙÀ½, ¹æ¹® FavIcon from Pics faviconÀÌ °¶·¯¸®¿¡¼­ - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic - Àý´ëÀûÀ¸·Î (¹«·á!) ±×¸², ·Î°í ¶Ç´Â ±âŸ ±×·¡ÇÈ¿¡¼­ faviconÀ» »ý¼ºÇÒ ¼öÀÖ´Â ¿Â¶óÀÎ µµ±¸¸¦ ¶È¶È
  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ÀÌ faviconÀÌÀÇ ¹Ì¸®º¸±â¸¦ Á¦°øµË´Ï´Ù. Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files. faviconÀÌ °¶·¯¸®¿¡¼­ ´ç½Å. zip ÆÄÀÏÀ» ÀúÀåÇÒ °ÍÀÎÁö ¹¯´Â °ÍÀÌ´Ù - ´ç½ÅÀÌ ¾îµð¿¡ ÀÖµç ¹ÙÅÁ È­¸é¿¡ ÀúÀåÇϰųª ÆÄÀÏÀ» ÀúÀåÇÏ´Â °ÍÀ» ¼±È£ÇÕ´Ï´Ù. Unzip it. ¾ÐÃàÀ» DZ´Ï´Ù.
  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! ±ÍÇÏÀÇ À¥ »çÀÌÆ®¸¦ ¹æ¹®ÇÏ¿© »õ faviconÀÌ Ã¼Å© ¾Æ¿ô! If it doesn¡¯t appear, you may need to clear your browsers cache and then reload. ³ªÅ¸³ªÁö ¾Ê´Â °æ¿ì, ±×¸®°í ±ÍÇÏÀÇ ºê¶ó¿ìÀú ij½Ã¸¦ ºñ¿ì°í ´Ù½Ã·ÎµåÇØ¾ß ÇÒ ¼öµµÀÖ½À´Ï´Ù.
  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: * = ¸¸¾à ´ç½ÅÀÌ ¾îµò°¡¿¡ ´ÙÀ½°ú °°Àº ÄÚµå ÁÙÀ» Ãß°¡ÇÏ¿© »çÀÌÆ®ÀÇ ·çÆ®¿¡ ¾×¼¼½ºÇÒ ¼ö¾ø´Â °æ¿ì ±ÍÇÏ´Â HTMLÀÇ <head> :

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

Related Posts: °ü·Ã °Ô½Ã¹° :
  • How to revert to the ¡°old¡± Google favicon ¾î¶»°Ô ""¿¹ÀüÀÇ Google faviconÀ» µÇµ¹¸®·Á
  • Simplehelp Recap: May 2007 - wow, and thank you! Simplehelp Á¤¸®Çغ¸ : 2004 ³â 12 ¿ù 2007 - ¿Í¿ì, ³Í °¨»çÇÕ´Ï´Ù!
  • How to create a custom iPhone and iPod touch icon for your web site ±ÍÇÏÀÇ À¥ »çÀÌÆ®¿¡ ´ëÇÑ Á¤ÀǸ¦ ¾î¶»°Ô ¾ÆÀÌÆù°ú ¾ÆÀÌÆÌ ÅÍÄ¡ÀÇ ¾ÆÀÌÄÜÀ» ¸¸µé
  • Welcome! ȯ¿µ!
  • How to insert a Google Map into your website using iWeb ±ÍÇÏÀÇ À¥»çÀÌÆ®¸¦ »ç¿ëÇÏ´Â ¹æ¹ý¿¡ 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 Æ®·¢¹é)

    20 Free RSS Readers Reviewed - Simplehelp 20 ÀÏ ¹«·á RSS ¸®´õ¸¦ °ËÅä - Simplehelp
    05.06.07 at 6:40 pm 05.06.07 ¿ÀÈÄ 6½Ã 40ºÐ¿¡¼­
    WordPress: The Complete Post-Install Checklist, Redux - Simplehelp ¿öµå : ÄÄÇø®Æ® Æ÷½ºÆ® - ¼³Ä¡ Á¡°ËÇ¥, Redux - Simplehelp
    05.26.07 at 2:15 pm 05.26.07 ¿ÀÈÄ 2½Ã 15ºÐ¿¡¼­
    How to revert to the ¡°old¡± Google favicon - Simplehelp ¾î¶»°Ô "¿À·¡µÈ"Google faviconÀÌ »óÅ·ΠµÇµ¹¸®·Á - Simplehelp
    05.30.08 at 9:12 pm 05.30.08 ¿ÀÈÄ 9½Ã 12ºÐ¿¡¼­
    Favicon Design : ..:.:.. faviconÀ» µðÀÚÀÎ : ..:.:.. 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 LGR LGR 05.30.07 at 9:55 am 05.30.07 ÀÏ ¿ÀÀü 9:55

    Good post. °Ô½Ã¹° ÁÁ¾Æ. I have used that favicon generator in the past and it works well. ³­ ±× faviconÀÌ ¹ßÀü±â¸¦ »ç¿ëÇØ¾ß °ú°Å¿Í ±×°ÍÀ» Àß ÀÛµ¿ÇÑ´Ù. Sometimes I don¡¯t have the time or creativity to make my own and have found some great free favicons here: °¡²û ³ª´Â ½Ã°£À̳ª âÀÇ·ÂÀ» ³» ½º½º·Î ¸¸µé ÇÊ¿ä ¾ø¾î ¿©±â¿¡ ¸î °¡Áö À§´ëÇÑ ¹ß°ß ¹«·á favicons : 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 ÅÂ±×¿Í Æ¯¼º : title="">Àº <a href="" »ç¿ëÇÒ ¼öÀÖ½À´Ï´Ù <abbr title=""> <acronym title="">ÀÇ <b> <blockquote cite=""> <cite>ÀÇ <code> <del datetime="">ÀÇ <em>°¡ <i> <q cite=""> <strike>ÀÇ <strong>