Using a Dotted World Map as a Favicon or App Icon
A dotted world map as a favicon almost never works at the smallest size a browser actually displays it — 16×16 pixels — but it can work well as a larger app icon, a touch icon, or a PWA splash graphic. The honest answer here depends entirely on which icon you mean, so it's worth separating the two before designing anything.
Why 16px breaks a dot map
A favicon shown in a browser tab is typically rendered at 16×16 or 32×32 pixels. A full world map made of individual dots depends on the viewer being able to resolve dozens or hundreds of small marks as a recognizable shape — continents, coastlines, gaps of ocean. At 16 pixels, that detail simply collapses into a gray or colored blur, and the map stops reading as a map at all.
This isn't specific to dotted maps — any sufficiently detailed vector illustration has the same problem at favicon size. The fix is the same one used for complex logos: simplify drastically for the smallest size rather than shrinking the full design.
What actually works at favicon size
If the brand identity really is "global" and you want that idea in the tab icon, a few adaptations read better than the full map at 16px:
- A single continent silhouette or a simplified globe outline rather than the full dotted texture — the idea of a map, not the literal dot pattern.
- A cluster of 3–5 large dots arranged loosely in a globe-like shape, sized so each dot is still a handful of pixels wide even at 16×16.
- A solid circle or ring shape with one accent dot, which reads as "location/global" without trying to reproduce actual geography.
None of these need to be generated from the same tool or file as your full dotted map — treat the favicon as its own small, separate icon design, informed by the map's color palette rather than a shrunk copy of it.
Where the full map does work: app icons and PWA assets
Modern web apps need icons at a range of larger sizes — 180×180 for Apple touch icons, 192×192 and 512×512 for Android/PWA manifests, and larger still for app store listings if you're wrapping the site as a native app. At these sizes, a full dotted world map holds up fine, since there's enough resolution for the dot pattern to remain legible.
For these larger icons:
- Center the map inside the icon's safe area — most platforms apply rounded corners or a circular mask, and a map that bleeds to the very edge risks having its outer dots clipped.
- Use a solid background color behind the map rather than transparency; some platforms composite icons onto a background you don't control, and a transparent PNG can look inconsistent across devices.
- Keep the color scheme consistent with your favicon and the rest of your brand's icon set, even though the favicon itself is a simplified version rather than the literal map.
Exporting for both
Because these two use cases need genuinely different artwork, plan for two exports rather than one file scaled down: a full map at high resolution for app icons and larger touch icons, and a separate simplified mark for the 16–32px favicon range. See How to Compress SVG Maps for Faster Loading for keeping the larger assets lightweight, and Designing Maps for Retina and High-DPI Displays for exporting the larger icon sizes sharp on high-density screens.
If you haven't settled on a map color yet, How to Recolor a World Map SVG for Your Brand is worth reading before you lock in the icon set, since the same palette should carry across the favicon, the app icon, and the map wherever else it appears on the site.
Final thoughts
A dotted world map is the wrong asset for a 16px browser tab icon, but a strong option for the larger app and touch icons a modern site actually needs several of. Design a simplified mark for the smallest sizes, reserve the full map for icons 180px and up, and keep both consistent with the same color palette.
Generate your map at World in Dots and export the sizes and simplified versions your icon set actually needs.