1001Ferramentas
🌐 Generators

Complete Favicon Package Generator

From an image, generate a complete zip with ICO, favicon-16/32, apple-touch, Android Chrome 192/512 and site.webmanifest for PWA.

O zip contém: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180), android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest.

The complete favicon package: every format, every device

A modern website does not have a favicon — it has a package. Each browser, OS and PWA scenario demands a slightly different file: Chrome prefers SVG, Safari needs apple-touch-icon, Microsoft Edge tiles read browserconfig.xml, and Android home-screen icons come from a Web App Manifest. Shipping only a 16x16 favicon.ico means low-resolution thumbnails on Retina displays, blurry icons when users add the site to their home screen, and an ugly grey placeholder in the Windows Start menu.

Contents of a complete package

  • favicon.ico — multi-resolution 16, 32 and 48 px ICO, still required by older Edge and Safari desktop bookmarks
  • favicon.svg — vector, scales infinitely, supports dark-mode via prefers-color-scheme
  • favicon-16x16.png and favicon-32x32.png — explicit raster fallbacks
  • apple-touch-icon.png — 180x180, used when an iOS user taps Share → Add to Home Screen
  • android-chrome-192x192.png and android-chrome-512x512.png — referenced by the Web App Manifest for PWA install
  • mstile-150x150.png — Microsoft tile pinned to the Windows 10/11 Start menu
  • safari-pinned-tab.svg — monochrome SVG for Safari pinned tabs (legacy macOS)
  • site.webmanifest — PWA manifest with icons[], theme_color, background_color
  • browserconfig.xml — Microsoft tile configuration

HTML markup to drop into <head>

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Order matters loosely — the browser picks the best match for the requested size. SVG wins where supported; the PNGs and ICO are explicit fallbacks for the rest. Serve everything with a long Cache-Control: max-age=31536000, immutable through your CDN.

Tools and integrations

  • RealFaviconGenerator (Philippe Bernard) — the de facto reference, includes a validator
  • Favicon.io — simpler, ideal for text- or emoji-based favicons
  • Favic-o-Matic — older but still produces every variant in one shot
  • favicon-webpack-plugin / vite-plugin-favicon — auto-generate the package at build time from a single source
  • WordPress — add_theme_support('custom-logo') plus dropping the package in the theme root

Dark mode, brand and common mistakes

Only SVG favicons can react to dark mode — embed <style>@media (prefers-color-scheme: dark){...}</style> inside the SVG. ICO cannot, so a logo that is dark on light loses contrast on a dark Chrome tab. The favicon should look like a miniature of the logo, not a different shape — brand consistency is the most common miss. Other recurring errors: forgetting apple-touch-icon.png (results in a blurry low-res screenshot on iOS home screens), shipping a square logo without padding (Apple crops a 12% safe area), and forgetting to update the manifest's theme_color to match the new palette.

FAQ

Is the legacy ICO still necessary in 2026? Yes — Safari macOS desktop bookmarks and a long tail of corporate IE-derived browsers still request /favicon.ico by default. It is also the only file most crawlers look for at the root.

How many PNG sizes do I really need? Four to six minimum: 16, 32, 180 (apple-touch), 192 and 512 (Android/PWA). Skipping 192/512 breaks the PWA install banner.

How do I validate the install? Drop the deployed URL into realfavicongenerator.net validator — it lists each platform's verdict in 30 seconds.

SVG alone, since browsers support it? No. Slack, WhatsApp, Discord and many crawlers still parse only ICO or PNG for link previews. Ship both.

Related Tools

✒️

Handwriting Generator

Convert typed text into an image with handwriting appearance. Useful for adding a personal touch to digital work.
📋

Resume Generator

Fill a simple printable A4 CV from a form with personal data, education and experience.
🔖

Favicon Generator

Generate a favicon from text/emoji in all common sizes (16, 32, 48, 64, 192, 512). PNG download.