The Easy Way To Create a Favicon From Your Logo

by Jun 15, 2015Web design

First Off, What Is a Favicon?

A Favicon is the icon that shows up in the browser tab when you visit a site. It is an important little icon that people like to see when they visit your site. It’s useful for a number of reasons. The main one is for when people have multiple browser tabs open, it makes it easier to find your site’s tab again when they want to come back to it. I’ll show you the quick and easy way to create a favicon from your logo.

create a favicon

First, you’ll need a logo file. If you’re not a designer, you may want to ask your designer to create your logo in a square format. This works best, because that is the format of the favicon, and you won’t have to deal with issues in terms of stretching and distortion. The shot above is the text for the logo, but the image below is a more symbolic version I created for square applications.

Screen Shot 2015-06-14 at 7.15.09 PM

Next, you’ll want to consider the file format you’ll be using. If you want a favicon with transparency, you’ll want a PNG file with a transparent background. If not, and you just want a white or a flat background, a jpg will be fine.

create a favicon

Then, go and there will be an option to import your logo. Keep the logo in the square proportions you set it up with to begin with. Then, import your logo. It will have a blocky, pixel by pixel preview, where you can paint in pixels, or leave it as is. Below that, you’ll see a real size preview, which makes it easier to judge whether your favicon looks good, and is legible or not.

You want to make sure that your logo is still recognizable at the small favicon logo size. If not, you may need your designer to tweak your logo. This can be tough, especially when your logo has special lettering or characters in it.

Once you are happy with the preview, you can download the favicon, which will have an extension of .ico at the end. You can bring this into your website in the html, or you can upload it to your site if you’re using WordPress.


That’s all it takes to create a favicon from your logo. in a matter of just a couple of minutes, you imported your logo and brought it into your site. Small touches likes these add to the professional presentation of your website. These extra details make your website more enjoyable and easy to use.
If you want a professional website, complete with these added touches call G Squared Studios at (865)951-3077 to get started.