Base Mini App Builder MCP Server

# App Icon > A memorable icon that represents your mini app helps people recognize your app at a glance. <img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=3cc589502811495476dc2da558096018" alt="app-icon" data-og-width="4845" width="4845" data-og-height="1350" height="1350" data-path="images/design-guidelines/app-icon-overview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=82b02c9ab367ab1d94c0847c536509b7 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=a7896e0aabe04c3ef20511cb6accae69 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=965169bfe587a8007cc8649e011bc2ce 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=bd2d508c5f27c7dbdd290bcbbe087952 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=9930d708a86c3868b6ab4361af506319 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-overview.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=483c9f60bde4b40499c0af19bd19a5c6 2500w" /> ### Placements Your app icon is the first impression users have of your mini app. It appears in the Base App discovery interface and throughout the social experiences. <img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=56359d6099ff30aea01345775eb9a540" alt="app-icon" data-og-width="4845" width="4845" data-og-height="1353" height="1353" data-path="images/design-guidelines/app-icon-placements.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=7b262b80ba921064559d4525e3ff0906 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=46042dfcab159aa55df0690f6af0f6a8 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=18fb6bb8fd4d0d1fc425af47647fc256 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=90d340142ab6dbdafac630fcde20000a 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=3f21ff642177e5f7998452b6f4fd5b99 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/app-icon-placements.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=8e87be795f7ecf2ca6815b4cfa5d9c6a 2500w" /> The following locations show where your app icon will appear in the Base app: * Search * Home * App category * Browser header ### Best Practices **Clarity at Small Sizes** * Icons should be recognizable at 16x16px * Avoid fine details that become unclear when scaled down * Use bold, simple shapes and high contrast **Brand Recognition** * Reflect your app's core functionality or brand identity * Consider how the icon works in both light and dark themes * Ensure it stands out among other mini apps **Consistency** * Maintain visual consistency with your app's overall design language * Use the same color palette and style as your app interface * Consider creating variations for different contexts ### Specifications `iconUrl` in farcaster.json specifies your app’s icon. It should follow the guidelines below to ensure proper display in the Base App: * **Dimension**:1024x1024px * **File Format**: png. * No alpha ### Other App Metadata In addition to the app icon, there are other app metadata that determine the first impression of your app. Aim for your metadata to provide helpful context, and properly set expectations with new users on what your app does. <img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=8794c15a2ffebf8929a83d0e967403ad" alt="app-metadata" data-og-width="5991" width="5991" data-og-height="3195" height="3195" data-path="images/design-guidelines/metadata-guidelines.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=a364da879cf853a33e34a0ac1ba379ad 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=219fafe2588cd1c6f7b72bf8e93ec4ab 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=8c3133cae892c6b1d071241f10990718 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=442f0b51762e134eb3ed60018feb793d 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=75cf14816d499090cf5fb92129b7e09f 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/metadata-guidelines.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=a23371ac33332e67b4420804447c0e61 2500w" /> Learn more about how to best leverage the app metadata [here](https://docs.base.org/mini-apps/features/embeds-and-previews) ### Testing Your App Metadata * Use [Base Mini App Preview Tool](https://www.base.dev/preview) to validate your metadata and check how your icon appears. * Once published on the Base app, check how it renders in different placements.