853

I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.

Is this possible? Would an iPad-friendly 72×72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16×16 or 32×32 image?

1
  • 1
    given that the answer to this question can evolve, consider consulting a frequently updated repository that provides the latest information on the topic. Even better: submit pull requests as you come across new information. Here's a search of GitHub with some great candidates: github.com/…
    – Kay V
    Commented Jun 6, 2021 at 19:29

22 Answers 22

1636

Update for 2020: Sticking to the original question of 16x16 versus 32x32 icons: the current recommendation should be to provide a 32x32 icon, skipping 16x16 entirely. All current browsers and devices support 32x32 icons. The icon will routinely be upscaled to as much as 192x192 depending on the environment (assuming there are no larger sizes available or the system didn't recognize them). Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.


For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.

For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.

Android Chrome primarily uses a manifest and also relies on the Apple touch icon.

IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.

Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.

Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.

Look at this favicon pictures list for a complete reference.

TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.

4
  • 39
    Too many standards for something as simple as favicon. The generator is great though. Commented Jul 30, 2020 at 8:10
  • 3
    Changing +1 to -1 for the 2020 edit. Absolutely not OK to ship only a 32x32 if you want a sharp icon at literally any other size. Scaling up, or down, at those image sizes, produces incredibly mediocre results. Considering 16x16 is how it will be displayed on most desktops, this is a vital resolution. 20/24px too if you want to catch some other popular DPI's.
    – caesay
    Commented Nov 3, 2021 at 19:18
  • 2
    @DanielDanielecki we could just start SVG, but Apple(not just with Safari) is still not catching up with technology progress :/ caniuse.com/link-icon-svg
    – jave.web
    Commented Mar 5, 2022 at 11:27
  • 1
    It would be helpful if realfavicongenerator.net would allow to select a square part of an uploaded image that isn't square shaped.
    – mathlete
    Commented Oct 11, 2022 at 3:47
626

Short answer

The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.

To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

Long, comprehensive answer

Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.

The favicon is supported by several files:

  • A favicon.ico icon.
  • Some other PNG icons.

In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.

favicon.ico

Although all desktop browsers can deal with this icon, it is primarily for older version of IE.

The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.

An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

Declare the favicon with:

<link rel="icon" href="/path/to/icons/favicon.ico">

However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.

PNG icons

Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

What are the recommended sizes? Pick your favorite platforms:

The PNG icons are declared with:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Beware: Firefox does not support the sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need. edit: fixed in 2016.

Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons. edit: fixed in 2018.

Mobile platforms

This question is about desktop favicon so there is no need to delve too much in this topic.

Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).

Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.

Microsoft defines the tile picture and the browserconfig.xml file.

Conclusion

Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

15
  • 14
    Pedantry from an XSLT user: please close your tags :) <link /> Commented Aug 5, 2014 at 9:48
  • 10
    @NathanHornby So you're in the "self-closed markups" thing? :) Seriously, self-closed tags are for XHTML (and XSLT, so you're right to complain) but all other versions (like HTML5) prevent them. More here: github.com/RealFaviconGenerator/realfavicongenerator/issues/62
    – philippe_b
    Commented Aug 5, 2014 at 10:43
  • 8
    Well I agree with the others :) It's valid and semantic to close a tag properly, whether it's required or not. If adding a slash increases compatibility with no drawbacks, then I see no reason to omit it, it's just good coding practice, like adding </div> and </form>, even though modern browsers often don't require it ;) Commented Aug 5, 2014 at 17:23
  • 2
    Thanks @Sebastian! As I could observed several times, FF picks the icon (almost) randomly. See realfavicongenerator.net/favicon_compatibility . You can also run the compatibility test (realfavicongenerator.net/favicon_compatibility_test): during the 4 tests, FF is supposed to always display the same icon. But it might not be the case.
    – philippe_b
    Commented Feb 12, 2015 at 15:46
  • 5
    Buying into the Pedantry: <link/> is valid XHTML but not HTML. The space at the end was only helpful for very old IE browsers which couldn’t handle the /> properly, and is not required in any XML specification. HTML5 has two forms. XHTML5 is only valid if the document is served as an XML document. Including the closing slash in HTML5 or any other non-XHTML variant is invalid, but forgiven by all browsers. Given that IE could never handle XHTML served properly, it became standard practice to server it as HTML, but this means the closing slash is therefore out of place.
    – Manngo
    Commented Jul 7, 2018 at 2:18
160

I don't see any up to date info listed here, so here goes:

To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:

16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile

4
  • 12
    Is there any reference for this list? Commented Aug 18, 2019 at 13:22
  • @Abdulhameed there was, but it was edited out because it died (and unfortunately, the page isn't on the waybackmachine)
    – Jasper
    Commented Jul 18, 2020 at 17:10
  • Is this list still valid? I have a feeling it is outdated
    – Greeso
    Commented Apr 28, 2021 at 16:15
  • @Greeso Well... iOS6 and iOS7 on the list... idk. hahaha Commented Apr 29, 2021 at 20:52
122

2021 standards thanks to faviconit

I use faviconit.com for the best browser and device support possible. You upload an image and this site gives you the code, the converted images and a browserconfig file.


We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.

But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).

And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!


Example code of what faviconit would give you, next to all the converted images:

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

Since Windows 8

But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Upload a file named browserconfig.xml (to enable the tiles in windows >8)

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>
1
  • 3
    I agree with much of what is said here, but the faviconit site states at the top "Faviconit service will be terminated on 03 October 2023." It also doesn't support HTTPS, so it's not exactly a beacon of web standards. You may want to consider deleting this answer.
    – tgf
    Commented Oct 3, 2023 at 5:03
108

16x16 pixels, *.ico format.

6
  • 35
    I believe the major browsers support GIF, JPG, and PNG as well as .ico now.
    – ceejayoz
    Commented Feb 15, 2010 at 18:51
  • 21
    Internet Explorer doesn't (at least up to and including version 8). It is pretty major. msdn.microsoft.com/en-us/library/ms537656%28VS.85%29.aspx (scroll down to the Troubleshooting section)
    – Quentin
    Commented Feb 15, 2010 at 18:52
  • 9
    16x16 on a retina looks terrible these days btw.
    – Ken Barber
    Commented Apr 7, 2013 at 21:22
  • 3
    @KenBarber iOS devices should be cared for by way of meta tags that specify more "retina-friendly" icons.
    – phatskat
    Commented Apr 24, 2013 at 19:08
  • 1
    A pretty cool service for generating all the relevant favicons is realfavicongenerator. Start with a 260x260px image and get everything you need, including the mark-up for using them all correctly.
    – marnusw
    Commented May 6, 2015 at 11:38
85

I am not sure if/how browsers scale large icons, but The W3C suggests the following1:

The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.


1 w3c.org: How to Add a Favicon to your Site (Draft in development).

5
  • Back in 2006 I came to similar conclusions (in "Favicon Primer" (Apr 2006; by hakre)) but didn't know about that 2005 W3C material (yes seraching + reading helps :)). Thanks for the summary. That time I wrote and not or but that was also about 4bit colors.
    – hakre
    Commented Sep 2, 2013 at 8:59
  • 3
    It's been a draft since 2005? O.o
    – mcont
    Commented Aug 22, 2014 at 16:41
  • 9
    This usage should be replaced by html5 standard now. It doesn't have limitation on icon size and provided an example with a 32768x32768 icon.
    – rhgb
    Commented Nov 25, 2015 at 2:48
  • 1
    @rhgb Thank you! I've been looking around confused why the hell in [current year] I still need to deal with some bullshit limitations when the stuff you can do with just css alone is amazing enough, and I almost missed your answer. I'll just use whatever I want then and if something doesn't support it, it's their issue, as per standard.
    – user11877195
    Commented Nov 28, 2019 at 11:01
  • Lol it's still a draft in 2020
    – Naeio
    Commented Jul 25, 2020 at 17:25
72

The simplest solution (2021)

Use one(!) SVG image

If you do not care about supporting Safari, you can use a single SVG icon:

<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any">

Use one(!) PNG image

If you want full support*, you should add this to the head of your document:

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.

The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px (3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.

*Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.

5
  • 1
    Poor answer. This will slow down loading your site. Users will have to download a large image which will be scaled down rather than shown in most cases. Users only need that size if they add it to their home screen.
    – Gaurav
    Commented Feb 8, 2021 at 17:41
  • 21
    @Gaurav Well... my 196x196 png image at usecue.com/img/icon-196x196.png is just 950 bytes., while your 16x16 .ico on assets.ember-twiddle.com/… is 1050 bytes.
    – Mr. Hugo
    Commented Feb 13, 2021 at 21:10
  • 1
    That's some great png compression, but not typical.
    – Gaurav
    Commented Feb 14, 2021 at 18:42
  • Yes, you are right. Good point. Please use this solution with care! TinyPNG is a great/simple tool for compessing PNG's.
    – Mr. Hugo
    Commented Feb 15, 2021 at 8:16
  • @Gaurav I just tried saving a 192×192 cutout from a photo as a PNG, and it came out as 48K, which is much bigger than yours but still pretty small as a file size by modern standards. Most PNGs of this size would be somewhere between the two extremes. In any case, I would expect it not to slow down loading, unless the browser is behaving badly, tying up bandwidth by downloading this unnecessarily while the page content is still loading.
    – Stewart
    Commented Dec 26, 2023 at 20:28
69

Actually, to make your favicon work in all browsers properly, you will have to add more than 10 files in the correct sizes and formats.

My friend and I have created an App just for this! you can find it in faviconit.com

We did this, so people don't have to create all these images and the correct tags by hand, create all of them used to annoy me a lot!

0
31

Wikipedia has this to say:

Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).

I think the best way is to use a 32x32 gif and test it with different browsers.

1
  • 2
    Something similar is said on W3.org: w3.org/2005/10/howto-favicon They also specify the formats: The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
    – GazB
    Commented Jun 26, 2012 at 11:24
21

Simple solution for modern browsers (2022)

Use an SVG favicon:

<link rel="icon" href="/icon.svg">
  • Supported by major browsers (except Safari in 2021) and Living Standard
  • Only 1 short line of code and simple to remember
  • Other attributes like type and sizes are not necessary
  • Scales much better at any size compared to PNG
  • Let's end the favicon craziness with hundreds of different sizes...
2
  • 6
    For Apple, let's ask them to become standard-compliant... You can send a tweet to @webkit for feature requests (they suggest that on their bug tracker).
    – collimarco
    Commented Dec 17, 2021 at 23:48
  • 2
    Yes. Bring an end to the favicon madness.
    – djvg
    Commented Apr 21, 2023 at 8:14
6

You can have multiple sizes of icons in the same file. I routinely create favicons (.ico file) that are 48, 32, and 16 pixels. You can add in any size image you want. The question is, will the iPhone use an ico file?

ico also supports transparency, but I'm not sure if it's an alpha channel like PNG; probably more like GIF where it's on or it's off.

3
  • 1
    I believe XP and up support a PNG-like (PNG itself?) format for RGBA images. egressive.com/tutorial/… shows how you can use the GIMP to include such images in an .ico file.
    – SamB
    Commented Feb 17, 2011 at 17:24
  • 2
    ICO uses a 1-bit alpha-channel whereas PNG has 8 bits like on the other channels. ICO will suffice for plain icons, but in some cases PNG will be more desireable because of this difference. Commented Oct 12, 2013 at 12:23
  • SamB is almost right and Time Sheep is half-right. ICO supports PNG images to be embedded in it, and the embedded PNGs must be 32-bit RGBA images.
    – Cornstalks
    Commented Nov 25, 2013 at 7:39
2

According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.

I would stick with two different icons.

2

As I learned, no one of those several solutions are perfects. Using a favicon generator is indeed a good solution but their number is overwhelming and it's hard to choose. I d'like to add that if you want your website to be PWA enabled, you need to provide also a 512x512 icon as stated by Google Devs :

icons including a 192px and a 512px version

I didn't met a lot of favicon generators enforcing that criteria (firebase does, but there is a lot of things it doesn't do). So the solution must be a mix of many other solutions.

I don't know, today at the begining of 2020 if providing a 16x16, 32x32 still relevant. I guess it still matters in certain context like, for example, if your users still use IE for some reason (this stills happen in some privates companies which doesn't migrate to a newer browser for some reasons)

1

No, you can't use a non-standard size or dimension, as it'd wreak havoc on peoples' browsers wherever the icons are displayed. You could make it 12x16 (with four pixels of white/transparent padding on the 12 pixel side) to preserve your aspect ratio, but you can't go bigger (well, you can, but the browser'll shrink it).

0
1

You will need separate files for each resolution I am afraid. There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

2
  • 2
    you can have multiple sizes of icons in the same file.
    – Brad
    Commented Oct 25, 2010 at 13:15
  • Thanks very much, that's an excellent article. Still a bit of a mystery what Apple devices would do with ico files that have multiple sized images in them.
    – Alex G
    Commented Oct 25, 2010 at 13:28
1

The format of favicon must be square otherwise the browser will stretch it. Unfortunatelly, Internet Explorer < 11 do not support .gif, or .png filetypes, but only Microsoft's .ico format. You can use some "favicon generator" app like: http://favicon-generator.org/

1

favicon.ico is 16x16

<link rel="shortcut icon" href="favicon.ico"/>

And I use these ones to be beautiful in mobile and tablet:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.

0

Seems like your file should be .ico type.

Check this post about favicons:

http://www.html-kit.com/support/favicon/image-size/

1
0

the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. - How to Add a Favicon to your Site - QA @ W3C

0

The favicon doesn't have to be 16x16 or 32x32. You can create a favicon that is 80x80 or 100x100, just make sure that both values are the same size, and obviously don't make it too large or too small, choose a reasonable size.

1
0

May I remind everybody that the question was:

I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon? Is this possible? Would an iPad-friendly 72x72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16x16 or 32x32 image?

The answer is: YES, that is possible! YES, it will be scaled. NO, you do not need a 'regular browser favicon'. Please look at this answer: https://stackoverflow.com/a/48646940/2397550

0

TLDR:

"I’m not here to read and I only want a generator that will give maximum support for all browsers and resolutions, including legacy support and web manifest generation": https://numberchomper.com/FaviconGenerator

Full explanation:

Is .ico still recommended?

According to this 2005 post on www.w3.org: "the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors." (although 32-bit color support has been added since). The .ico format, supporting multiple resolutions in a single file, has become a standard for favicons. Modern react sample apps typically still include a sample .ico file with resolutions of 16x16, 24x24, 32x32, and 64x64 pixels. Although .png format support is widespread in modern browsers (for instance, Firefox has supported it since 2003), many websites continue to use .ico for legacy support, and is still used in Google's example of a favicon.

<link rel="icon" href="/path/to/favicon.ico">

Google search and Android Chrome install as app support:

For your favicon to display in Google searches, your favicon must also have resolutions which are multiples of 48x48 pixels typically in PNG or any other supported format. Google's material design guidelines suggest designing icons at 192x192 pixels. Consequently, many websites include 48x48 and 192x192 pixel PNG favicons to cover a wide range of support for Google search and Android Chrome app installation. It is important to note that even when following Google’s guidelines exactly they might still not display your favicon in Google searches.

<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

Apple support:

To add support for Apple devices you need to add a link for favicons with rel=”apple-touch-icon” instead of rel="icon". The recommended sizes for Apple devices are 152x152 pixels for iPad (Non-retina), 180x180 pixels for iPhone and 167x167 pixels for iPad (Retina).

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

Web app manifest:

A web app manifest allows web apps to be installed on devices as applications. The icons specified in a manifest usually have higher resolutions, sometimes up to 512x512 pixels to accommodate for higher resolutions required by app icons. The manifest, a JSON file, can include various other parameters like background color, name, and description. You can see browser compatibility for icons specified via the web app manifest here.

{
    "short_name": "My App",
    "name": "My App Long Name",
    "description": "App description.",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "favicon-48x48.png",
            "type": "image/png",
            "sizes": "48x48"
        },
        {
            "src": "favicon-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "favicon-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

Remember to include a reference to your manifest in the HTML head:

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.