The set, at a glance
| File | What it is | Where it goes |
|---|---|---|
| logo.svg | Vector master for the web and for anyone who needs to scale it | Websites, apps, slides, further design work |
| logo.pdf | Vector file for print, with type outlined | Printers, signs, merchandise, documents |
| logo-1024.png (and 512, 256) | Transparent raster at fixed widths | Email signatures, office documents, upload forms that refuse SVG |
| logo-white.svg / .png | Reversed version for dark backgrounds | Footers, dark slides, photos |
| mark-512.png | Square symbol only, no wordmark | Social profile pictures, app icons |
| favicon.ico + PNG icons | Browser tab and home screen icons | The website itself |
Six items, most of them made from one source. If you are the one receiving a logo, this is also the list to ask for.
SVG: the master
A logo is shapes and type, which is what vector formats store. MDN calls SVG "ideal for diagrams, icons, and other images which can be accurately drawn at any size", and advises using the SVG version of an icon whenever possible. One SVG serves a 16 pixel tab icon and a billboard. The SVG vs PNG guide covers the format choice in detail.
Before handing it over, clean it. SVG files from design apps often carry editor settings, comments, metadata and long decimal numbers that a browser does not need. The SVG optimizer removes them with SVGO and shows the bytes saved; compare the before and after previews, since rounding can move points slightly. Convert text to outlines so the file does not depend on the recipient having the typeface, and check the license of that typeface for logo use in font licenses explained.
PDF: for print
For print, signs and merchandise, send a vector PDF. The Library of Congress format description notes that PDF describes text and graphics in a device- and resolution-independent way and supports vector graphics, so a logo exported as vector PDF prints sharp at any size. It also notes that faithful rendering requires fonts to be embedded, one more reason to outline the type. For bleed, color and export settings, follow how to prepare a file for print.
PNG: for everything that takes only pixels
Email signatures, office documents, many content management systems and upload forms want a raster image. PNG is the right one for a logo because, in MDN's words, it has full alpha transparency, so the logo sits cleanly on any background. Deliver a few fixed widths rather than one huge file, for example 256, 512 and 1024 pixels, each with a transparent background. The SVG to PNG converter renders the master at 1x, 2x, 4x or an exact width with transparency kept, and the image resizer makes further sizes from the largest PNG.
If someone has to place the PNG in print, they need enough pixels for the printed width. At 300 pixels per inch:
| Printed width | Pixels needed |
|---|---|
| 1 in (25 mm) | 300 px |
| 2 in (51 mm) | 600 px |
| 3 in (76 mm) | 900 px |
| 6 in (152 mm) | 1800 px |
Why print asks for that resolution is in PPI vs DPI. For anything larger, send the PDF.
Color versions and the square mark
A logo in brand colors disappears on a dark photo. Add a reversed version, usually all white, and a single-color black version for faxes, stamps and engraving. Export each as SVG and PNG.
Where a profile picture or app icon is cut to a square or a circle, a wide wordmark shrinks to nothing, so deliver the symbol alone on a square canvas, at least 512 pixels, with some space around it. Preview the circle crop with crop image to circle, which shows how much of the corners a round frame cuts away.
The favicon set
The browser tab and the home screen each want their own files. The specs behind them:
| File | Size | Why |
|---|---|---|
| favicon.ico | 16, 32, 48 inside one file | Requested from the site root by browsers and programs that do not read the HTML |
| apple-touch-icon.png | 180×180 | Home screen icon on iPhone and iPad; Apple's example uses 180×180 |
| icon-192.png | 192×192 | Web app manifest; Chromium requires at least this and 512 |
| icon-512.png | 512×512 | Web app manifest; install screens |
| maskable-512.png | 512×512 | Android icon shapes; logo inside the safe zone |
- favicon.ico. MDN describes ICO as a file that can contain several icons, up to 256×256, and explains that a
favicon.icoin the site root was the original way to set a favicon. Browsers may still request it there when a page has no icon link. The PNG to ICO converter packs 16, 32 and 48 pixel versions into one real ICO file. - The link tags. With several
rel="icon"links, MDN says the browser picks the most appropriate by media, type and sizes. iOS ignores those and usesapple-touch-icon; Apple's documentation shows a 180×180 example and a fallback toapple-touch-icon.pngin the root. - The manifest. web.dev states that Chromium needs at least a 192×192 and a 512×512 icon for an installable web app. The manifest's
purposefield marks an icon as any, maskable or monochrome. - Google Search. Google shows one favicon per hostname, requires it to be square and at least 8×8 pixels, and recommends larger than 48×48. Its supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, so keep a PNG or ICO next to any SVG icon.
A maskable icon may be cut into a circle or another shape by the device. web.dev defines its safe zone as a circle with a radius of 40 percent of the icon width, so the logo has to fit inside a circle 80 percent as wide as the icon:
| Icon | Safe circle diameter | Margin at each side |
|---|---|---|
| 192×192 | 154 px | 19 px |
| 512×512 | 410 px | 51 px |
The favicon generator makes the whole set from one logo: favicon.ico, the PNG sizes, the Apple touch icon, a manifest and the HTML to paste.
Naming and handover
- Name files by content and size, such as
acme-logo-white-512.png, so nobody has to open them to know what they are. - Put vector files and raster files in separate folders, and the favicon set in its own folder ready to upload.
- Add a one-page sheet with the color values and the minimum size at which the logo still reads.
- Keep the editable source file yourself, and say in the agreement whether it is part of the delivery.
Frequently asked questions
Which logo file formats should a designer deliver?
At minimum an SVG master, a PDF for print, transparent PNGs at a few fixed widths, a version for dark backgrounds, a square symbol for profile pictures and a favicon set. Vector files cover every size; the PNGs cover the places that only take pixels.
Is SVG enough on its own?
For a website, nearly. MDN calls SVG ideal for icons and other images that are accurately drawn at any size. But many email clients, office programs and upload forms want a PNG, Google Search does not list SVG among its favicon formats, and print work is best sent as a vector PDF. Deliver the SVG as the master and the other formats beside it.
What size should a logo PNG be?
There is no single size, so deliver a few widths, such as 256, 512 and 1024 pixels, with a transparent background. For print, the pixels needed are the printed width in inches times the resolution; at 300 pixels per inch a 2-inch logo needs 600 pixels. Vector PDF avoids the question for print.
Why does a favicon need so many files?
Different software looks in different places. Browsers may request favicon.ico from the root, iPhones look for an apple-touch-icon, and installed web apps read 192 and 512 pixel icons from the manifest. A favicon generator produces all of them from one logo.
What is a maskable icon?
An icon designed so that the platform can cut it into a circle, squircle or other shape. web.dev defines the safe zone as a circle in the center with a radius of 40 percent of the icon width; anything outside may be masked away. On a 512 pixel icon that circle is 410 pixels across.
Sources
- MDN Web Docs: Image file type and format guide (SVG ideal for icons drawn at any size, prioritize SVG versions of icons, PNG with full alpha, ICO holds several icons up to 256×256 and favicon.ico in the root)
- Library of Congress: PDF format family (device- and resolution-independent description of text and graphics, support for vector graphics, faithful rendering requires embedded fonts)
- MDN Web Docs: rel attribute (rel="icon", choice among several icons by media, type and sizes; iOS uses apple-touch-icon instead)
- MDN Web Docs: Web app manifest icons (src, sizes, type, purpose; any, maskable, monochrome; sizes any for SVG)
- web.dev: Add a web app manifest (Chromium needs at least a 192×192 and a 512×512 icon)
- web.dev: Adaptive icon support with maskable icons (safe zone radius 40 percent of the icon width)
- Apple Developer: Configuring Web Applications (apple-touch-icon.png in the root, link rel apple-touch-icon with sizes 152, 167 and 180 in the examples)
- Google Search Central: Define a favicon (square, at least 8×8, larger than 48×48 recommended, formats BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, one favicon per hostname)