Favicons

How to design a favicon


Favicon design is more important than you might think. Size really does matter here as a well-designed logo needs to be recognisable at whatever size it’s seen at. It needs to scale from massive screens right down to an icon that can be as small as 16 x 16 pixels, known as a favicon. A great example of favicon design is the Google logo. It works perfectly for bigger screens with its big ‘G’ and distinctive four-colour text. And it’s still as recognisable when shrunk down to the tiny four-coloured ‘G’ seen in a web browsers address bar.

The favicon can also be seen as a shortcut icon, a tab icon or a bookmark icon, so it needs to look the part. To see favicon designs that work, see our roundup of logo design inspiration and check out this stunning collection of iOS app icons that get it just right.

In this article, we are going to run through the process of how to design the perfect favicon. We’ll include specific tips for creating a favicon for Apple devices, Android, Chrome, Opera and Safari. Plus a handy guide to the different favicon sizes and formats you need to know. Use the Quick Links (right) to jump straight to the section you want.

In the early days of the web, a favicon was simply a 16x16px icon file, but nowadays it’s a little more complicated. There are different favicon sizes and processes for different contexts. Creating a proper favicon is a science.

So, we are going to kick-off with some top tips for what your favicon should look like, and then move on to specific advice on how to create a favicon for different contexts. We’ll be using the template available on Apply Pixels to easily generate the different favicon sizes required, and the favicon from Apply Pixels as an example.

FAVICON DESIGN RULES

01. Make it recognisable

The first thing to consider when designing a favicon is what needs to be represented in the canvas. Remember that your favicon is only displayed to the user when they are alreadyon your website or have bookmarked it. So there’s no need to try and attract the user with your favicon.

Consider favicons as sober signposts that aid users in recognising your website when browsing their bookmarks lists and homescreens. Therefore, you want to use your logo, or whichever symbol most easily lets the user recognise your website. If you don’t have a logomark that fits the quadratic canvas, use the most recognisable part of your logo. 

03. Keep it clear

There are also a few things you should avoid. Don’t use the favicon as a marketing tool – that means no price tags, ‘new’ or ‘updated’ banners and so on. In fact, you don’t want to put text inside the favicon at all. Text doesn’t scale well, and the chances are it’s going to be illegible anyway. Finally, don’t use a photo – it will be muddy and unrecognisable at the size it’s going to appear at.

04. Create two versions

When favicons were first introduced in Internet Explorer 5, they appeared in the URL bar and in the bookmarks list. Today, favicons are displayed in a lot of other contexts, including bookmarks lists, shortcut menus and even mobile and TV homescreens. This makes it hard to predict how your favicon will be displayed to the end user.

To ensure your favicon looks good in the many different contexts it’s going to appear in, ideally you should provide two favicon styles:

Logo on transparent background
This version is shown in the URL bar, bookmarks lists and other places where the favicon appears next to your website URL or name.

Logo on solid fill
This version is used in grid-like bookmarks and shortcut menus where the browser or device masks the background, to achieve a uniform look in context.

FAVICON SIZE CHEATSHEET

Different contexts require different sized favicons. Below you can see a quick guide to the different formats and dimensions you’ll need to supply to cover all of the main use cases.

Previously favicons had to be provided in the ICO format. Today it’s okay to provide the files in PNG format (except for the Safari Pinned Tab icon which should be provided as SVG).

If you want an easy way to design and export all favicon sizes, take a look at the favicon template over at Apply Pixels.These are the most common favicon sizes (Image credit: emergeinteractive)

Now let’s take a closer look at  the specific requirements of different use cases.

DESKTOP BROWSER FAVICONS

How to create a desktop browser favicon

Let’s start with the most straightforward favicon you’ll need to create: a classic favicon for the classic desktop browsers. This type of favicon works best on transparent backgrounds, as it will often appear in the URL bar and in bookmarks lists.Advertisement

You’ll need to provide this type of favicon in three sizes, all in PNG format with a transparent background.

  • 16×16
  • 32×32
  • 48×48

APPLE

How to create Apple Touch favicons

Apple’s iOS uses Apple Touch Iconsto represent websites that have been saved to the iOS home screen as bookmarks. This means that the Apple Touch Icon will be rounded to the squircle mask of iOS app icons. 

It’ll also be displayed against whichever background the user has chosen for their homescreen. With this in mind, your Apple Touch Icon should have a solid fill background style. 

Apple favicons should be supplied in a PNG format. You can get away with providing a 180×180 Apple Touch Icon that will automatically scale for the various iPhone and iPad sizes. This will work fine in most cases. 

If not, you can provide additional sizes for the different Apple devices:

  • 60×60
  • 76×76
  • 120×120
  • 152×152
  • 180×180
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-
120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-
152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-
180x180.png">

ANDROID, CHROME AND OPERA

How to create a favicon for Android, Chrome and Opera

Android, Chrome and Opera use the android-chrome-192×192.png and android-chrome-512×512.png that Google recommends.

Since the introduction of adaptive icons in Android, websites added to the Android homescreen will mask the 192×192 design, so the icon takes shape after the user’s preferred masking style. This might be a squircle, ellipsis, rectangle, rounded rectangle or teardrop shape.

You need to create a PNG favicon with solid background, at 192×192 and 512×512. 

Implement these favicons by adding a manifest.json file to your site and linking to it within the tags:

<link rel="manifest" href="/manifest.json">

Here is the code for the manifest.json file:

{ "name": "", "short_name": "", "icons": [ { "src": "/android-chrome-

192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-
chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color":
"#ffffff", "background_color": "#ffffff", "display": "standalone" }

SAFARI

How to create a favicon for Safari’s pinned tab

This is the odd one out, and it is the only favicon that needs to be provided in vector format as an SVG file. It displays as the thumbnail icon when a user pins a tab to the Safari browser window. 

This favicon needs to be a 100% black SVG file with a transparent background. The SVG can only be one layer, and safari requires the viewBox attribute of the SVG to be set to “0 0 16 16″.

 <link rel="mask-icon" href="your_icon.svg">

Favicon Generator

Favicon.io