Creating Sub-marks, Favicons, and App Icons
The Logo Hierarchy Framework
A beautiful, AI-generated primary logo is an excellent starting point for your brand, but it will not work everywhere. If you take a detailed, horizontal logo containing your full business name and tagline, and shrink it down to fit an Instagram profile picture or a browser tab, it becomes an illegible, blurry smudge. This is known as the “cramming mistake.”
Professional brand kits solve this through a Logo Hierarchy Framework. This system deconstructs your primary logo into a structured set of variations to maintain legibility across different scales:
- Primary Logo: The most detailed version, containing the full business name and optional tagline. Used on website headers and official documents.
- Secondary Logo: A rearranged, simplified layout (e.g., stacked instead of horizontal) for medium-sized spaces.
- Sub-mark (or Icon Logo): A stripped-down, minimal graphic, often a monogram, single letter, or standalone symbol, optimized for extra-small, square, or circular spaces.
In this lesson, we will focus on extracting and formatting that sub-mark to create your social media profiles, favicons, and app icons.
Extracting Your Sub-mark
When using AI design tools to generate your brand kit, you will often receive a primary logo that combines a graphic element (an icon) with typographic elements (your brand name). To create your sub-mark, you must isolate the most recognizable core element.
For example, if your primary logo is for “Apex Financial Consulting” and features a stylized geometric mountain next to the text, your sub-mark should be just the geometric mountain. If your logo is purely text-based (a wordmark), your sub-mark might be a monogram of the first letter, such as a stylized “A”.
When isolating this element, you must design for circular cropping. Social media platforms like Instagram, LinkedIn, and TikTok force your square image into a circle. If your sub-mark stretches to the absolute edges of your square canvas, the corners of your design will be cut off. Always leave generous padding around your sub-mark to ensure it remains intact when the circular mask is applied.
Modern Favicon Standards
A favicon is the tiny icon that appears next to your website’s title in a browser tab. Historically, generating favicons meant creating dozens of different file sizes and formats to satisfy every obscure browser and device.
Modern web standards have drastically simplified this. Today, you only need to export three specific files from your design tool to cover almost all modern needs:
favicon.ico: A multi-size legacy file. You should generate this to contain 16×16, 32×32, and 48×48 pixel versions of your sub-mark. This acts as a fallback for older browsers.icon.svg: A single scalable vector graphic. Modern browsers prefer this format because it scales infinitely without losing quality. Furthermore, an SVG can be coded to adapt dynamically to light and dark browser themes.apple-touch-icon.png: A 180×180 pixel PNG used specifically when iOS users save your website to their home screen.
The Dark Mode Invisibility Trap
When exporting your favicon, beware of dark mode invisibility. If your sub-mark is black and exported with a transparent background, it will look fine on a light-themed browser tab. However, if a user has their browser set to dark mode, your black icon will completely disappear against the dark gray tab. Always ensure your favicon has sufficient contrast for both light and dark backgrounds, or use a solid background color behind the icon.
App Icon Constraints: iOS and Android
Even if you are not building a native mobile app right away, you need app icons. Progressive Web Apps (PWAs) and users bookmarking your website to their mobile home screens rely on these assets. Both Apple and Google have strict, specific constraints that you must follow to avoid visual artifacts.
iOS App Icons
Apple’s requirements for iOS icons are rigid. You must provide a master file that is exactly 1024×1024 pixels in PNG format.
- No Transparency: The file must be fully opaque (no alpha channel). If you upload an icon with a transparent background, Apple will automatically fill it with black.
- No Pre-rounded Corners: This is the most common mistake non-designers make. Apple’s operating system automatically applies its signature “squircle” (a mathematical hybrid of a square and a circle) mask to your icon. If you round the corners of your design before exporting, the final result will have ugly, double-rounded artifacts with white corners. Export a perfect square.
- Safe Area: Keep critical design elements at least 10% away from the edges to ensure they aren’t clipped by Apple’s mask.
Android Adaptive Icons
Android handles app icons differently through a system called “Adaptive Icons.” Because different Android device manufacturers (Samsung, Google, OnePlus) apply different masks, some use circles, some use squircles, some use teardrops, Android splits your icon into two separate layers: a background layer (usually a solid color or pattern) and a foreground layer (your sub-mark artwork).
To ensure your sub-mark is never clipped by these unpredictable manufacturer masks, Android enforces a 66% safe zone. If your canvas is 108×108 dp, your core artwork must fit entirely within a centered 72dp diameter circle. Anything outside this 66% zone is at risk of being cropped out depending on the user’s device.