How to Get Your Site's Logo on Absolutely Everything with New Favicon Code

Aeryn Lynne
Improve Brand with Favicons - a webdev tutorial

So, I'm not entirely sure when adding a favicon to your site was more than just adding <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 the icon was getting your tiny 16px X 16px image to look anything remotely like your 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 new 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 the Safari El Capitan browser uses a different image for pinned tabs as well.  Things got complicated in the favicon world, but luckily there's a 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.

Here'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?

Here's what I learned about getting your favicon to work harder for you, and ultimately your brand.  When 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.

Last night, I saw my ComicPool logo show up on my Android smartphone's Chrome browser.

Favicon for Everything: Chrome Android Browser with new icon set.

It was the coolest thing ever for me to unexpectedly see last night, and I decided to upgrade Geek with Style's favicon for the same results.

[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!"]

How to Get and Install Favicon Easily

Simply done, I found a fantastic favicon 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!

Master Image

Favicon Master Image

 

Dedicated Image (for Android, and iOS)

Save your logo file as a 400px x 400px square png file, using transparency for your favicon.

My work is done with Illustrator, but this is something you can do even with PicMonkey for 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 at the end of this article.

To 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 with transparency turned on if your image doesn't take up the full square.

In 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.

Test image to try with Real Favicon Generator

With my images saved, and ready to go, I then went to the Real Favicon Generator, and let it do its thing.  Why is this one so much better than others? The creator(s) of this generator provide options 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.

Use Real Favicon Generator

First up is iOS selections. This generator is straight to the point, but be sure to look over all options so that you get the best favicon images for your brand out there.  If you followed my lead by creating a transparent image, you can choose a solid colour if you don't want iOS's default selection of a black background.

iOS Favicon Generator

And 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.

Using a Dedicated Image for iOS, Android and Windows

The neat thing about the Favicon for Android generator is that you get to select an "App name", so there isn't any guessing involved.  I like my icon background transparent for this one, and selected to have the drop shadow as well.

Android Chrome Favicon Generator

The 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.

Favicon-Android-Options-Switcher

Both Safari and Windows apps have their own icons, which you can fine tune for your brand's needs.

Safari El Capitan Pinned Browser Tab Favicon Windows 8 & 10 Favicon Design

Once 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.

Final steps to create favicon

Once 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.  If you use WordPress Genesis framework, simply copy and paste this code into the first box found in the Genesis Simple Hooks plugin.
Easy Install Instructions for Favicons

Lookit at all these favicons!
All the Favicons Generated Quickly

And 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!

Check out how my favicons look on my Alcatel Idol smartphone! YAY!!

My smartphone home screen, woot.

And 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.

Loading Geek with Style with Favicon on Android Chrome Splash Page

Is it necessary? No, but I like it anyway. 🙂

Loading ComicPool with Favicon on Android Chrome Splash Page

And here's that favicon tutorial with PicMonkey as promised....

Quick PicMonkey Favicon Tutorial

To 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.

Getting Started with PicMonkey to Create Favicon

 

Make sure you have a transparent canvas to begin with. When the PicMonkey editor first launches, it will have "Canvas Color" open and ready for you to choose how you want your image canvas to look. Simply click the "Transparent Canvas" box if you don't want a solid square box shape for your favicon.

When creating a favicon with PicMonkey, be sure to have "Transparent Canvas" checked.

 

If 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.  PicMonkey has a ton of beautiful objects to choose from though, so don't feel frustrated if you find yourself starting from scratch instead!

Can Import Your Own Image Files if needed to create a favicon with PicMonkey

 

Once 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.

 

And that's it! Are you ready to get started with Favicons now??

Like it? Share it!

Aeryn Lynne

The Geek at Geek Life
Living in Superman's Metropolis (aka Toronto, Canada), Aeryn Lynne found a way to entirely over-share everything she loves, and make a career out of it! Ultimately a geek, she waxes poetically over technology, fights for fashion-equality, squees over comic art, and literally sparkles, thanks to her makeup addiction.
Aeryn Lynne

Leave a comment

11 Comments

  1. Jaime January 11, 2016
  2. Heather Johnson January 11, 2016
  3. Chelley @ A is For Adelaide January 11, 2016
  4. OurFamilyWorld January 11, 2016
  5. Brianna January 12, 2016
  6. Becki S January 12, 2016
  7. Julie @ Running in a Skirt January 12, 2016
  8. Nicole January 14, 2016
  9. James April 7, 2016

Leave a Reply

Geek Things to Do in Toronto

Check out all the geek fun to be had when you're traveling in Toronto, Ontario, including Hotels, Restaurants, Shops, Games and more!
Time to Get Nerdy!
shares