Hint | Food | ¸À°úÇâ | Diet | Health | ºÒ·®Áö½Ä | ÀÚ¿¬°úÇÐ | My Book | À¯Æ©ºê | Frims | ¿ø ·á | Á¦ Ç° | Update | Site |
±â¼ú ¡í IT ¡í ÄÚµùÆÁ
CSS : ÆĺñÄÜ ¼³Á¤ HTML,CSS - sql - À©µµ, ÇÁ·Î±×·¥ ASP, VB ÆÁ - ¹®ÀÚÇ¥, »ùÇà - ½ÄÇ°°ü·Ã S/W - ÆĺñÄÜ ¼³Á¤ http://webdir.tistory.com/337 : ÆĺñÄܼ³Á¤¿¡ ´ëÇÑ ÁÁÀº ±Û ÆĺñÄÜ(favicon) ¼Ò°³ ÆĺñÄÜÀº À¥ÆäÀÌÁö¿¡ Á¢¼ÓÇßÀ»¶§, »ó´Ü ÅÇ¿¡ º¸¿©Áö´Â ¾ÆÀÌÄÜÀ» ÀÏÄ´´Ù. ÀÌ ¾ÆÀÌÄÜÀº Áñ°Üã±â¿¡ À¥ÆäÀÌÁö¸¦ µî·ÏÇÒ¶§µµ »ç¿ëµÈ´Ù. À¥»çÀÌÆ®¸¦ ´ëÇ¥ÇÏ´Â ·Î°í(logo)ÀÇ °³³ä°ú ºñ½ÁÇϸç, »çÀÌÆ®ÀÇ ¼º°ÝÀ» µå·¯³»±âµµ ÇÑ´Ù. ÃÖ±Ù¿¡´Â ÅÍÄ¡(touch) ¾ÆÀÌÄÜ, ŸÀÏ(tile) ¾ÆÀÌÄÜÀÇ µîÀåÀ¸·Î ´õ¿í È¥¶õ½º·¯¿òÀÌ °¡ÁߵǾúÀ¸¸ç, °¢°¢ÀÇ ±â±â¿¡ ÃÖÀûÈµÈ ÆĺñÄÜÀÇ Å©±â¸¦ Àç¼³Á¤ÇÏ¿© °³¹ßÀڵ鿡°Ô ¾î·Á¿òÀ» ÁÖ°í ÀÖ´Ù. ÆĺñÄÜ(favicon) ±âº» ¼³Á¤ 1999³â¿¡ ÀÎÅÍ³Ý ÀͽºÇ÷η¯(Internet Explorer)¿¡ óÀ½ µµÀÔµÈ ÈÄ·Î, ÆĺñÄÜÀÇ »ç¾çÀº °ÅÀÇ º¯°æµÇÁö ¾ÊÀº ä·Î ´ëºÎºÐ ¾ÆÀÌÄÜ(ico) ÆÄÀÏÀÇ ÇüÅ·Πµµ¸ÞÀÎ(domain)ÀÇ ·çÆ®(root) µð·ºÅ丮¿¡ À§Ä¡ÇØ ¿Ô´Ù. Å©·Î½ººê¶ó¿ì¡À» ¿°µÎ¿¡ µÐ´Ù¸é, ¾î¶°ÇÑ HTML Äڵ嵵 ÀÛ¼ºÇÏÁö ¾Ê°í, ÀÚ½ÅÀÇ À¥°èÁ¤ ·çÆ®(root) µð·ºÅ丮¿¡ 16x16 °ú 32x32ÀÇ À̹ÌÁö¸¦ Çϳª¿¡ Ç°Àº(multiple sizes1) favicon.ico ÆÄÀÏÀ» À§Ä¡½ÃÅ´À¸·Î½á, ¼³Á¤À» ¸¶¹«¸®ÇÑ´Ù. ÀÌ ¹æ¹ýÀº ¾¾¸ùÅ°(SeaMonkey) ºê¶ó¿ìÀú¸¦ Á¦¿ÜÇÑ ¸ðµç µ¥½ºÅ©Åé ºê¶ó¿ìÀú/¹öÀü¿¡¼(IE6 Æ÷ÇÔ) ÀÛµ¿ÇÑ´Ù. CMSÀÇ °æ¿ì¿¡´Â Å׸¶(theme) ȤÀº À̹ÌÁö(image) µð·ºÅ丮¸¦ ÀÌ¿ëÇϱ⵵ ÇÑ´Ù. HTML rel ¼Ó¼º°ú type ¼Ó¼º ÀÚ¼¼È÷ ÀüÅëÀûÀ¸·Î favicon.ico ÆÄÀÏÀº 16Ä÷¯ 24ºñÆ® ¾ËÆÄ Åõ¸íµµ(alpha transparency) Æ÷¸ËÀÇ 16x16 ¾ÆÀÌÄÜ(ICO) ÆÄÀÏÀÌ´Ù. ÃÖ±ÙÀÇ ÆĺñÄÜÀº 32x32¸¦ Áö¿øÇϴµ¥, ¸ðµç ÁÖ¿ä Àαâ ÀÖ´Â ºê¶ó¿ìÀúµé¿¡¼ ÀûÀýÇÏ°Ô Ãà¼ÒµÇ¾î À̸¦ Ç¥ÇöÇØÁØ´Ù. IE10ÀÇ ¸ÅÆ®·Î(Metro)¿¡¼´Â 32x32 ¾ÆÀÌÄÜÀÌ ÁÖ¼Òâ¿¡ »ç¿ëµÈ´Ù. ICO ÆÄÀÏÀ» »ç¿ëÇÒ °æ¿ì ¾Æ·¡¿Í °°Àº Å©±â Á¤µµ´Â Æ÷ÇÔÇÏ´Â °ÍÀ» ÃßõÇÑ´Ù. Å©±â ¿ëµµ 16x16 IE9 ÁÖ¼Ò Ç¥½ÃÁÙ, °íÁ¤µÈ(pinned) »çÀÌÆ®ÀÇ Á¡ÇÁ¸ñ·Ï/Åø¹Ù/¿À¹ö·¹ÀÌ 32x32 IEÀÇ »õ·Î¿î ÅÇ ÆäÀÌÁö, À©µµ¿ì7 À̻󿡼 ÀÛ¾÷ Ç¥½ÃÁÙ ´ÜÃß, Safari ³ªÁß¿¡ Àб⠻çÀ̵å¹Ù 48x48 À©µµ¿ìÁî »çÀÌÆ® ¾ÆÀÌÄÜ Á» ´õ ¿Ïº®ÇÏ°Ô ¼³Á¤ÇÏ±æ ¿øÇÏ°í 1~3kb ÂëÀÇ ¿©ºÐÀÇ ¿ë·®Áõ°¡°¡ »ó°ü¾ø´Ù¸é ¾Æ·¡ÀÇ Å©±âµµ Æ÷ÇÔ½ÃÄѵµ µÈ´Ù. Å©±â ¿ëµµ 24x24 IE9 °íÁ¤µÈ(pinned) »çÀÌÆ® ºê¶ó¿ìÀú UI 64x64 À©µµ¿ìÁî »çÀÌÆ® ¾ÆÀÌÄÜ, HiDPI/Retina ¿¡¼ Safari ³ªÁß¿¡ Àб⠻çÀ̵å¹Ù ÆĺñÄÜ(favicon) Ãß°¡ ¼³Á¤ iOS 2.0 ÀÌ»ó°ú Android 2.1 À̻󿡼´Â ÅÍÄ¡(Touch) ¾ÆÀÌÄÜ ÁöÁ¤ÀÌ °¡´ÉÇÏ´Ù. °íÇØ»óµµ ¾ÆÀÌÄÜ(152x152) Çϳª¸¸ ÁغñÇϸé ÀúÇػ󵵿¡¼´Â ¾Ë¾Æ¼ ¾ÆÀÌÄÜÀÇ Å©±â°¡ º¯°æµÈ´Ù. ´Ù¸¸, ±â±âÀÇ È¨½ºÅ©¸°¿¡ ¾ÆÀÌÄÜÀÌ Ãß°¡µÇ¸é ¼º´É¿¡ ºÎÁ¤ÀûÀÏ ¼ö´Â ÀÖ´Ù. HTML apple-touch-icon ¼¼ºÐÈ ´ëÀÀ IE10 ¸ÅÆ®·Î´Â ŸÀÏ(tile) ¾ÆÀÌÄÜÀÌ Ãß°¡µÇ¾ú´Âµ¥(apple-touch-icon°ú À¯»çÇÑ) ¹æ¹®ÀÚ°¡ °íÁ¤(pins)ÇÒ °æ¿ì, ½ÃÀÛȸ鿡 À̸¦ Ç¥½ÃÇÑ´Ù. ŸÀÏ ¾ÆÀÌÄÜÀÇ Å©±â´Â 144x144 PNG ÆÄÀÏÀ̸ç, Åõ¸íÇÑ ¹è°æÀ» »ç¿ëÇØ¾ß ÃÖ»óÀÇ °á°ú¸¦ ¾òÀ» ¼ö ÀÖ´Ù. HTML ¿øÇϴ ŸÀÏÀÇ »ö»óÀ¸·Î content="#ffffff"ºÎºÐÀ» ¼öÁ¤ÇÏ¸é µÈ´Ù. ÆĺñÄÜ(favicion) PNG ÆÄÀÏ Áö¿ø »çÇ× Chrome, Firefox, Opera 7+, ±×¸®°í Safari 4+´Â ¸ðµÎ PNG ÆĺñÄÜÀ» Áö¿øÇÏÁö¸¸ Chrome°ú Safari´Â ICO ÆĺñÄÜÀÌ ÇÔ²² ÁöÁ¤µÇ¾î ÀÖÀ¸¸é ¼±¾ðµÈ ¼ø¼¿¡ »ó°ü¾øÀÌ PNG ÆĺñÄÜÀ» ¹«½ÃÇÏ°í ICO ÆĺñÄÜÀ» »ç¿ëÇÑ´Ù. Áï, PNG ÆĺñÄÜÀ» Áö¿øÇÏÁö ¾Ê´Â IE¸¦ À§ÇØ ICO ÆÄÀÏÀ» »ç¿ëÇÏ°Ô µÇ´Â ¼ø°£, Chrome°ú Safari´Â PNG ÆĺñÄÜÀ» ¹«½ÃÇÏ°Ô µÈ´Ù´Â À̾߱â´Ù. favicion.ico > favicon.png HTML ICO ÆĺñÄÜÀº multiple sizes¸¦ Áö¿øÇϱ⿡ ÇϳªÀÇ ICO ÆÄÀÏ¿¡ ¿©·¯ »çÀÌÁîÀÇ ¾ÆÀÌÄÜÀ» ³Ö¾î µÎ°í À̸¦ È°¿ëÇÒ ¼ö ÀÖÁö¸¸ PNG ÆĺñÄÜÀº ÀÌ°ÍÀÌ ºÒ°¡´ÉÇÏ´Ù. ±×·± ÀÌÀ¯·Î °¢°¢ÀÇ ÇÊ¿äÇÑ »çÀÌÁ ¾Æ·¡¿Í °°ÀÌ ¸ðµÎ ¼±¾ðÇØ¾ß ÇÑ´Ù. HTML PNG ÆĺñÄÜÀ» »ç¿ë½Ã¿¡ ºê¶ó¿ìÀú´Â ¾î¶°ÇÑ ÆĺñÄÜÀ» »ç¿ëÇÒÁö ¾î¶»°Ô °áÁ¤Çϴ°¡? Firefox¿Í Safari´Â ¸¶Áö¸·¿¡ Á¦°øµÇ´Â ÆĺñÄÜÀ» »ç¿ëÇÑ´Ù. ¸Æ(Mac) ¿ë ChromeÀº ICO Æ÷¸ËÀÇ ÆĺñÄÜÀÌ ¾Æ´Ï¶ó¸é 32x32 ÆĺñÄÜÀ» »ç¿ëÇÑ´Ù. À©µµ¿ìÁî(Windows) ¿ë ChromeÀº 16x16ÀÌ ¸ÕÀú ¼±¾ðµÇÁö ¾Ê´Â´Ù¸é ICO ÆĺñÄÜÀÌ »ç¿ëµÈ´Ù. »ó±â ¿É¼Ç Áß ¾Æ¹«°Íµµ »ç¿ëÇÒ ¼ö ¾ø´Â °æ¿ì, ¾çÂÊ ChromeÀº ¸ÕÀú ¼±¾ðµÇ´Â ÆĺñÄÜÀ» »ç¿ëÇÏ°í Firefox¿Í Safari´Â ¸¶Áö¸·¿¡ ¼±¾ðµÈ °ÍÀÌ »ç¿ëµÈ´Ù. »ç½Ç ¸Æ ¿ë ChromeÀº 16x16 ÆĺñÄÜÀ» ¹«½ÃÇÏ°í non-retina ±â±â¿¡¼ 16x16À¸·Î Å©±â¸¦ ÁÙÀ϶§¸¸ 32x32 ÆĺñÄÜÀ» »ç¿ëÇÑ´Ù. Opera´Â »ç¿ë°¡´ÉÇÑ ¾ÆÀÌÄÜ Áß¿¡¼ Çϳª¸¦ ÀÓÀÇ·Î ¼±ÅÃÇÏ°Ô µÈ´Ù. ÆĺñÄÜ(favicon) ½ÇÀü Á¤¸® Àû¾îµµ ¾Æ·¡ÀÇ ICO ÆÄÀÏÀº ÁغñÇÑ´Ù. Å©±â ÆÄÀÏ¸í ¿ëµµ 16x16 & 32x32 favicon.ico IE¸¦ À§ÇØ ÇÊ¿äÇÑ ±âº»ÀÌ´Ù. Á¶±Ý ´À·ÁÁö´õ¶óµµ iOS¿Í Android¸¦ °í·ÁÇÏ°Ú´Ù¸é ¾Æ·¡¿Í °°Àº PNG ÆÄÀÏÀ» ÁغñÇÑ´Ù. Å©±â ÆÄÀÏ¸í ¿ëµµ 152x152 favicon-152.png ÀϹÝÀûÀ¸·Î iOS¿Í Android¿¡¼ »ç¿ëÇÏ´Â ¾ÆÀÌÄÜ, ±â±â¿¡ µû¶ó ÀÚµ¿À¸·Î Å©±â°¡ ÁÙ¿©Áø´Ù. Á» ´õ ¿Ïº®ÇÑ ÆĺñÄÜÀ» ¼³Á¤Çϱ⠿øÇÑ´Ù¸é ¾Æ·¡ÀÇ Ç¥¸¦ Âü°íÇÏ¿© PNG ÆÄÀÏÀ» ÁغñÇϵµ·Ï ÇÏÀÚ. Å©±â ÆÄÀÏ¸í ¿ëµµ 32x32 favicon-32.png ÀϺΠ¿À·¡µÈ ÇÏÁö¸¸ ³Ê¹« ¿À·¡µÈ ChromeÀº ICO¸¦ Á¦´ë·Î ó¸®ÇÏÁö ¸øÇÔ. 57x57 favicon-57.png Ç¥ÁØ iOS Ȩ½ºÅ©¸°(iPad Touch, iPhone 3GÀÇ 1¼¼´ë) 72x72 favicon-72.png iPad Ȩ½ºÅ©¸° ¾ÆÀÌÄÜ 96x96 favicon-96.png ±¸±ÛTV ¾ÆÀÌÄÜ 120x120 favicon-120.png iPhone ·¹Æ¼³ª(retina) ÅÍÄ¡ ¾ÆÀÌÄÜ(Change for iOS 7: up from 114x114) 128x128 favicon-128.png Chrome À¥½ºÅä¾î ¾ÆÀÌÄÜ 144x144 favicon-144.png °íÁ¤(pinned)µÈ IE10 ¸ÅÆ®·Î ŸÀÏ 152x152 favicon-152.png iPad ·¹Æ¼³ª ÅÍÄ¡ ¾ÆÀÌÄÜ(Change for iOS 7: up from 144x144) 195x195 favicon-195.png Opera ½ºÇÇµå ´ÙÀ̾ó ¾ÆÀÌÄÜ 228x228 favicon-228.png Opera Coast ¾ÆÀÌÄÜ ÆĺñÄÜ(favicon)°ú IE ºê¶ó¿ìÀú À¯ÀÇ»çÇ× IE8~10Àº ÆäÀÌÁöÀÇ Ã¹ ¹æ¹®¿¡ ¹Ù·Î ÆĺñÄÜÀ» Ç¥½ÃÇØÁØ´Ù. IE7Àº ù¹ø° ¹æ¹®Àº ¹«½ÃÇÏ°í Àç¹æ¹®½Ã¿¡ ÆĺñÄÜÀ» Ç¥½ÃÇØÁØ´Ù. IE6Àº »çÀÌÆ®¸¦ ºÏ¸¶Å©¸¦ ÇÑ ÈÄ ºê¶ó¿ìÀú¸¦ ´Ù½Ã ¿¸é Ç¥½ÃÇØÁØ´Ù. IE6Àº ºê¶ó¿ìÀú ij½Ã°¡ »èÁ¦ µÉ ¶§¸¶´Ù ÆĺñÄÜÀ» »èÁ¦Çϸç, »çÀÌÆ®°¡ ´Ù½Ã ºÏ¸¶Å©µÈ´Ù°Å³ª ÆĺñÄÜÀÌ ¾î¶»°Ôµç ´Ù½Ã ·Îµå µÉ¶§±îÁö ÆĺñÄÜÀ» Ç¥½ÃÇÏÁö ¾Ê´Â´Ù. ÆĺñÄÜ(favicon) °Á¦ »õ·Î°íħ ÀϹÝÀûÀ¸·Î´Â ÇÊ¿äÄ¡ ¾ÊÀ¸³ª, °³¹ßÇÏ´Â µ¿¾ÈÀ̳ª »õ·Î°íħÀ¸·Î ÆĺñÄÜÀÌ Ç¥½ÃµÇÁö ¾ÊÀ»¶§¸¦ °í·ÁÇÑ ¹æ¹ýÀÌ´Ù. ºê¶ó¿ìÀú ij½Ã¸¦ »èÁ¦ÇÑ´Ù(Ctrl + F5 ȤÀº Ctrl + Shift + R). ¸¸ÀÏ IE¶ó¸é ºê¶ó¿ìÀú¸¦ ´Ý°í ´Ù½Ã ¿¬´Ù. ¸¸ÀÏ ¿©ÀüÈ÷ °ñ¸Ó¸®¸¦ ½â°í ÀÖ´Ù¸é »õ·Î¿î ÅÇÀ» ¿¾îº¸°Å³ª How do I force a favicon refreshÀ» Âü°íÇ϶ó. ÀϽÃÀûÀ¸·Î ¸í½ÃÀûÀÎ HTML ű׸¦ Ãß°¡ÇÏ°í Äõ¸® ¹®ÀÚ¿À» Ãß°¡ÇÑ´Ù. È®ÀÎÀÌ ¿Ï·áµÈ ÈÄ¿£ À̸¦ Á¦°ÅÇÏÀÚ. HTML µµ¿òÀÌ µÇ´Â µµ±¸µé OptiPNG : ICO ÆÄÀϾȿ¡ ³ÖÀ» PNG ÆÄÀϵéÀ» ÃÖÀûÈ ÇÑ´Ù. x-icon editor : ICO ÆÄÀÏÀ» ¸¸µé¼ö ÀÖ´Â À¥¿ë µµ±¸ÀÌ´Ù. Favicon & App Icon Generator : PNG ÆĺñÄÜÀ» ´Ù¾çÇÏ°Ô »ý¼ºÇØÁØ´Ù(À§¿¡¼ ´Ù·é apple-touch-iconÀ» Å©±âº°·Î, IE10¿ë ŸÀÏ ÆĺñÄÜÀ» »ý¼º). Ãâó: http://webdir.tistory.com/337 [WEBDIR] |
||||
|
|
|||