Get 50% off your first month of Cursor with this link
AI Brand Kits

Icon Maker

Design a favicon or app icon, preview every standard size, and download SVG, PNG, favicon.ico, or a full web-ready pack — no sign-in required.

Favicon and app icon generator for developers

Ship browser tabs, iOS home screens, and PWA manifests with the correct file names and dimensions. Pick a Lucide icon or lettermark, tune colors, then download individual files or one zip.

Every export follows common conventions: favicon.ico, favicon-16/32/48 PNGs, apple-touch-icon (180×180), android-chrome-192/512, and logo.svg for scalable source.

Everything you need for web icons

One workspace for design, preview, and download — built for Next.js, static sites, and PWAs.

  • 48+ Lucide icons plus lettermark mode from your brand name
  • Live nav bar and browser tab preview
  • Download favicon.ico, PNG sizes, SVG, or full icon-pack.zip
  • Copy-paste HTML `<link>` tags for your document head
  • Sync to your AI brand kit for DESIGN.md and playground exports

Make an icon in three steps

Use the workspace below — downloads are free and run entirely in your browser.

  • Enter your app name and pick an icon preset or lettermark
  • Adjust colors and preview sizes from 16px to 512px
  • Download individual files or the full zip with README and HTML snippet

Perfect for favicons, PWAs, and MVPs

Replace placeholder favicons on launch day. Drop files into `public/` or Next.js `app/` routes. Paste the HTML snippet into your layout head.

When you need fonts, tokens, and agent rules too, add the icon to your brand kit and open the playground.

FAQ

Is the icon maker free?
Yes. Design, preview, and download SVG, PNG, favicon.ico, and the full zip pack without signing in.
What files are in the icon pack zip?
favicon.ico, favicon-16/32/48 PNGs, apple-touch-icon.png (180×180), android-chrome-192/512 PNGs, logo.svg, and a README with HTML setup notes.
How do I add icons to Next.js?
Copy favicon.ico to app/favicon.ico, apple-touch-icon.png to app/apple-icon.png, and PNG sizes to public/. Paste the provided link tags into app/layout.tsx metadata or your HTML head.
What's the difference between icon maker and logo maker?
Icon maker focuses on favicon and app icon downloads in every web format. Logo maker adds React component export for in-app nav logos. Both share the same design tools.

Related

Free tools

Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.