Unless you’re a designer, you may not consciously notice a website’s “favicon” – the little tiny rendition of a company’s logo that sits next to the title of a web page in the tabbed section of your browser. Let’s change that!
The “favicon” is a very small but important part of company branding. Nowadays, a logo / corporate ID design project should encompass not only color and grayscale versions of a company’s logo, but also the “favicon.” That little image reinforces your company’s branding. It also plays a role in helping your audience find your website more quickly when they have a number of tabs open.
When I started creating the “Friday Goody Bag” website, the top of the site’s browser bar looked like this:
That little symbol, meant to be a black-and-white rendition of our globe, says: “This web page doesn’t have its own identity!” There are a few distinct problems involved in creating and deploying a “favicon”:
- Having a square version of your company’s logo.
- Getting the image file into the right format. To display an icon in your browser tab bar, you need to have a square image (it can be 16×16 pixels or up to 512×512 pixels) know it’s unbelievable, but Photoshop doesn’t export files in “.ico” format. (The W3C says it’s okay to have files in .png format, but I’ve never gotten this to work. I’m willing to be proved wrong). There are a number of free software programs that convert an image into .ico format, but you’ll have to download and install a program from a developer you might not know.
- Actually adding the favicon to your website. This depends on having access to whatever content management system you use and being able to upload the favicon to the right place.
This article provides an in-depth look at how to create a favicon. If you’re a non-designer and just want to get a favicon quickly, email me.
Here’s how to make and deploy a “favicon” without downloading sketchy software!
Getting your company’s logo into the right size and shape
If your logo is already square or near square, you may already be well on your way. My personal logo is an “n” in a circle, and “Friday Goody Bag” doesn’t really have a logo, so I created an icon of a bag using the colors from the site’s main photo. If your logo doesn’t easily fit into a square, you might need to use some design chops. Look at Target’s website and then compare it to Amazon’s. The creators of the Amazon website had to come up with an alternate version of the company logo that worked well in a square format. My favorite so far is Coca Cola – their site uses a bottle in the company’s trademark red, rather than trying to create a square version of the logo.
Once you’ve created your square logo, use any image editor to get it to the size of 256 pixels by 256 pixels. Save it in .png format with a transparent background.
Converting your logo into “.ico” format
There are several .ico generators online, but many of them are advertising-ridden and/or want you to download and install software – something that you probably can’t even do if you work in a large company and your IT department is on the ball. (And shouldn’t do if you work on your own and have no IT department.)
Here are two of my favorite sites where you can upload your own graphic and download it into an .ico file without too many popups or fuss:
- https://favicon.io/favicon-converter/ – This site converts your graphic into many different sizes of .ico and provides you with complete instructions on deploying the files to your website.
- https://convertico.com/ – A more basic website that simply creates an .ico file from a .png file and lets you download it.
Adding the favicon to your website – Dreamweaver or HTML
If you use Dreamweaver or some other HTML editing tool, you’ll need to upload the .ico file to your website, and then reference it in the HTML code of every page where you want the favicon to show.
Most people put website images into a directory called “images,” so for this example we’ll assume that your favicon is named “favicon.ico” and it’s in the “images” directory of your site.
Then, between the <HEAD> and </HEAD> tags, type the following code:
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
(Change the directory location and file name of your .ico file to suit your situation).
Finally, don’t forget to upload both the changed file and the .ico file to your website.
Adding the .ico file to your website – WordPress
The instructions for WordPress may vary depending on what theme your site uses, but generally you’ll need to follow three steps:
- On the left-hand side menu, choose “Appearance.” From the fly-out menu that appears, choose “Customize.”
- In “Customize,” select “Site Identity.”
- At the bottom of “Site Identity,” there’s a section called “Site Icon.” Push that button, and navigate to your .ico file to upload it to the server.
Once you’ve uploaded the .ico file to WordPress as your “Site Icon,” you won’t have to add it to every page – WordPress will take care of that for you. (On the other hand, you’re stuck with it – so if you’re a Lord of the Rings fan who wanted to use a hobbit icon on Bilbo’s page and an elf icon on Galadriel’s page, you’re out of luck.)
Now the top of your website should look a little more like this! Congratulations and welcome to the “cool kids” section of the Web.
If you can’t or don’t want to do all this…
Contact me for help!