So, I'm not entirely sure when adding a favicon to your site was more than just adding\u00a0<link rel="shortcut icon" href="\/favicon.ico" type="image\/x-icon"> within the <head>, but boy have things changed! The hardest thing, even just a year ago, about loading\u00a0the icon was getting your tiny 16px X 16px image to look anything remotely like\u00a0your site's logo, or at least something that referenced your subject matter. And it wasn't always easy to get the .ico favicon format needed for your icon outside of online generators, unless you wanted to install 3rd party plugins into your art software. I recently uploaded a stack of files to a\u00a0new website, 29 of them in fact, all so that my site's icon logo will show up anywhere it needs to. Its no longer a simple concern of decorating a browser tab for when your website is open. We now need our favicon to proudly display our brand on phone browsers and tablets, both on iOS and Android platforms, and even\u00a0the Safari El Capitan browser uses a different image for pinned tabs as well. \u00a0Things got complicated in the favicon world, but luckily\u00a0there's\u00a0a site that could take a 400px X 400px png file and turn it into a rocking set of icons for all occasions, all in a matter of moments.\n\nHere's a quick little thing about web production: it changes so much, so quickly, its virtually improbable to know all the ins and outs of the process. Programmers and designers alike learn new things everyday just to keep up. I learned just yesterday that my schema tutorial is now woefully out of date, and can only wonder how long until my next tut will last before the next set of schema rules for SEO change again. So, I'm not sure when exactly the rules for favicons changed, but better late than never right?\n\nHere's what I learned about getting your favicon to work harder for you, and ultimately your brand. \u00a0When I first implemented the new code, it was more done on theory than anything else. I wasn't expecting these icons to do anything, but sit on my server, twiddling their virtual thumbs. And then something happened last night, that made me change my mind on the whole thing.\n\nLast night, I saw my ComicPool logo show up on my Android smartphone's Chrome browser.\n\n\n\nIt was the coolest thing ever for me to unexpectedly see last night, and I decided to upgrade\u00a0Geek with Style's favicon for the same results.\n\n[clickToTweet tweet="Not updating your favicon code is like willfully using the default egg in Twitter. Learn this quick fix!" quote="Not updating your favicon code is like willfully using the default egg in Twitter. Learn this quick fix!"]\nHow to Get and Install Favicon Easily\nSimply done, I found a fantastic\u00a0favicon creator online to do all the hard work for me, but I had to prepare my images first. Yep, I wound up needing two different images (by choice), and you'll see why soon!\nMaster Image\n\n\n \nDedicated Image (for Android, and iOS)\n\n\nMy work is done with Illustrator, but this is something you can do even with PicMonkey\u00a0for free if you don't have a desktop art app. If you want to see how easy it is to create one quickly, I have a PicMonkey for Favicon tutorial\u00a0at the end of this article.\n\nTo prep your image(s) for the favicon generator: It's not mandatory, but it turns out I like working with a 400px X 400px square image. Centre your image on the document, and be sure to select .png for the file format\u00a0with\u00a0transparency turned on if your image doesn't take up the full square.\n\nIn the meantime, if you want to test out the "Real Favicon Generator" right now, I have this test icon (made in seconds with PicMonkey) for you. Just save the image to your desktop and you're good to go.\n\n\n\nWith my images saved, and ready to go, I then went to the Real Favicon Generator, and let it do its thing. \u00a0Why is this one so much better than others? The creator(s) of this generator provide\u00a0options that you can utilize to get the best looking favicons for your website as is possible. You can even work with multiple images at the same time if one image doesn't fit for all occasions.\n\n\n\nFirst up is iOS selections. This generator is straight to the point, but be sure to look over\u00a0all options so that you get the best favicon images for your brand out there. \u00a0If you followed my lead by creating a transparent image, you can choose a solid colour if you don't want\u00a0iOS's default selection of a black background.\n\n\n\nAnd if your Master Image isn't exactly what you want for phone icons, you can click on the "Dedicated picture" tab and upload something else instead, which is exactly what I did.\n\n\n\nThe neat thing about the Favicon for Android generator is that you get to select an "App name", so there isn't any guessing involved. \u00a0I like my icon background transparent for this one, and selected to have the drop shadow as well.\n\n\n\nThe next set of options gives you better control over the bookmarked icon. Do you have a separate url for mobile users? You can apply it here instead of the main site; or even choose a landing page for mobile users if preferred.\n\n\n\nBoth Safari and Windows apps have their own icons, which you can fine tune for your brand's needs.\n\n \n\nOnce all the choices have been made, you're ready to generate your favicons, woot! Go through each tab, particularly the "Scaling Algorithm" so that you have all the options that are right for your needs. Also make sure you specify exactly where your icons are going, so that the generator can create code specificly for your site. It's so much easier that having to rewrite the code yourself.\n\n\n\nOnce you're done, you can download your Favicon package of images and copy the code that will go directly into the <head> of your site. \u00a0If you use Wordpress Genesis framework, simply copy and paste this code into the first box found in the Genesis Simple Hooks plugin.\n\nLookit at all these favicons!\n\nAnd that's it! With your favicons loaded to your site and the code placed in the <head> of your site's template\/theme, you're golden!\nCheck out how my favicons look on my Alcatel Idol smartphone! YAY!!\n\nAnd I now have a cute splash page that loads just before my site does in Android's Chrome browser when I click my site's icon from the homescreen.\n\nIs it necessary? No, but I like it anyway. :)\n\nAnd here's that favicon tutorial with PicMonkey as promised....\n\nQuick PicMonkey Favicon Tutorial\nTo get started with PicMonkey in creating a favicon, first roll over the "Design" tab, select "Custom" shape and type in "400" into each box for pixel size.\n\n\n\n \n\nMake sure you have a transparent canvas to begin with. When the PicMonkey editor first\u00a0launches, it will have "Canvas Color" open and ready for you to choose how you want your image canvas to\u00a0look. Simply click the "Transparent Canvas" box if you don't want a solid square box shape for your favicon.\n\n\n\n \n\nIf you already have image files that you'd like to use (such as part of your website logo for instance,) you can import them into PicMonkey using the "Your Own" button from the Overlays tab. \u00a0PicMonkey has a ton of beautiful objects to choose from though, so don't feel frustrated if you find yourself starting from scratch instead!\n\n\n\n \n\nOnce you're done creating your favicon image (the trick is to not make it too complicated to be honest,) click the "Save" button from the top menu, and save your file with the .png format. Go ahead and use "Sean" setting to save your image under the highest quality, as the file will be reduced through the Real Favicon Generator anyway.\n\n \n\nAnd that's it! Are you ready to get started with Favicons now??