Everything people ask before and after running the favicon generator: which sizes matter, PNG versus ICO versus SVG, how to add the icon to HTML, React, Next.js and WordPress, and what to do when Google will not show it.
How do I create a favicon for my website?
Upload a square image or logo to the free favicon generator, adjust the size, background and corner radius in the live preview, then click Download. The zip contains favicon.ico, 16x16, 32x32 and 96x96 PNG favicons, a 180x180 apple-touch-icon, the 192x192 and 512x512 web app manifest icons, a site.webmanifest file and an HTML snippet.
Copy the files to the root of your website, paste the snippet into the <head> of your pages and deploy. Browsers cache favicons aggressively, so open a private window to see the new icon.
How do I create a favicon from a PNG?
Drop the PNG into the favicon generator. It converts the image into every required size and packages favicon.ico together with the PNG favicons, so you do not need a separate PNG to ICO converter.
For the sharpest result start with a square PNG of at least 512x512 pixels. Transparent PNGs keep their transparency in the browser tab icons, while the apple-touch-icon automatically receives an opaque background because iOS renders transparency as black.
How do I convert a logo into a favicon?
Crop the logo to its symbol or a single letter, because a full wordmark is unreadable at 16 pixels. Upload that mark to the favicon generator, give it a little padding and a background colour if the logo is thin, and download the favicon package.
Check the 16x16 preview before downloading. If the shape turns into noise, simplify it further: one bold shape with strong contrast against both light and dark tab bars works best.
What size should a favicon be?
A modern website ships several sizes: 16x16 and 32x32 for browser tabs and bookmarks, 48x48 inside favicon.ico for Windows, 96x96 for search results and desktop shortcuts, 180x180 for the iOS apple-touch-icon, and 192x192 and 512x512 for the web app manifest used by Android and installable web apps.
Design at 512x512 or larger and let the generator downscale. Browsers pick the closest size to what they need, so providing the real sizes looks crisper than a single large image the browser has to shrink.
Should a favicon be PNG, ICO or SVG?
Use all three where it makes sense. PNG is the workhorse understood by every browser. ICO is a container for several sizes and is still read from /favicon.ico by Windows and older browsers. SVG stays crisp at any size and supports dark mode, but Safari does not use it, so always ship PNG and ICO alongside an SVG favicon.
How do I add a favicon to HTML?
Place the favicon files at the root of your site and add link tags inside the <head> element of every page. The favicon generator includes this snippet as favicon-snippet.html in the download.
In a Vite or Create React App project, copy the favicon files into the public folder and add the link tags to public/index.html (Create React App) or index.html at the project root (Vite). Files in public are served from the site root, so the href values stay /favicon.ico, /favicon-32x32.png and so on.
If your React app is rendered by a framework such as Next.js or Remix, use that framework's convention instead of editing an HTML file by hand.
How do I add a favicon to Next.js?
With the App Router, drop favicon.ico into the app directory and Next.js adds the link tag automatically. You can also add icon.png and apple-icon.png next to it for the PNG and Apple touch icons, or list the files under the icons field of the metadata export in app/layout.tsx. With the Pages Router, put the files in public and add the link tags with next/head.
Open the WordPress admin, go to Appearance, Customize, then Site Identity, and upload a square image of at least 512x512 pixels as the Site Icon. WordPress generates the browser and app icon sizes and adds the tags for you.
If you want full control over the ICO, PNG and manifest files, upload the generated package to your site root and add the HTML snippet to your theme's header.php or through a header-scripts plugin. Remove the Site Icon first so the two sets of tags do not compete.
What favicon sizes does Google recommend?
Google asks for a square favicon of at least 8x8 pixels and recommends 48x48 pixels or larger, ideally a multiple of 48 such as 96x96 or 144x144, or an SVG. Google supports ICO, PNG, GIF, JPG and SVG files.
The icon must be referenced with a link rel="icon" tag on your home page, hosted on the same domain and crawlable by Googlebot. The 96x96 PNG included in the favicon download is a good match for these rules.
Can I use SVG as a favicon?
Yes. Chrome, Firefox, Edge and Opera use SVG favicons and render them crisply at any size, and an SVG favicon can switch colours in dark mode with a prefers-color-scheme media query inside the file. Safari ignores the SVG and falls back to the PNG or ICO, so always include those too.
favicon.ico is the original favicon format introduced by Internet Explorer. An ICO file is a container that can hold several images at different sizes, typically 16x16, 32x32 and 48x48, so the browser picks the frame that fits. Modern ICO files simply embed PNG data for each frame.
Every browser still understands it, and many tools request /favicon.ico directly without reading any link tag, which is why it remains part of a complete favicon set.
Where should favicon.ico be placed?
Place favicon.ico at the root of your website so it is served from https://yourdomain.com/favicon.ico. Browsers, feed readers and bookmarking tools request that exact URL automatically when no link tag is present.
Adding a link rel="icon" tag as well lets you point to PNG or SVG versions and covers browsers that only follow the tag. Keep both in place.
Why is my favicon not showing in Google?
The most common causes are that the icon is not linked from the home page with a link rel="icon" tag, it is blocked from Googlebot by robots.txt, it is not square or is smaller than 48x48, it is hosted on a different domain, or Google simply has not recrawled the home page yet.
Fix the tag and file, then use the URL Inspection tool in Google Search Console to request indexing of your home page. Favicon updates in search results can take days or weeks to appear after the crawl.
Still deciding on sizes or manifest fields? The favicon guidelines cover the full specification, and the free favicon generator builds the whole package from a single image.
