Favicon handoff
How to make a favicon from your logo
Choose a recognizable small mark, export the right files and make the website handoff clear.
The short answer
Start with an approved symbol or compact logo, place it on a square canvas without stretching it, and inspect it at 16 and 32 pixels. Prepare the SVG, PNG or ICO files your website needs, then have the developer install and test them. A larger export cannot recover details that are too small to read; a simplified, approved variation may work better.
1. Agree where the icon will appear
A favicon helps people recognize a website in places such as browser tabs and bookmarks. Before exporting, ask who will install it and which browsers, site builder and other destinations the project needs to support.
A browser tab, an Apple Home Screen shortcut and an installed web app can reuse the same brand artwork, but their setup and image requirements differ. A native mobile app also needs its own platform brief. Name those deliverables separately so “favicon included” has a clear meaning.
- Website: identify the browser icon and any required fallback files.
- Home Screen or installed web app: confirm touch-icon or manifest requirements with the developer.
- Brand approval: agree which symbol, monogram or compact variation may represent the business.
Further reading: MDN: what a favicon does · MDN: web app icon declarations
2. Choose a mark that survives small sizes
Start with an existing approved logo mark or monogram. If the identity only has a wide wordmark, propose a compact variation and get approval before treating it as part of the brand. Avoid stretching the full wordmark into a square or silently removing important details.
Use 16 × 16 and 32 × 32 pixels as practical review sizes. Look for a recognizable silhouette, open counters, distinct gaps and strokes that remain visible. These are production checks, not a universal minimum-size rule for the whole logo system.
The arithmetic below shows why a perfectly exported wide logo can still be hard to recognize. The example assumes a 4:1 wordmark and a square mark, each fitted inside the same square with proportional padding. It illustrates geometry only; it is not a customer test or a prescribed padding rule.
| Artwork | 16 × 16 px canvas: 12 × 12 px fitting area | 32 × 32 px canvas: 24 × 24 px fitting area |
|---|---|---|
| 4:1 wordmark | 12 × 3 px | 24 × 6 px |
| 1:1 compact mark | 12 × 12 px | 24 × 24 px |
Further reading: MDN: common favicon size · MDN: preserving SVG proportions
3. Prepare a clean square source
Keep the editable master, then prepare a delivery copy with the approved compact artwork. Use a square artboard or frame and scale the mark proportionally. Decide its padding deliberately: too much makes the mark look small, while too little can crowd the edges. Adjust optical centering by eye when the shape needs it.
For SVG, check that the exported viewBox describes the intended square area. The viewBox controls the coordinate rectangle mapped into the image viewport; it does not remove unused space already inside the artwork. Open the exported file and inspect the actual bounds.
If the icon contains lettering, outline the correct, approved text in the delivery copy or during export. Keep live text in the master. Our SVG font guide explains the checks to make before converting letters to paths.
Review the mark on light and dark backgrounds. Transparency does not automatically provide contrast: a dark mark can disappear against a dark tab. A background tile or a separately approved appearance may help, but inspect the installed result rather than relying on a large preview.
Further reading: MDN: SVG viewBox
4. Choose files for the actual website
Use the developer’s requirements to choose a small, purposeful set. HTML supports multiple icon candidates, including scalable SVGs and raster files. Browsers select among them using the declarations and their supported formats; one file order or extension does not guarantee the same choice everywhere.
SVG is useful for vector artwork, PNG gives you fixed pixel dimensions, and ICO can hold several raster images in one file. If you deliver ICO, check its embedded sizes rather than assuming the filename proves them. A PNG renamed to .ico is not a conversion.
The following is a practical example for a website handoff. It is not a mandatory set for every site.
| File | Example contents | Purpose |
|---|---|---|
| favicon.svg | Approved compact vector artwork on a square canvas | Scalable browser icon where supported |
| favicon.ico | 16 × 16, 32 × 32 and 48 × 48 images | Multisize compatibility option |
| favicon-96.png | 96 × 96 pixels | Raster option, including a Google Search candidate |
Further reading: WHATWG: website icon selection · MDN: the ICO container · WebKit: SVG icons in Safari 26
5. Export and check the real files
You can prepare the source and raster exports in your design editor. In Figma, select the square frame, add a PNG export and use a fixed width such as 16w, 32w or 96w in the Scale field. A square frame should produce the matching height; verify the downloaded dimensions. Export SVG separately at 1×.
If you need ICO, use a tool that actually writes that format and inspect the embedded images. Keep any manual small-size refinements in the delivery source so a later export does not accidentally replace them.
Open the files the client will receive. Compare their shape and spacing with the approved reference, then check the tiny versions at their intended size. If a PNG is unexpectedly soft, investigate its source and export dimensions before generating more sizes.
Further reading: Figma: export dimensions and formats
6. Check Google Search requirements separately
Google requires a square icon of at least 8 × 8 px and recommends more than 48 × 48. Its supported-format list includes PNG and ICO, but omits SVG. A 96 px PNG is a practical option. Declare it on a crawlable homepage, allow crawling of the file and keep its URL stable. Processing can take weeks; display is not guaranteed. Google allows one favicon per hostname, not a different icon for each subdirectory.
Further reading: Google Search Central: favicon guidelines
7. Make the developer handoff explicit
Include the approved artwork, a short file inventory and the intended use of each asset. The developer needs to place the images where the website can serve them and configure the site’s icon links or its site-builder settings. Downloading a ZIP does not install the favicon.
Ask for a check of the deployed site in the agreed browsers, including light and dark appearances. If the wrong icon shows, first confirm which file URL the page declares and what that URL returns. Keep a record of the approved version and the installed paths.
An Apple touch icon uses its own declaration. Installed web apps can use a manifest with icon sizes and purposes; a maskable icon needs a design checked against its safe zone. A large square PNG alone does not establish that those requirements have been met.
Approved artwork: compact brand mark, version 03. Browser assets: favicon.svg, favicon.ico, favicon-96.png. ICO images: 16, 32 and 48 px. Review: installed tab icon on light and dark backgrounds. Additional Home Screen or app assets: confirm against the agreed platform brief.
Further reading: Apple: touch-icon setup, archived reference · MDN: maskable icon preparation
8. Package the approved icon with logopack.app
If you use logopack.app for the wider logo delivery, choose an approved compact SVG for the optional favicon pack and review its padding and background. The packaging step exports the chosen artwork; it does not decide which redesign the client has approved.
The pack includes the following files. The 1024 px image is a high-resolution starting point for further preparation. Additional PWA, Android maskable or native-app requirements still need their own assets and checks.
A free account lets you preview your own SVG and adjust settings. You can export the built-in demo artwork with a free account; exporting your own artwork requires Pro. Check the current plans and inspect the final download before delivery.
- favicon.svg: scalable icon artwork
- favicon.ico: embedded 16, 32 and 48 px images
- favicon-96.png: 96 × 96 px PNG
- apple-touch-icon.png: 180 × 180 px PNG with an opaque background
- icon-1024.png: 1024 × 1024 px image for further preparation
- setup.html: website setup instructions
Further reading: Prepare a package with logopack.app · See the current plans
Final favicon handoff checklist
Keep the checked favicon source beside the approved logo master. That makes the next website update a repeatable handoff instead of another search for the right icon.
- The compact mark is approved for this use.
- The artwork stays proportional inside a square canvas.
- The 16 and 32 px versions have been inspected at their intended size.
- Padding, counters and fine strokes survive the small export.
- The actual files match the stated dimensions and ICO contents.
- Light and dark background checks use the approved appearance.
- A Google-supported candidate is available where Search is in scope.
- The developer has file roles, installation instructions and an approved reference.
- Any touch-icon, PWA or native-app work is separately defined.
PUT IT INTO PRACTICE
Ready to prepare your pack?
logopack.app turns existing SVG artwork into an organized logo package. Preview your files, choose the available export options and check the result before handing it over.
Start with the logo pack generator, explore the sample ZIP, or compare the current plans.
Open generator