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

By developer March 10, 2022 Web Development & Management 0 Comments

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.

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

Dedicated Image (for Android, and iOS)

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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!

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

Source link