Favicon

A favicon is a small 16×16 pixel icon that appears at the top of a web browser. It serves as branding for your website and a convenient way for visitors to locate your page when they have multiple tabs open. Because of their tiny size, favicons work best as simple images or one-to-three characters of text.

what is a favicon

Example of favicons on a desktop browser.

To get a favicon for your website, you could hire a freelance designer to create one based on your logo and brand colors, or (I would highly recommend) create the favicon yourself.

Favicon Sizes and Formats

16×16 pixels is the standard size used by desktop website browsers. However, many website builders will ask for larger sizes. For example, WordPress requires 512×512 pixels and Squarespace asks for 300×300 pixels.

This is because favicons are not only used in browser bars. They are also displayed when a user bookmarks a site or saves a shortcut to their desktop or mobile home screen. In these cases, the size of the icon grows much larger.

what is a favicon

Example of favicons on a smartphone home screen. These icons are significantly larger than the desktop favicons pictured further above.

To be safe, try to upload whatever image size is requested by your website builder. Again, for WordPress, this is 512×512 pixels. WordPress will automatically resize and display the proper image for each scenario, so you don’t have to worry about resizing them yourself.

The standard file format for favicons is .ico but most website platforms will also accept .png files.

How to Make a Favicon

The majority of websites I create is via WordPress (site icon), so I simply need to create a 512px x 512px (icon) png. I personally prefer using photoshop to create favicons, but other visual/photo editors should work even Microsoft Paint. Even if you have limited graphic design experience you should not be overwhelmed by any means by this “project”.

If you don’t have the latest version of Photoshop, here’s the official Adobe link:

Free Trial or Buy Photoshop at Adobe.com

1. Create a blank 512px x 512px canvas (working area).

2. Create a basic icon via combining basic geometric shapes with a shape tool or even simply large letters with a text tool.

What is a favicon and how do you make a favicon?
What is a favicon and how do you make a favicon?

Optional: I personally prefer a favicon w/o a background, so if using photoshop unlock the background layer and delete it which will create a transparent background.

3. Save the image as a 512px x 512px png file.

Congrats you’ve now created a favicon! It’s that easy!

Now you can share this knowledge/skill to anyone else asking “What is a Favicon?… How Do You Make a Favicon?”