[{"data":1,"prerenderedAt":63},["ShallowReactive",2],{"blog-favicon-app-icon-kit-generator-prepare-browser-and-app-icons\u002F":3},{"id":4,"title":5,"author":6,"body":9,"date":48,"description":49,"extension":50,"image":51,"meta":52,"navigation":53,"path":54,"published":53,"seo":55,"stem":56,"tags":57,"__hash__":62},"blog\u002Fblog\u002Ffavicon-app-icon-kit-generator-prepare-browser-and-app-icons.md","Favicon & App Icon Kit: Prepare Browser and App Icons",{"name":7,"to":8},"Brand Peel Team","https:\u002F\u002Fx.com\u002Fjonasfroeller",{"type":10,"value":11,"toc":44},"minimark",[12,16,19,22,31],[13,14,15],"p",{},"Favicons are tiny but they carry a lot of recognition.",[13,17,18],{},"Favicons are tiny and unforgiving. I have cut an icon that looked great large and turned to mush at 16 pixels. For icons I prefer a steady, almost boring production routine at each size. Product moments can be bold, but tab and home screen marks should just read cleanly. The first time I skipped this I felt clever. Then the homepage, sales deck, and investor update told three different stories. We fixed it by making the source of truth small enough to keep open.",[13,20,21],{},"They show up in tabs, bookmarks, home screens and install prompts. A mark that looks fine at 512 can turn to noise at 16.",[13,23,24,25,30],{},"The ",[26,27,29],"a",{"href":28},"\u002Ftools\u002Ffavicon-app-icon-kit-generator","Favicon & App Icon Kit Generator"," builds small scale previews, individual PNG downloads, a site.webmanifest starter and HTML link tags, all locally. Nothing uploads.",[13,32,33,34,38,39,43],{},"Before you finalize, check icon colors against surfaces with the ",[26,35,37],{"href":36},"\u002Ftools\u002Fdark-mode-token-checker","Dark Mode Token Checker",", then capture the palette in the ",[26,40,42],{"href":41},"\u002Ftools\u002Fdesign-token-starter-generator","Design Token Starter Generator",".",{"title":45,"searchDepth":46,"depth":46,"links":47},"",2,[],"2026-08-31","Create favicon and app icon previews, get PNGs, manifest JSON and link tags from one asset without uploading it anywhere.","md",null,{},true,"\u002Fblog\u002Ffavicon-app-icon-kit-generator-prepare-browser-and-app-icons",{"title":5,"description":49},"blog\u002Ffavicon-app-icon-kit-generator-prepare-browser-and-app-icons",[58,59,60,61],"favicon","app-icon","pwa","design-system","2pzZI9TqmXuHtvThxwWaRUS6BNx4HwybuHZsvj1gCBo",1788309462656]