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.
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.
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, 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.
The Apply Pixels logo which is used as an example favicon in this article.
1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
Classic style favicons displayed in the bookmarks bar and URL bar in Google Chrome.
You'll need to provide this type of favicon in three sizes, all in PNG format with a transparent background:
- 16x16
- 32x32
- 48x48
Implement this favicon in the <head> HTML, as shown:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
6. Create an Apple Touch Icon
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.
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.
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 (Required)
Implement this favicon in the <head> HTML, as shown:
<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">
7. Windows 8 Tiles and the browserconfiguration.xml file
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.
Here's what that the Apply Pixels favicon would like as Windows 8 Tiles:
The 558x270 Windows Tile is the only favicon that is not quadratic.
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 .
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 <meta> HTML tags and the browserconfig.xml that you need to provide:
Windows 8.0
<meta name="msapplication-TileColor" content="#2b5797"></meta>
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Windows 8.1
Include a browserconfiguration.xml in your site's root directory:
<?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: 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.
8. 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.
In this case, the Solid Fill favicon is masked in Android Pie's squircle shape. Other shapes include an ellipsis, rectangle, rounded rectangle and teardrop shape.
You need to create a PNG favicon with solid background, in the following sizes:
- 192x192
- 512x512
Implement these favicons by adding a site.webmanifest file to your site and link to it within the <head> tags:
<link rel="manifest" href="/site.webmanifest">
Below is the code for the site.webmanifest 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"
}
9. 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.
Unlike all other favicons, this icon is generated from an SVG image.
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".
Implement this favicon in the <head> HTML, as shown:
<link rel="mask-icon" href="your_icon.svg">
10. What about Google TV, Chrome Web Store and pre–iOS 7 Apple Touch Icons?
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 %.
Cheat Sheet
So, if you want to support a complete set of devices and browsers, these are the sizes you need to supply. Previously favicons had to be provided in the ICO format. Today it's ok 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 our favicon template.
| Dimensions | Background | Format |
|---|---|---|
| Classic Desktop Browsers | ||
| 16x16 | Transparent | PNG |
| 32x32 | Transparent | PNG |
| 48x48 | Transparent | PNG |
| Apple iOS | ||
| 180x180 | Solid Fill | PNG |
| Windows 8.0 | ||
| 144x144 | Transparent | PNG |
| Windows 8.1 | ||
| 128x128 | Transparent | PNG |
| 270x270 | Transparent | PNG |
| 558x270 | Transparent | PNG |
| 558x558 | Transparent | PNG |
| Google Android and Chrome | ||
| 192x192 | Solid Fill | PNG |
| 512x512 | Solid Fill | PNG |
| Opera Coast | ||
| 228x228 | Solid Fill | PNG |
| Safari Pinned Tab | ||
| Vector | Transparent | SVG |
