A brand needs its logo exported at a specific set of pixel dimensions before a website or a social profile looks finished. There are five favicon sizes worth having and three core social sizes. Getting them right is pure specification work, and getting them wrong is one of the most visible ways a new brand looks unfinished.
Favicons: export the logo mark at 16, 32, 48, 180 and 512 pixels square. 16 and 32 are the browser tab and bookmark sizes, 48 is used by some desktop contexts, 180 is the Apple touch icon for iOS home screens, and 512 is used by Android and progressive web app manifests.
Social: a profile image at 400 by 400, a link preview image at 1200 by 630, and a banner at 1500 by 500 will cover the major platforms. The link preview is the one people forget, and it is the image that appears every time anyone shares a page.
Use the logo mark rather than the full lockup for anything square, and keep important detail away from the edges of banners, which crop differently per platform and per device. Export every one of these from the same approved artwork so the brand reads identically wherever it appears.
What favicon sizes do I actually need?
Five files cover essentially everything in current use.
| Size | Used for | Notes |
|---|---|---|
| 16 x 16 | Browser tab | The mark must survive at this size or use a simplified version |
| 32 x 32 | Bookmarks, higher-density tabs | The most commonly rendered favicon today |
| 48 x 48 | Some desktop and Windows contexts | Cheap to include |
| 180 x 180 | Apple touch icon, iOS home screen | Rendered on a rounded square, so avoid edge detail |
| 512 x 512 | Android and web app manifests | Also used for install prompts and splash screens |
What social image sizes should I export?
Platforms change their layouts often, but three dimensions have been stable enough to build on: a square profile image, a wide link preview and a wide banner.
| Asset | Dimensions | Where it appears |
|---|---|---|
| Profile image | 400 x 400 | Profile pictures across the major networks |
| Link preview | 1200 x 630 | The card shown whenever a page of yours is shared |
| Banner | 1500 x 500 | Profile header images |
The two that get missed
The link preview image is the one most brands never set. Without it, shares of your pages appear as bare text or with whatever image the platform picks. It is one file, and it appears every single time somebody links to you.
The 16 pixel favicon is the other. If your mark has fine detail it will turn to mush at that size, which is a good reason to check how the logo behaves when it is very small before committing to it.
These are generated rather than made by hand: a brand kit run produces the favicon set and the social sizes from the logo you already approved, at the correct dimensions.
The sizes, already exported
Favicons at 16, 32, 48, 180 and 512, plus profile, preview and banner sizes.
Start free with 15 creditsIf the mark loses detail at the smaller sizes, the fix is usually to switch to a simpler arrangement, which is covered in logo variations every brand needs.
This is one piece of a complete hand-off. For the full list of what you should receive, see what a brand identity hand-off actually includes.
