How to Create and Install a Website Favicon

What the heck is a favicon and how do I get one?

They are there every time you get online and visit your favorite websites, but you may have never even noticed them. Favicons, or favorite icons, are those small icons that, depending on your browser, may appear next to a website’s name or URL in the browser’s address bar, tab and/or bookmarks bar. They are usually logos or some other graphical representation of the company or organization.

Ours is a red “e.”

Because I’m using Google Chrome, the icons appear both in the browser tab and the bookmark bar.

Why are favicons important?

You probably won’t include them in your business plan or hear about them at a networking event (unless you have the good fortune to be talking to me; sorry in advance), but favicons are an important part of your website.

These tiny icons, usually only 16 pixels by 16 pixels, provide another branding opportunity for your company by allowing your logo or icon to be visible when users have your website open, even when they are working in a different tab. Like typography and color choices, choosing and placing a favicon on your website should be a part of y our online branding strategy.

If you’re anything like me, you never have just one browser tab open. On any given workday, I have an average of 10 tabs open as I work on different projects or look for solutions online. Favicons help improve user experience by identifying your website’s tab among a sea of others. Any strategy that gives website users a positive experience with your company is a good one.

Creating a Favicon

There are two routes for creating a favicon for your website: you can use a generator, or you can use photo-editing software.

There are dozens of generators available online. Experiment to find the one with the requirements and results that work for you.

I use Adobe Photoshop to create favicons, but almost any paid or free photo-editing program will work.

The first decision you need to make is what your icon is going to be. Because you have only a small space to work with, using your entire logo or company name might not be a good option. If we were to use our entire logo, it would be unreadable and therefore useless. We decided to go with the red “e” because it’s a recognizable and simple part of our logo.

First, I opened our logo in Photoshop and cropped it to only include the part I wanted for ours. Use a logo or graphic with a transparent background for best results. (WordPress Users: Although your favicon will only end up being 16 pixels by 16 pixels, WordPress suggests a finished size of 512 pixels by 512 pixels, so start with a large graphic.)

You will need a square image for your favicon. Center your icon on the canvas and then adjust your canvas as necessary.

My icon was too tall, so I decreased the height of my canvas to 1070 pixels using the canvas size option. Note that you may need to add or subtract from the width or height to avoid clipping part of your icon.

Now that your favicon is square, you’ll need to resize it. If you’re a WordPress user, adjust your image size to 512 pixels by 512 pixels and save is as a PNG. If you’re going to add the favicon into the code of your website, resize the image to 16 pixels by 16 pixels and save it as favicon.ico.

Adding a Favicon to a WordPress Website

WordPress has made it very easy to add a favicon to your website. First, login to yourWordPress Admin panel. Under the Appearance menu item, select Customize.

Once the page reloads with the customization window, select the Site Identity option. You’ll see options for a Site Title, Tagline and Site Icon. Click the Select File button.

Upload your favicon to your Media Library via the Upload File tab, click on your favicon and hit the select button.

Once you’re satisfied, save and publish your changes by hitting the button at the top of the page.

 Adding a Favicon with Code

If you’re not using WordPress for your website, don’t worry. You can also add favicons into your website code. You’ll need access to your website’s <head> section via a CMS or FTP client.

Upload your favicon to your server and make note of its location URL. For example: http://www.mywebsite.com/images/favicon.ico

Add the following code within your <head> tags, right above or below your <title> tag, replacing the href attribute with your favicon’s location URL:

<link rel=”shortcut icon” type=”image/x-icon” href=”http://www.mywebsite.com/images/favicon.ico” />

Save your changes and open your website to see your new favicon!