{"id":356,"date":"2006-09-18T00:15:23","date_gmt":"2006-09-17T18:15:23","guid":{"rendered":"http:\/\/www.dotcomunderground.com\/blogs\/2006\/09\/18\/how-to-make-faviconico\/"},"modified":"2006-09-18T02:01:32","modified_gmt":"2006-09-17T20:01:32","slug":"how-to-make-faviconico","status":"publish","type":"post","link":"https:\/\/www.dotcomunderground.com\/blogs\/2006\/09\/18\/how-to-make-faviconico\/","title":{"rendered":"favicon.ico: How to make favicon.ico using free tools"},"content":{"rendered":"<p>A favicon (short for &#8220;favorites icon&#8221;), also known as a page icon, is an icon associated with a particular website or webpage.<\/p>\n<p>To create a favicon.ico first we need to create a 32x32px .png image. We can make it with Macromedia Fireworks.<\/p>\n<p>Then we resize it to another 16x16px .png image.<\/p>\n<p>So now we have a set of 2 .png images. In my case i named the files <strong>favicon16.png<\/strong> and <strong>favicon32.png<\/strong>. Now we will make an icon file from it.<\/p>\n<p>We need to download <a href=\"http:\/\/www.winterdrache.de\/freeware\/png2ico\/data\/png2ico-win-2002-12-08.zip\">png2ico<\/a>. It is an open source tool to conver .png file to .ico<\/p>\n<p>Lets download and extract it.<\/p>\n<p>Inside we will have a <strong>png2ico<\/strong> folder. Move it to <strong>C:\\<\/strong><br \/>\nSo now we have a folder <strong>C:\\png2ico<\/strong><br \/>\n<img decoding=\"async\" id=\"image350\" alt=\"png2ico.exe\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/favicon-exe.jpg\" \/><\/p>\n<p>Lets bring the previously created <strong>favicon16.png<\/strong> and <strong>favicon32.png<\/strong> here.<\/p>\n<p>Now bring up command prompt.<\/p>\n<p>Click <strong>Start > Run<\/strong><br \/>\n<img decoding=\"async\" id=\"image351\" alt=\"Favicon Run\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/favicon-run.jpg\" \/><\/p>\n<p>Type <strong>cmd<\/strong> and click <strong>OK<\/strong><br \/>\n<img decoding=\"async\" id=\"image352\" alt=\"Favicon cmd\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/favicon-cmd.jpg\" \/><\/p>\n<p>Now we have our command prompt.<br \/>\n<img decoding=\"async\" id=\"image353\" alt=\"Command Prompt\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/command-prompt.jpg\" \/><\/p>\n<p>Now lets go to our png2ico (C:\\png2ico) folder. Type:<br \/>\n<code>c:\\png2ico<\/code><br \/>\nHit ENTER.<\/p>\n<p>And now the final step!<br \/>\nExecute the tool using the following command:<br \/>\n<code>png2ico favicon.ico favicon16.png favicon32.png<\/code><br \/>\nHit ENTER<br \/>\n<img decoding=\"async\" id=\"image354\" alt=\"png2ico command prompt\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/png2ico-command-prompt.jpg\" \/><\/p>\n<p>&#8230;and we have our final favicon.ico file created in the c:\\png2ico folder.<br \/>\n<img decoding=\"async\" id=\"image355\" alt=\"favicon.ico\" src=\"http:\/\/www.dotcomunderground.com\/blogs\/wp-content\/uploads\/2006\/09\/favicon.jpg\" \/><\/p>\n<p>Now upload the created <strong>favicon.ico<\/strong> file to the root level public directory of your site.<\/p>\n<p>It your site is www.domain.com your favicon file should be accessable as www.domain.com\/favicon.ico<\/p>\n<p>also add the following 2 lines in the <code>&lt;head&gt; ...... &lt;\/head&gt;<\/code> of your page.<\/p>\n<p><code>&lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image\/x-icon&quot;&gt; <br \/>\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot;   type=&quot;image\/x-icon&quot;&gt; <\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A favicon (short for &#8220;favorites icon&#8221;), also known as a page icon, is an icon associated with a particular website or webpage. To create a favicon.ico first we need to create a 32x32px .png image. We can make it with Macromedia Fireworks. Then we resize it to another 16x16px .png image. So now we have [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9,13],"tags":[304,29,39,78,140],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-tech","category-tips","category-tutorials","tag-tech","tag-technology","tag-tips-and-tricks","tag-tutorial","tag-web"],"_links":{"self":[{"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcomunderground.com\/blogs\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}