{"id":31,"date":"2007-08-15T09:14:30","date_gmt":"2007-08-15T15:14:30","guid":{"rendered":"http:\/\/benblogged.com\/?p=31"},"modified":"2007-08-15T11:20:33","modified_gmt":"2007-08-15T17:20:33","slug":"how-to-create-a-favicon-icon","status":"publish","type":"post","link":"http:\/\/benblogged.com\/?p=31","title":{"rendered":"How to create a Favicon Icon"},"content":{"rendered":"

Well being a web designer I\u00e2\u20ac\u2122m a bit embarrassed to admit I didn\u00e2\u20ac\u2122t learn how to create a favicon.ico till not long ago. I think I never really thought about it or realized how important they are. So what is a favicon, they are the tiny icons that appear in the address bar (in front of your URL) and in your bookmarks\/favorites.<\/p>\n

<\/p>\n

Great web design is not just about good color combinations, a nice layout, and cool graphics\u00e2\u20ac\u00a6it\u00e2\u20ac\u2122s the details that separate ok from fantastic. Typically people use their logo for a favicon icon and that is what I would recommend. Ben Blogged does not really have a logo so I just used a design element found in my site. Well lets get started.<\/p>\n

Photoshop Plugin<\/h3>\n

You need a special Photoshop plugin to save files as icons. You can download the plugin free from Telegraphics<\/a><\/p>\n

Create Graphics<\/h3>\n

Favicon Icons are 16 x 16 pixels so either set your canvas size to that or if you need more room to create the design make your canvas size 32 x 32 or 64 x 64 pixels. Keep it simple because no matter what size you design it at you need to save it as 16 x 16 pixels.<\/p>\n

Save Your Icon<\/h3>\n

Once your design is looking great select file, save as, and then select ICO (Windows Icon) from the format drop down menu. YOU MUST NAME IT favicon so your final file name will be favicon.ico<\/p>\n

\"fav_save2.jpg\"<\/p>\n

Note: For some reason you sometimes need to save your file as a gif or jpg first then save it as a icon.<\/p>\n

Almost Done<\/h3>\n

Now you need to upload your fresh new favicon icon to your site. Most hosts\/browsers will recognize the icon and do their thing but if you want to be safe you need to include the following code in the head section on each page <link rel=”Shortcut Icon” href=”favicon.ico”><\/p>\n

You are the Man\/Woman<\/h3>\n

You just created your favicon icon and I bet you look and feel great. Now last but not least have a beer to celebrate! It\u00e2\u20ac\u2122s Ben Blogged\u00e2\u20ac\u00a6<\/p>\n","protected":false},"excerpt":{"rendered":"

Well being a web designer I\u00e2\u20ac\u2122m a bit embarrassed to admit I didn\u00e2\u20ac\u2122t learn how to create a favicon.ico till not long ago. I think I never really thought about it or realized how important they are. So what is a favicon, they are the tiny icons that appear in the address bar (in front […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[],"_links":{"self":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts\/31"}],"collection":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":0,"href":"http:\/\/benblogged.com\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions"}],"wp:attachment":[{"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/benblogged.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}