Welcome to your ultimate guide to favicon design. In this article, we'll run through exactly how to create a perfect favicon, with specific tips for creating a favicon for Apple Touch, Windows 8, Android, Chrome, Opera and Safari – including a handy guide to the different favicon sizes and formats you need to know. You can use the boxout opposite to jump to the section you want.
Favicon design: Quick links
So first up, what is a favicon? Short for favourite icon, favicons are small symbols that appear in the URL bar and bookmarks list. Today, favicons extend the brand of a website beyond the browser canvas in many more different contexts, but we'll get on to that later.
- Looking for a different kind of icon? See our guide to the best free icon sets
In the old days of the early web, creating a favicon involved linking a 16x16px icon file and that was that. Nowadays, it's a little more complicated – there are different favicon sizes and processes for different contexts. Creating a proper favicon is a science.
In this article will show you exactly how to design a favicon. We'll start with some top tips for what your favicon should look like (for more inspiration, explore our roundup of the best iPhone app icons), 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.
- Get 25% off tickets to Generate CSS with the code CSS25 – find out more here
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 already on your website or have bookmarked it. So there's no need to try and attract the user with your favicon.
02. Use your logo
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 let's 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
As mentioned before, 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.
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.
You'll need to provide this type of favicon in three sizes, all in PNG format with a transparent background.
- 16x16
- 32x32
- 48x48
Apple
How to create Apple Touch favicons
Apple's iOS uses Apple Touch Icons to 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 180x180 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:
- 60x60
- 76x76
- 120x120
- 152x152
- 180x180
<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">Windows 8
How to design Windows 8 Tiles
Although Windows 8 is no longer supported by Microsoft, there are still a lot of users with tablets running this OS. Depending on your user base, you might want to create a favicon for this platform as well.
Windows 8 uses Tiles to represent websites in the UI. There are five sizes to support in total, one size for Windows 8.0 and four sizes for Windows 8.1.
The Windows 8 Tiles are made up of two components:
- Foreground: Your favicon image with a transparent background
- Background: The tile background generated by Windows 8
All Windows tiles should be in PNG format with a transparent background. These are the sizes you need to use.
For Windows 8:
- 144x144
And for Windows 8.1:
- 128x128
- 270x270
- 558x270
- 558x558
The background colour is specified in the tags and the browserconfiguration.xml that you need to provide:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>Note that the specified favicon dimensions in the browserconfiguration.xml do not match the sizes specified above. That's because, for scaling purposes, Microsoft recommends providing images that are larger than the standard tile dimensions.
Android, Chrome and Opera
How to create a favicon for Android, Chrome and Opera
Android, Chrome and Opera use the android-chrome-192x192.png and android-chrome-512x512.png that Google recommends.
Since the introduction of adaptive icons in Android, websites added to the Android homescreen will mask the 192x192 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 192x192 and 512x512.
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">Other favicon types
What about Google TV, Chrome Web Store and pre-iOS 7 Apple Touch Icons? There are some favicon dimensions and formats that were not included in this article, either because they are practically deprecated or because they are rarely relevant for the average web developer. In general, developers and designers should strive to support as broad a variety of devices and operating systems as possible, but sometimes it just does not make sense.
For example: Google TV was replaced by Android TV in 2014, and the SDK was discontinued, Chrome Web Store is probably only relevant if you're building a Chrome app, extension or theme, and the percentage of iOS devices not running iOS 7 or later is now less than ~1 %.
If you want an easy way to design and export all favicon sizes, take a look at the favicon template over at Apply Pixels.
Read more:
