Q3
Your image stays in your browser. Nothing is uploaded to our server.
Drop your logo here
or click to browse your files
PNG, JPEG, or WebP — up to 20.0 MB
Preview
Upload an image to see a live favicon preview.
Web app icons
192×192 and 512×512 icons are commonly referenced in a web app manifest. Adding this snippet doesn't by itself make a site installable as a PWA — a manifest file and other requirements are also needed.
{
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}What Is a Favicon?
A favicon is the small icon a browser shows for a website — in a tab, a bookmark, browser history, or a list of open windows. The name is short for "favorite icon," from its original use in browsers' favorites lists.
Why Does a Website Need a Favicon?
It helps visitors recognize your site at a glance among a row of browser tabs or a long list of bookmarks, and it's used as the icon when a page is saved to a phone's home screen. It's primarily a usability and branding detail, not a documented search ranking factor.
What Size Should a Favicon Be?
It depends on where it's displayed. Browser tabs commonly use 16×16 or 32×32, some Windows contexts use 48×48, iOS home screens commonly use 180×180, and Android/web app icons commonly use 192×192 or 512×512. There's no single universal size every browser requires — this tool generates all of these so you can cover the common cases in one pass.
What Is favicon.ico?
A .ico file is a container format that can hold one or more icon images. Placed at a site's root as favicon.ico, some browsers and tools will pick it up automatically even without an explicit link tag, which is why many sites still include one alongside PNG favicons.
PNG Favicon vs ICO Favicon
Modern browsers support both. A PNG favicon, referenced with a <link rel="icon" type="image/png"> tag, is simple and widely supported today. A .ico file can bundle multiple sizes in one file and is still checked automatically by some browsers at a site's root by convention. This tool generates both: individual PNGs for each selected size, and a favicon.ico bundling whichever of 16×16, 32×32, and 48×48 you select.
What Is an Apple Touch Icon?
The icon iOS/iPadOS uses when someone adds your page to their home screen, referenced with <link rel="apple-touch-icon">. The commonly recommended size is 180×180, which this tool generates as apple-touch-icon.png — a filename some tools also check for automatically at the site root.
What Are 192×192 and 512×512 Icons?
These sizes are commonly referenced in a web app manifest's icons array, used for Android home screen shortcuts and installed web apps. Generating these two sizes doesn't, by itself, make a site installable as a Progressive Web App — a manifest file and other requirements are also needed — but they're a genuinely useful pair to have ready if you build one.
How to Add a Favicon to HTML
Upload the generated files to your site's public or static assets root, then paste the HTML code this tool generates into your page's <head>. Only tags for the sizes you actually selected and downloaded are generated.
How to Add a Favicon in WordPress
Most modern themes support setting a "Site Icon" from Appearance → Customize (or Settings → General in newer WordPress versions) — upload the 512×512 PNG this tool generates there, and WordPress handles generating and serving its own favicon tags automatically.
How to Add a Favicon in Next.js
Recent versions of the Next.js App Router support special file names like favicon.ico, icon.png, or apple-icon.png placed directly in the app directory, which Next.js detects and serves automatically with the right metadata. This convention has changed across Next.js releases, so check the favicon/metadata files documentation for the version installed in your project before relying on a specific filename.
Common Favicon Mistakes
- Uploading only one size and expecting it to look sharp everywhere it's used.
- Starting from a small or blurry source logo and upscaling it to 512×512.
- Forgetting to upload the files to the exact paths referenced in the HTML.
- Expecting a transparent favicon to stay transparent after selecting a white or custom background.
- Assuming favicon.ico alone covers Apple Touch Icon and web app manifest use cases.
- Assuming a favicon change improves search rankings — it's a usability detail, not a ranking signal.
Frequently Asked Questions
Explore more
Compress the source logo first with our Image Compressor, check what metadata it carries with the Image Metadata Viewer & Remover, or create a matching QR Code for the same brand. Preview how your page looks when shared with Open Graph & Social Share Preview and in search results with the SERP Snippet Preview. Add structured data with our JSON-LD Schema Markup Generator, check existing page tags with the Meta Tag Checker, and generate a sitemap and robots.txt with our XML Sitemap Generator and Robots.txt Generator & Tester. Explore the rest of our free marketing tools, or see our web development services.
Related tools & resources
Related tools
- Image CompressorCompress JPG, PNG and WebP images online without uploading them. Runs entirely in your browser.
- Password GeneratorGenerate strong random passwords in your browser with custom length and character types. Nothing is uploaded.
- JSON MinifierMinify JSON by removing extra whitespace, check the size saved and download the result. Nothing is uploaded.
Learn more
- Web Development GuidesPlatform choice, launch sequencing, and the technical fundamentals every website needs before it goes live.
- Web DevelopmentSlow, hard-to-maintain websites quietly cap growth by hurting Core Web Vitals, SEO, and conversion rate.
Related articles
- Top IT & Software Companies in Dubai (2026 Guide)From global enterprise consultancies to homegrown unicorns, fintech disruptors, and boutique development agen…
- How to Build a Website in 2026: The Step-by-Step Launch ChecklistDomain to launch day, in order: the actual sequence of steps to build a website in 2026 without missing the s…