Learn [HOW TO] Add a Favicon to Your Website Today [GIFS]

Learn How to Add a Favicon To Your Website - Step by Step Instructions with GIFs (small)

You know that little icon that shows up in a browser tab for websites?

01 - What is a favicon in a browser tab

That one above. That’s called a favicon. But, the terminology really doesn’t matter. You want your logo to appear there and want to know how to do that.

That’s exactly what I’ll show you how to do.

First, check if you have an existing icon (Psst! It’s obvious if you don’t see an icon like above), you can check on RealFaviconGenerator.net

Go there and type in the URL to your website like so:

Real Favicon Generator - Check Your Favicon

After a few seconds, you’ll have your results.

If already have your favicons setup, on the next screen you should see only green bars for each test:

Real Favicon Generator - Check Your Favicon Test Results

If you do not, you need to generate new favicons because some browsers and operating systems cannot see them.

Let’s Get Going!

I’m going to walk you through how we created a favicon for one of our web design customers, ReminderGift.

Not everyone has experience with Photoshop, so we’re going to use a free online tool. No need to install any software. If you have the internet you’re good to go!

First, let’s get your logo mark that you want to use.

The file can end in a .png or .jpg.

We took ReminderGift’s logo and removed the words from it, leaving us with only the elephant.

Reminder Gift Logo - Remove Tagline

Go to Pixlr.com/editor

Basically, this is an online version of Photoshop and it’s very handy.

Click “Open Image From Computer

02 - Pixlr Editor

Find the logo image you want to edit and click “Open“.

You’ll now see your logo open in Pixlr:

03 - Pixlr Editing Logo

I should note here, for the best results, our final logo needs to be 260px wide by 260px tall and no smaller. It can be larger than that, just not smaller.

How do you find the size of your image? Easy:

At the bottom of the image is the size of the image itself.

Pixlr - Photo Size

As you can see, we’re working with an image that is 1014px wide by 1091px tall. Well above the 260px by 260px final image we’ll need. With that, let’s move on!

Now, we need to do a few things: (1) Remove anything unnecessary in the logo (like words, remember, this is going to be tiny, any words will be unrecognizable) (2) crop the image to a perfect square (proportional height and width).

Let’s get started on those two items.

For erasing, click the Eraser button and erase what’s not needed:

04 - Pixlr Eraser Tool

By default, the brush may be small so as you can see in the video below, I made the brush larger and erased everything I did not need.

Erasing in Pixlr

Now that we have our mark ready, let’s crop the image to a proportional square.

Pick the crop tool:

05 - Pixlr Cropping Tool

Now, select Aspect Ratio under “Constraint” (located at the top-left of the screen) and make sure Width and Height are both set to 1.0. Then drag a square (don’t worry it’ll be proportional!) and have the square close to the edge of your logo and when ready, double-click and viola!

Here’s exactly how to do that:

06 - Cropping in Pixlr

Now, it’s time to save it.

Click “File” then “Save”.

Now, make sure “Format” is set to PNG (Transparent, full quality)

Then, click OK.

Pick out a location on your computer to save it and click Save.

Whew! Now, we’re really moving!

The next step is creating the favicon to use on our website. Refill your coffee and come back. Ten more minutes after this and we’ll be done!

Generating the Favicon

There are many tools online, but by far and away the best I’ve found is RealFaviconGenerator.net

Go ahead and go to RealFaviconGenerator.net

Click the “Select your Favicon picture” button and find the square logo we created previously in Pixlr.

Real Favicon Generator - Select your favicon picture

The program will take a few seconds and will present a new screen with a lot of options. Don’t worry, we’re going to keep this nice and simple and ignore most of those settings. You can deviate from the path we take, but do so at your own peril!

Favicon for iOS – Web Clip

Typically, adding a solid, plain background and adjusting the margin works great:

Favicon Generator -iOS

Favicon for Android Chrome

There are quite a few more settings for Android, but again, let’s keep things simple. Adjust to your eye:

Favicon Generator -Android

As you can see, I tried adding a background but opted to go without since I think it looks better and more in line with the look of Android.

Windows Metro

Windows is easy, too. Click the color code, and then click the color from your logo and then select white silhouette. This logo fits right in on Windows!

Favicon Generator - Windows Metro

Safari Pinned Tab

For Safari, copy and paste the color code we selected above (in our example, that’s #fbb03b) and paste in “Theme Color.”

Favicon Generator - Safari

Favicon Generator Options

Leave these settings alone.

You’ll notice, we’re going to place the favicon files at the root of our website. I’ll explain what this means, don’t fret!

Favicon Generator Options - Root of Website

Now, click the “Generator your Favicons and HTML Code” button at the bottom.

Generator your Favicons and HTML code

We’re just about there!

Install Your Favicon

Don’t let this screen intimidate you, it’s easy.

Two important items on this page (1) Favicon package button (2) Code:

Real Favicon Generator Install Favicons

Let’s go ahead and click the “Favicon package” button This will download a .zip file on our computer.

Open the .zip file and drag the contents to the folder on your computer.

All Favicons

These are all of our favicons!

The next step is a bit tricky depending on your comfort level with uploading files to a server. But, I’m guessing you’ll be able to figure this out and walk through the steps below.

You can connect to your server using a program like FileZilla (Client) or through a web interface through your host like File Manager in cPanel.

For the sake of time, and ease of use, we’re going to use File Manager in cPanel.

Log in to your hosting account and you should see a File Manager icon.

cPanel - File Manager

If you’re able to access this, you’re golden.

Click the File Manager icon and a popup will appear.

Select “Web Root if it isn’t already selected.

cPanel - File Manager - Web Root

On the next screen, click “Upload.”

This will open a new tab. Now we need to individually upload each of the files we exported from our .zip file earlier.

Click “Choose File,” select the first file and it will automatically upload. Repeat until you’ve uploaded all of the files.

cPanel - File Manager - Upload Files

The final step is adding the code that RealFaviconGenerator gave us earlier.

Depending on how your website is setup, this can be a complex because there are a lot of places this can possibly go. We need it to be inserted into our “header” file which is repeated on every page so that each page displays a favicon.

In WordPress, this file is located in your theme folder.

For example: public_html/wp-content/themes/[your-active-theme-name]/header.php

*Make sure you always have a backup of your website before proceeding. Once you edit any file on your server, there’s no magic undo button, unless you have a backup service with a company like us.

If you feel comfortable, find your header file and then click the “Edit” button.

cPanel - File Manager - Editing Header

Insert the code between the <head> and </head> tags, like so:

cPanel - File Manager - Editor - Insert Favicon Code

Now, click “Save at the top-right corner and…

Save

DONE!

If you want to test out that everything is working correctly, retake the test we did earlier at RealFaviconGenerator.net/favicon_checker

All green!

Comments, Questions, Life Raft?!

Now, that took a lot of time and energy on your part. Pat yourself on the back if you were able to follow everything laid out above.

If you ran into any problems and can’t figure it out on your own (or just don’t want to break anything!), you can always hire us to complete it for you. We’ll not only create a nice favicon, we’ll take care of every step you read above. It doesn’t get much simpler than that!

Give us a call (360) 450-3711 (or email) and we’ll create and setup a favicon for your website!

Last updated on September 05, 2016. Shawn is the President of Graticle, Inc. You can follow him at Google+

Tags: , ,

Want a Quote on Your Project? Answer a Few Questions »

Shawn is a complete package. He’s creative, fast and prolific. Just as important, he has r-a-n-g-e. I’ve worked with him on a variety of projects, digital and traditional, corporate and retail–he always understands what the assignment demands. Shawn was on my shortlist of designers three hours into our first gig together. Highly recommended.

Dave Greeley

Writer

Concord, Maine

Shawn was very professional. He made the whole transaction very easy and completely online. I was very happy with the work.

Aaron Barr

Barr Corp, LLC.

Camas, WA