{"id":29,"date":"2010-02-01T18:06:23","date_gmt":"2010-02-01T16:06:23","guid":{"rendered":"http:\/\/faq.kgyt.eu\/hu\/?p=29"},"modified":"2014-12-03T20:20:07","modified_gmt":"2014-12-03T18:20:07","slug":"favicon-hogyan","status":"publish","type":"page","link":"https:\/\/faq.kgyt.eu\/hu\/favicon\/","title":{"rendered":"Favicon hogyan?"},"content":{"rendered":"<p>\t<\/p>\n<h2>T\u00f6rt\u00e9net<\/h2>\n<h3>Kezdetek<\/h3>\n<p>1999 m\u00e1rcius\u00e1ban a Microsoft az <acronym title=\"Microsoft Internet Explorer\">MSIE<\/acronym> 5-ben bevezette a Kedvencek ikonokkal val\u00f3 illusztr\u00e1l\u00e1s\u00e1t, innen a n\u00e9v is: <strong>Favorites icon.<\/strong><\/p>\n<p>Kezdetben a 16&#215;16 pixeles Windows ICO form\u00e1tum\u00fa k\u00e9pek helye a webszerver gy\u00f6k\u00e9rk\u00f6nyvt\u00e1ra volt, a f\u00e1jln\u00e9v pedig favicon.ico volt (pl.: <a href=\"http:\/\/kgyt.hu\/favicon.ico\">http:\/\/kgyt.hu\/favicon.ico<\/a>).<\/p>\n<p>A b\u00f6ng\u00e9sz\u0151 c\u00edmsor\u00e1ban csak azoknak az oldalaknak az ikonja jelent meg, amelyeket felvettek a k\u00f6nyvjelz\u0151k k\u00f6z\u00e9, a k\u00f6nyvjelz\u0151 felv\u00e9telekor a b\u00f6ng\u00e9sz\u0151 let\u00f6lt\u00f6tte a f\u00e1jlt, \u00e9s a k\u00e9s\u0151bbiekben is ezt a m\u00e1r let\u00f6lt\u00f6tt ikont haszn\u00e1lta (\u00fajrat\u00f6lt\u00e9s n\u00e9lk\u00fcl) ez\u00e9rt p\u00e9ld\u00e1ul a technol\u00f3gia lehet\u0151v\u00e9 tette, hogy a favicon.ico f\u00e1jl let\u00f6lt\u00e9sei alapj\u00e1n k\u00f6vetkeztetni lehessen azoknak a felhaszn\u00e1l\u00f3knak a sz\u00e1m\u00e1ra, akik az oldalt felvett\u00e9k a kedvencek k\u00f6z\u00e9.<br \/>\n\t\tA modern b\u00f6ng\u00e9sz\u0151k eset\u00e9ben ez a funkci\u00f3 nem haszn\u00e1lhat\u00f3, mivel a <em>favicon.ico<\/em> megjelenik azokn\u00e1l az oldalakn\u00e1l is, amelyek nem lettek k\u00f6nyvjelz\u0151zve.<\/p>\n<h3>Szabv\u00e1nyos\u00edt\u00e1s<\/h3>\n<p>1999 december\u00e9ben a <acronym title=\"Word Wide Web Consortium\">W3C<\/acronym> <acronym title=\"HyperText Markup Language\">HTML<\/acronym> 4.01, majd 2000 janu\u00e1rj\u00e1ban az <acronym title=\"eXtensible HyperText Markup Language\">XHTML<\/acronym> 1.0 aj\u00e1nl\u00e1s\u00e1ba is beker\u00fclt a favicon t\u00e1mogat\u00e1sa, de itt m\u00e1r nem felt\u00e9tlen\u00fcl a gy\u00f6k\u00e9rbe kell tenni az ikont, hanem a megfelel\u0151 <code>link<\/code> elem <code>href<\/code> attrib\u00fatuma \u00e1ltal meghat\u00e1rozott helyre.<br \/> Mindazon\u00e1ltal m\u00e9g mindig aj\u00e1nlott a gy\u00f6k\u00e9rk\u00f6nyvt\u00e1rba helyezni az ikont.<\/p>\n<p>Az al\u00e1bbi b\u00f6ng\u00e9sz\u0151k <strong>nem haszn\u00e1lj\u00e1k<\/strong> a szabv\u00e1nyt, de a gy\u00f6k\u00e9rk\u00f6nyvt\u00e1rban elhelyezett favicon.ico f\u00e1jlt megjelen\u00edtik, ha k\u00f6nyvjelz\u0151t vesznek fel r\u00e1 (teh\u00e1t a r\u00e9gi Microsoft aj\u00e1nl\u00e1st haszn\u00e1lj\u00e1k):<\/p>\n<ul>\n<li>Internet Explorer 5 \u00e9s 6<\/li>\n<li>Netscape 7<\/li>\n<\/ul>\n<p>A legt\u00f6bb b\u00f6ng\u00e9sz\u0151 ma m\u00e1r a szabv\u00e1nyk\u00f6vet\u00e9s ok\u00e1n is kezeli a favicon-okat, azonban ezek a gy\u00f6k\u00e9rben elhelyezett favicon-t is megjelen\u00edtik.<\/p>\n<p>A szabv\u00e1ny megengedi az ICO form\u00e1tumt\u00f3l val\u00f3 elt\u00e9r\u00e9st is, de az Internet Explorer nem t\u00e1mogatja csak az ICO-t.<\/p>\n<h2>Kompatibilit\u00e1s<\/h2>\n<p>T\u00e1mogatott <acronym title=\"Internet Assigned Numbers Authority\">IANA<\/acronym> <acronym title=\"Multipurpose Internet Mail Extensions\">MIME<\/acronym> t\u00edpusok:<\/p>\n<table class=\"table borderside\">\n<thead>\n<tr>\n<th class=\"textcenter\">form\u00e1tum<\/th>\n<th class=\"textcenter\">kiterjeszt\u00e9s<\/th>\n<th class=\"textcenter\">IANA MIME<\/th>\n<th class=\"textcenter\">MSIE MIME<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>ICO<\/th>\n<td>.ico<\/td>\n<td class=\"textcenter\">image\/vnd.microsoft.icon<\/td>\n<td class=\"textcenter\">image\/x-icon<\/td>\n<\/tr>\n<tr>\n<th>PNG<\/th>\n<td>.png<\/td>\n<td class=\"textcenter\">image\/png<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<th>APNG<\/th>\n<td>.apng<\/td>\n<td class=\"textcenter\">image\/png<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<th>GIF<\/th>\n<td>.gif<\/td>\n<td class=\"textcenter\">image\/gif<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<th>JPEG<\/th>\n<td>.jpg .jpeg<\/td>\n<td class=\"textcenter\">image\/jpeg<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<th>SVG<\/th>\n<td>.svg .svgz<\/td>\n<td class=\"textcenter\">image\/svg+xml<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>A modern b\u00f6ng\u00e9sz\u0151k k\u00f6z\u00fcl az al\u00e1bbiak t\u00e1mogatj\u00e1k a favicon-t szabv\u00e1nyosan:<\/p>\n<table class=\"table tablehover borderside\">\n<thead>\n<tr>\n<th class=\"textcenter\">b\u00f6ng\u00e9sz\u0151<\/th>\n<th colspan=\"7\" class=\"textcenter\">t\u00e1mogatott form\u00e1tumok<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>Internet Explorer 5+, Safari<\/th>\n<td rowspan=\"7\">ICO<\/td>\n<td colspan=\"6\">\u2013<\/td>\n<\/tr>\n<tr>\n<th>Google Chrome<\/th>\n<td rowspan=\"6\">PNG<\/td>\n<td colspan=\"5\">\u2013<\/td>\n<\/tr>\n<tr>\n<th>Internet Explorer 11+<\/th>\n<td rowspan=\"5\">GIF<\/td>\n<td colspan=\"4\">\u2013<\/td>\n<\/tr>\n<tr>\n<th>Safari 4+, Konqueror<\/th>\n<td rowspan=\"4\">JPEG<\/td>\n<td colspan=\"3\">\u2013<\/td>\n<\/tr>\n<tr>\n<th>Opera 7+, Firefox 1+, Google Chrome 4+<\/th>\n<td rowspan=\"3\">anim\u00e1lt GIF<\/td>\n<td colspan=\"2\">\u2013<\/td>\n<\/tr>\n<tr>\n<th>Opera 9.5+, Firefox 3+<\/th>\n<td rowspan=\"2\">APNG<\/td>\n<td>\u2013<\/td>\n<\/tr>\n<tr>\n<th>Opera 9.6+<\/th>\n<td>SVG<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>A favicon f\u00e1jl jellemz\u0151 param\u00e9terei<\/h2>\n<h3>M\u00e9retek<\/h3>\n<ul>\n<li>16&#215;16 (aj\u00e1nlott, ezt minden olyan b\u00f6ng\u00e9sz\u0151 t\u00e1mogatja, amely a favicon-t)<\/li>\n<li>32\u00d732<\/li>\n<li>48\u00d748<\/li>\n<\/ul>\n<h3>Sz\u00ednm\u00e9lys\u00e9g<\/h3>\n<ul>\n<li>16 sz\u00edn, vagy alatta (aj\u00e1nlott, a t\u00f6bbi bizonyos esetekben nem jelenik meg)<\/li>\n<li>8 bit<\/li>\n<li>16 bit<\/li>\n<li>24 bit (RGB)<\/li>\n<li>32 bit (RGBA \u00e9s nem CMYK!)<\/li>\n<\/ul>\n<h2>(X)HTML-be \u00e1gyaz\u00e1s<\/h2>\n<p>A szabv\u00e1ny szerint a favicon megad\u00e1s\u00e1nak form\u00e1tuma az al\u00e1bbi:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"icon\"<\/span> <span class=\"s_func\">type<\/span>=<span class=\"s_str\">\"image\/vnd.microsoft.icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span><\/pre>\n<p>vagy:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"shortcut icon\"<\/span> <span class=\"s_func\">type<\/span>=<span class=\"s_str\">\"image\/vnd.microsoft.icon\"<\/span>\r\n\t<span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span><\/pre>\n<p>A <code>type<\/code> attrib\u00fatum elhagyhat\u00f3, \u00e9s c\u00e9lszer\u0171 is elhagyni, mert a favicon-t t\u00e1mogat\u00f3 b\u00f6ng\u00e9sz\u0151k mindegyik\u00e9ben haszn\u00e1lhat\u00f3 ICO f\u00e1jlokat az Internet Explorer csak a nem szabv\u00e1nyos <code>image\/x-icon<\/code> t\u00edpus megad\u00e1sa eset\u00e9n jelen\u00edti meg.<\/p>\n<p>A <code>rel<\/code> attrib\u00fatum haszn\u00e1lata eset\u00e9n nem sz\u00e1m\u00edt a kis \u00e9s nagy bet\u0171k k\u00fcl\u00f6nbs\u00e9ge, teh\u00e1t az <code>Icon<\/code> \u00e9s az <code>icon<\/code>, esetleg az <code>ICON<\/code> ugyan azt jelenti.<\/p>\n<p>Javaslatom szerint az al\u00e1bbi m\u00f3don \u00e9rdemes megadni a favicon-t:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"shortcut icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"http:\/\/te.domained.hu\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span>\r\n<span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"http:\/\/te.domained.hu\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span><\/pre>\n<p>vagy:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"shortcut icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span>\r\n<span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span><\/pre>\n<p>HTML eset\u00e9n a tegek v\u00e9g\u00e9n nem tesz\u00fcnk lez\u00e1r\u00e1st, teh\u00e1t:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"shortcut icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span><span class=\"s_tag\">&gt;<\/span>\r\n<span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span><span class=\"s_tag\">&gt;<\/span><\/pre>\n<p>Az ikont lehet\u0151leg 16&#215;16 pixel m\u00e9retben, 16 sz\u00edn\u0171 indexelt ICO form\u00e1ban, a web fel\u0151l l\u00e1that\u00f3 \/ k\u00f6nyvt\u00e1rban c\u00e9lszer\u0171 elhelyezni.<\/p>\n<h2>Egy lehets\u00e9ges szerkeszt\u00e9si m\u00f3d (Photoshop)<\/h2>\n<ol>\n<li>K\u00e9sz\u00edts egy 16&#215;16 pixeles PNG form\u00e1tum\u00fa k\u00e9pet!<br \/>\n\t\t\t(ne legyen benne f\u00e9lig \u00e1tl\u00e1tsz\u00f3 pixel, legjobb, ha pixelenk\u00e9nt rajzolod meg.)<\/li>\n<li>Mentsd el webre, v\u00e1laszd a 256 sz\u00edn\u0171 PNG-t (8 bites), \u00e9s vedd vissza a sz\u00edneket 16-ra!<\/li>\n<li>Nyisd meg az elmentett 16&#215;16 pixel m\u00e9ret\u0171 16 sz\u00edn\u0171 PNG-det!<\/li>\n<li>Mentsd el m\u00e1sk\u00e9nt az ICO form\u00e1tumot v\u00e1lasztva!<br \/>\n\t\t\t(Plugin telep\u00edt\u00e9se sz\u00fcks\u00e9ges ehhez. A sima icon form\u00e1tumot v\u00e1laszd, ne a Vista icont!)<\/li>\n<li>A f\u00e1jl neve <code>favicon.ico<\/code> legyen!<\/li>\n<\/ol>\n<h2>Plugin Windows-os Photoshopra<\/h2>\n<p>T\u00f6ltsd le a plugint:<br \/>\n\t\t<a href=\"http:\/\/static.kgyt.hu\/download\/favicon\/ICOFormat.8bi\">ICOFormat.8bi<\/a> (185344 byte)<\/p>\n<p>Photoshop CS5 eset\u00e9n m\u00e1sold be ide:<br \/>\n\t\t<code>c:\\Program Files\\Adobe\\Adobe Photoshop CS5\\Plug-Ins\\File Formats<\/code><\/p>\n<p>Egy\u00e9bk\u00e9nt \u00e9rtelem szer\u0171en:<br \/>\n\t\t<code><strong>A photoshop mapp\u00e1ja<\/strong>\\Plug-Ins\\File Formats<\/code><\/p>\n<h2>Felt\u00f6lt\u00e9s<\/h2>\n<ol>\n<li>T\u00f6ltsd fel a webes gy\u00f6k\u00e9rk\u00f6nyvt\u00e1radba a <code>favicon.ico<\/code> f\u00e1jlt!<br \/>\n\t\t\t(Ekkor \u00edgy lesz el\u00e9rhet\u0151: <code>http:\/\/te.domained.hu\/favicon.ico<\/code>)<\/li>\n<li>\n<p>Helyezd el a weboldalad <code><span class=\"s_tag\">&lt;head&gt;<\/span><\/code> \u00e9s <code><span class=\"s_tag\">&lt;\/head&gt;<\/span><\/code> r\u00e9sze k\u00f6z\u00e9, vagyis a fejr\u00e9szbe az al\u00e1bbi k\u00f3dot:<\/p>\n<pre><span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"shortcut icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span>\r\n<span class=\"s_tag\">&lt;link<\/span> <span class=\"s_func\">rel<\/span>=<span class=\"s_str\">\"icon\"<\/span> <span class=\"s_func\">href<\/span>=<span class=\"s_str\">\"\/favicon.ico\"<\/span> <span class=\"s_tag\">\/&gt;<\/span><\/pre>\n<\/li>\n<li>K\u00e9sz!<\/li>\n<\/ol>\n<h2>Hivatkoz\u00e1sok<\/h2>\n<ul>\n<li><a href=\"http:\/\/en.wikipedia.org\/wiki\/Favicon\">Favicon (Wikipedia)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/hu.wikipedia.org\/wiki\/Favicon\">Favicon (Wikip\u00e9dia)<\/a><\/li>\n<li><a href=\"http:\/\/www.telegraphics.com.au\/sw\/#icoformat\">Free plugins for Photoshop &amp; Illustrator&#8230;and other software (ICO Format)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/www.telegraphics.com.au\/svn\/icoformat\/trunk\/dist\/README.html\">ICO (Windows Icon) file format plugin for Photoshop<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/www.december14.net\/ways\/rest\/favicon.shtml\">Making a favicon (december14.net)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/somejunkwelike.com\/wordpress\/2005\/05\/24\/howto-faviconico-on-mac-os-x\/\">HOWTO: create a favicon.ico on Mac OS X (somejunkwelike.com)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/www.graphicsguru.com\/favicon.php\">Free and easy to use online Favicon Generator (graphicsguru.com)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/tools.dynamicdrive.com\/favicon\/\">FavIcon Generator (dynamicdrive.com)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/www.chami.com\/html-kit\/services\/favicon\/\">FavIcon from Pics (chami.com)<\/a> \u2013 angol<\/li>\n<li><a href=\"http:\/\/webpillango.org\/2007\/09\/17\/ikon-a-weboldalnak-favicon\/\">Ikon a weboldalnak, favicon! (WebPillang\u00f3)<\/a><\/li>\n<li><a href=\"http:\/\/www.favicon.hu\/\">favicon.hu ikonszerkeszt\u0151<\/a><\/li>\n<li><a href=\"http:\/\/weblabor.hu\/forumok\/temak\/6542\">Favicon megin&#8230; (Weblabor)<\/a><\/li>\n<li><a href=\"http:\/\/www.winterdrache.de\/freeware\/png2ico\/\">png2ico &#8211; PNG to icon converter (Linux, Unix, GNU, Windows, \u2026)<\/a><\/li>\n<li><a href=\"http:\/\/www.zylsoft.com\/bmp2ico.htm\">ZylBmp2Ico 2.0<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>T\u00f6rt\u00e9net Kezdetek 1999 m\u00e1rcius\u00e1ban a Microsoft az MSIE 5-ben bevezette a Kedvencek ikonokkal val\u00f3 illusztr\u00e1l\u00e1s\u00e1t, innen a n\u00e9v is: Favorites icon. Kezdetben a 16&#215;16 pixeles Windows ICO form\u00e1tum\u00fa k\u00e9pek helye a webszerver gy\u00f6k\u00e9rk\u00f6nyvt\u00e1ra volt, a f\u00e1jln\u00e9v pedig favicon.ico volt (pl.: http:\/\/kgyt.hu\/favicon.ico). A b\u00f6ng\u00e9sz\u0151 c\u00edmsor\u00e1ban csak azoknak az oldalaknak az ikonja jelent meg, amelyeket felvettek a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P7l1e3-t","_links":{"self":[{"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":1,"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/pages\/29\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/faq.kgyt.eu\/hu\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}