{"id":184,"date":"2008-07-31T01:29:27","date_gmt":"2008-07-31T06:29:27","guid":{"rendered":"http:\/\/www.jasonmorrison.net\/content\/?p=184"},"modified":"2008-07-31T23:35:15","modified_gmt":"2008-08-01T04:35:15","slug":"creating-a-favicon","status":"publish","type":"post","link":"http:\/\/www.jasonmorrison.net\/content\/2008\/creating-a-favicon\/","title":{"rendered":"Creating a Favicon"},"content":{"rendered":"

\"My<\/a> Nelson<\/a> reminded me today that I didn’t have a favicon for this site. I took a few moments and created the amazing little pencil that’s sitting in the address bar above.<\/p>\n

For all the non-techies and new webmasters out there who have stumbled across this page, a favicon is the little icon that show up next to a web site’s URL and next to the page’s title in your bookmarks. They’re very small (16 by 16 pixels) but they can add a dash of branding to your site and are a helpful visual signal for bookmark navigation, increasing the information scent.<\/p>\n

Want to create your own favicon? You can draw one pixel-by-pixel at this site<\/a>, but I’d recommend busting out Photoshop and creating one yourself. Try to pick initials, a logo, or an object that can be expressed very simply – I used an apple for Mealographer<\/a>, for example. You can go as simple as a couple of squares that fit your site’s color scheme and still create a memorable association for your users.<\/p>\n

Modern browsers like Firefox allow you to use .gif and .png files directly, with some code like this:<\/p>\n

\n
<link<\/span> rel<\/span>=\"shortcut icon\" <\/span>type<\/span>=\"image\/png <\/span>href<\/span>=\"http:\/\/www.jasonmorrison.net\/favicon.png\" <\/span>\/<\/span><\/span>><\/pre>\n<\/blockquote>\n
That means you can have an animated favicon…  just make sure you’re doing it for some useful or artistic purpose, otherwise you will annoy your users.<\/p>\n
From what I’ve heard Internet Explorer still has some issues<\/a>, so you may want to use the older .ico format.  This site will convert the image for you<\/a>.<\/p>\n
\n
<link<\/span> rel<\/span>=\"shortcut icon\" <\/span>type<\/span>=\"image\/ico\" <\/span>href<\/span>=\"http:\/\/www.jasonmorrison.net\/favicon.ico\" <\/span>\/<\/span><\/span>><\/pre>\n<\/blockquote>\n
If you want to get really crazy, you can use Javascript to dynamically alter the favicon, which is great if you want to play Defender on the smallest display ever<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Nelson reminded me today that I didn’t have a favicon for this site. I took a few moments and created the amazing little pencil that’s sitting in the address bar above. For all the non-techies and new webmasters out there who have stumbled across this page, a favicon is the little icon that show up […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[19],"tags":[144,324,20,328,88,326,325,329,327,758],"class_list":["post-184","post","type-post","status-publish","format-standard","hentry","category-blog","tag-branding","tag-favicon","tag-firefox","tag-gif","tag-how-to","tag-icon","tag-information-scent","tag-internet-explorer","tag-png","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/posts\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":4,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/posts\/184\/revisions"}],"predecessor-version":[{"id":188,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/posts\/184\/revisions\/188"}],"wp:attachment":[{"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/media?parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/categories?post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jasonmorrison.net\/content\/wp-json\/wp\/v2\/tags?post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}