It’s all in the details. One of the easiest and most overlooked opportunities for design is in the little icon known as a favicon - the image that appears next to the URL in your browser tab. Think you don’t know it? You do! These guys:

Not only is this a fun detail not to be overlooked, but failing to include a favicon means you end up with a default. Which is just not as much fun. Who wants a blank page? Or you give the game away and display to favicon of your website builder – squarespace displays a black box and wordpress will give you their logo. Wanna fake that completely custom coded-it-myself look? Get yourself a favicon!

Favicon’s also serve an important purpose… it’s the age of multitasking and so we all know there are a billion tabs open at once. And when all those tabs are open? The title is hidden and people rely on favicons to stand out!

But don’t worry – I’ll break down a code and photoshop free way to make and upload one right now!

Favicons are small square icons. Most browsers accept a .png format (this is like a jpg but also allows for transparency and is what you create if you cmnd+shift+4 screenshot) but ALL browsers accept the favicon format .ico – so that is what we will make!

The Design

Favicons are really really small – so bold designs are best! Although you may want to put a tiny little headshot up there … it will just look like a colorful-ish blob. Any you are much nicer looking than that. Save that image for a bigger venue.

Instead think bold simple graphics.

A favicon could be a square image. However, it has to be very striking to stand out in a small space. Just a square in the primary color of your site could be an exciting option. To get that look – just use a screen shot tool to select the square you would like to use. Here's one from my site:

Another bold option (and great for artist portfolios!) is a simple text logo – like perhaps of your initials? And you do not need photoshop to make it. Simply play with exciting fonts and colors on your word processor and screen shot the result. Then upload your image to http://www150.lunapic.com/editor/?action=transparent
And click on the white space to create a transparent background png. Save!

This is also a fantastic way to edit a logo with a background. Logos look great with transparent backgrounds as a favicon. This is a super professional and easy no-photoshop-necessary option.

If you are looking to use a photo but want something a little more crisp and catching than just a square try editing it using http://www.picmonkey.com/#go/frames
-just “open” your photo (and if you are prompted choose the “jack” setting)
-choose shape cutouts from the left hand bar
-edit and save your perfect circular png!

The Conversion

One last step. While you can use a png as a favicon, converting to a .ico file is the best practice.
Just upload your png to
http://tools.dynamicdrive.com/favicon/
and download your converted file!

The Upload

For squarespace:

In the left hand navigation choose:
Design >> Logo and Title

Scroll down and upload your .ico in the browser icon (favicon) field

For Wordpress (4.2 and later):

In the admin panel choose:
Appearance >> Customize >> site identity

Then upload the file in the “site icon” section

For Wix:

Go to site settings >> Domain & Hosting
Choose to upload your favicon!

(For wix, it is best to use the .png format instead of the .ico format)

You did it! now pop some bubbly and celebrate!

Note – if your website is cached it may take a few days before you can see your own favicon! If you want to check it out earlier one of your best tools is an incognito window.

design root studio . blog

Favicons - the littlest icon to love