The files in a logo pack, and what each one is for

Sizes here come from Google, W3C, MDN, Apple and Meta documentation, checked on 31 October 2026. Some of this advice is old and some of it conflicts, so we've given the date where it matters.

The full list

SVG: the master files

SVG is a vector format, so one file works at every size. Start here and make everything else from it. MDN calls designing an icon as SVG "a good idea" because it scales without loss of quality, but also says to "create PNG versions" to support every system.

Expect four colour versions, because one version won't work on every background:

• Colour, for light backgrounds.
• Reverse, for dark backgrounds.
• Black and white, for one-colour uses such as stamps, invoices and partner pages.

And expect up to three shapes: the full logo, the mark alone and the name alone. A wide logo fails in a square slot, and a mark alone fails where nobody knows you yet.

Check one thing in any SVG you're given: lettering should be outlined, so it doesn't depend on a font being installed. Open the file on a computer without the font, or look inside it for <text> elements.

PNG: the working copies

Use PNG where SVG isn't accepted, which still includes many document tools, email and upload forms. It supports transparency, so a logo can sit on any background. JPG doesn't.

A 1200 px width is enough for most slides and documents, and 2400 px covers full-width use on high-density screens. Don't scale a small PNG up. Go back to the SVG and export a larger one.

Favicons

A favicon is the small icon in a browser tab. It's also shown beside your site in Google Search, which has rules of its own. Google's favicon guidance, last updated 27 October 2026, says:

• It must be square and at least 8 × 8, and Google recommends going "larger than 48x48px".
• Supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG isn't on that list, so don't rely on favicon.svg alone.
• Accepted rel values are icon, apple-touch-icon and apple-touch-icon-precomposed.
• Googlebot must be able to crawl your home page, and Googlebot-Image must be able to crawl the favicon, so don't block them in robots.txt.
• "The favicon URL must be stable", so don't change it often.

An .ico file is a container that holds several sizes. The browser picks the best one. If there are several <link rel="icon"> tags, MDN says browsers use media, type and sizes to choose the most appropriate, and if several are equally suitable, the last one is used.

Small icons need simpler drawing. A detailed mark that looks good at 512 px can turn to mush at 16 px, so use the plain mark on a solid square and look at it in a real tab. A typical set of tags is:

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="icon" href="/favicon.svg" type="image/svg+xml">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Apple touch icon

iOS doesn't use rel="icon" for a home screen shortcut. MDN confirms it uses the non-standard apple-touch-icon link instead. Apple's own guide gives 180 × 180 as its example for a retina iPhone. It's an archived page, last updated in 2016, and we couldn't read Apple's current icon page, so treat the figure as long-standing practice and not a current spec.

The same page says that without a link tag, the system looks in the site root for files starting with apple-touch-icon, and places apple-touch-icon.png there for the whole site. So put it in the root even if you also link it. We'd use a solid background, as our pack does, so you control what sits behind the mark.

Web app manifest icons

If your site can be installed as an app, a manifest file lists its icons. web.dev says "For Chromium, you must provide at least a 192x192 pixel icon and a 512x512 pixel icon." An entry looks like this: { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }.

If your site isn't an installable app, these files aren't essential, but they're useful anyway. A 512 px square suits any upload form that asks for an icon, and a 192 px icon linked with rel="icon" gives Google a favicon larger than 48 px.

Maskable icons

Android applies a shape to app icons, such as a circle. A plain icon can get clipped or end up on a white backing. web.dev says default icons "are resized on a white background" on Android. A maskable icon solves this by having spare background around the logo.

The rule is in the W3C manifest draft: the safe zone is a centred circle with a radius of 40% of the icon's smaller side. Anything outside it may be cut off.

To make one, fill the whole square with an opaque background colour, as MDN advises, and centre the mark inside the circle. Then mark it in the manifest: { "src": "/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }.

Keep it as a separate file from your normal icon. web.dev's manifest article shows "any maskable" on one file, but padding that suits a mask makes a logo look small in other places. There's also a monochrome purpose, described by MDN, where the browser uses only the alpha channel. Few sites need it.

Share image

This one isn't a logo file, but you'll be asked for it the same week. It's the picture shown when someone shares your link. Open Graph sets no pixel size, and Meta recommends at least 1200 × 630, so use that. A logo alone on a plain background is a weak share image. Add the product name and what it does. Our list of launch image sizes has the detail on other platforms.

Two more uses people forget

• Google logo markup. If you add Organization structured data, Google's logo guidance says the image must be at least 112 × 112 and crawlable. A PNG from your pack works.
• Chrome Web Store. An extension icon is 128 × 128, with 96 × 96 artwork and 16 px of transparent padding on each side. Packs rarely include it, so make it from the mark.

A real example: two sets from this site

Programmable's own site uses a full favicon set, shipped in its public folder: favicon.svg, favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, maskable-192x192.png and maskable-512x512.png, plus favicon.ico and a manifest listing the 192 and 512 icons. Logos sit alongside as SVG, in dark and white, with a PNG at 1200 px wide.

The brand pack from our logo maker is the set you get as a customer, and it's a little different:

Be aware of three gaps. The pack has no maskable icon: icon-192.png and icon-512.png are drawn as ordinary tiles, not to the safe zone, so a large mark may be clipped. It has no share image, which you can make in Graphics with the Share image format at 1200 × 630. And it has no manifest file, so if you're building an installable app, you'll need to write one.

Is a logo maker the right choice?

It depends on what you need next. If you only need a logo, a one-off purchase from a dedicated logo tool, or a designer, may suit you better, because Programmable is a subscription. It makes the most sense when you also make graphics, decks or films from the same brand. The pack has no EPS or PDF, so check with your printer. No logo tool can tell you a name is safe to use, and ours doesn't run trademark checks. Do that search separately, or ask a lawyer, before you print anything.

Checklist before you hand it over

1. SVGs open correctly in a browser, with no font needed.
2. Reverse version checked on a dark background.
3. Favicon seen in a real tab at 16 px.
4. favicon.ico and apple-touch-icon.png in the site root, with their link tags added.
5. Favicon crawlable, at a stable URL.
6. If installable: manifest, 192 and 512 icons, and a maskable icon tested in a circle.
7. A 1200 × 630 share image set as og:image, with og:image:alt.
8. Colours and typeface written down.

Common questions