Generate favicon from image
Upload a raster image and use padding to keep important details away from the edges. The browser processes the file locally and creates the final favicon assets without a server upload.
Generate a Favicon
Create a complete favicon package from an image, logo, SVG, text or emoji. Generate favicon.ico, PNG sizes, Apple and PWA icons, a manifest and ready-to-paste HTML without uploading your source file.
1
Choose your source
Upload a logo or build an icon from text or emoji.
2
Style the icon
Tune spacing, shape, colors and image fit.
3
Generate the favicon package
Create browser, Apple and web app icon files.
favicon.ico 16 / 32 / 48
PNG favicons 16 / 32 / 48
Apple touch icon 180
Web app icons 192 / 512
site.webmanifest JSON
Choose a source or use the default text icon, then generate your package.
Install the favicon
Copy the generated HTML and manifest
Upload the files from the ZIP to your site root, then add the tags to the document head.
HTML head tags
site.webmanifest
Generate a favicon from an image, logo or SVG
Use the Image / SVG option when you already have a logo, app mark or simple brand graphic. The generator accepts PNG, JPG, WebP and SVG files, draws the artwork into each required square canvas, and exports browser and app icon sizes. Use Contain when the complete logo must remain visible. Use Cover when edge-to-edge cropping is acceptable.
SVG to favicon generator
SVG is useful when the source artwork is vector-based. This tool renders the SVG at each target size and packages PNG and ICO outputs for broad compatibility.
Create favicon from logo
Square or nearly square logo marks work best. If your logo is wide, use contain mode and extra padding, or create a simplified monogram for very small favicon sizes.
Generate favicon from text or emoji
Switch source modes to make a favicon from initials, a single character or an emoji. Choose foreground and background colors, then preview how the result reads at 16 pixels.
What favicon sizes should a modern website include?
A practical package should cover traditional browser favicons and larger home-screen or web-app icons. This generator builds 16×16, 32×32 and 48×48 PNG images and combines those sizes into favicon.ico. It also creates a 180×180 Apple touch icon plus 192×192 and 512×512 icons referenced by the generated web manifest.
How to add the generated favicon to HTML
After generating the package, download the ZIP and upload its files to the public root of your website. Copy the generated link tags into the page <head>. Browsers and devices cache favicons aggressively, so an old icon can remain visible for a while even after the files change. Using consistent filenames and verifying the URLs directly helps distinguish a caching delay from a missing asset.
Google favicon requirements for search results
For Google Search, publish a crawlable favicon link on the site home page and keep the favicon URL stable. Google's current guidance requires a square icon of at least 8×8 pixels and recommends an icon larger than 48×48 pixels so it can render well across search surfaces. Googlebot must be able to crawl the home page and Googlebot-Image must be able to crawl the favicon file.
Use a square favicon
Keep the source at a 1:1 aspect ratio. This generator creates square browser, Apple and PWA assets from the same design.
Keep the favicon URL stable
Avoid changing the favicon path on every redesign. A stable URL makes recrawling and cache refreshes easier to reason about.
Make the file crawlable
Do not block the favicon file from image crawling, and make sure the home page that declares the icon remains crawlable.
Use a recognizable brand mark
Choose a simple icon that still represents the site at small sizes. Search engines may choose not to display a favicon even when technical requirements are met.
Reference: Google Search favicon documentation.
Install the favicon on HTML, WordPress or Next.js sites
Plain HTML
Upload the generated files to a public path and add the generated <link rel="icon">, Apple touch icon and manifest tags inside the document <head>.
WordPress
Use the site's Site Icon or favicon setting when your theme exposes one, or add the generated files and link tags through your normal theme or deployment workflow. Confirm the final public favicon URL after publishing.
Next.js and app frameworks
Use the framework's current icon or metadata convention and supply the generated browser and app icons. The important checks are the final HTML link tags, public file URLs and cache behavior—not the framework name itself.
After deployment
Open the favicon URL directly, confirm a 200 response, inspect the rendered HTML, then allow browser and search caches time to refresh.
Favicon design tips for tiny sizes
A favicon is not a miniature billboard. At 16×16 pixels, thin strokes, detailed wordmarks and subtle gradients can collapse into visual noise. Prefer a bold silhouette, strong foreground/background contrast and enough negative space around the mark. Always inspect the 16×16 preview before downloading the final package.
Privacy: your image stays in the browser
The favicon editor uses browser image and canvas APIs to render the selected source. The source file does not need to be sent to Smart Web Utility to generate the icon files. This makes the tool suitable for unpublished logos and in-progress design assets that you do not want to upload to a third-party favicon service.
Frequently asked favicon questions
How do I generate a favicon from an image?
Choose Image / SVG, select a PNG, JPG, WebP or SVG file, adjust fit and padding, then click Generate favicon files. Download the ICO alone or the full ZIP package.
Can I create a favicon from SVG?
Yes. SVG files are accepted as source artwork and rendered into the raster sizes needed for PNG and ICO compatibility.
Can I generate a favicon from text or emoji?
Yes. Use Text / Emoji mode for initials, letters, symbols or emoji, then choose colors, padding and corner radius.
Why does my old favicon still show?
Browsers, operating systems, launchers and search services can cache favicons separately. Verify the new favicon URL loads correctly, then allow cached copies to refresh.
Does favicon.ico still matter?
It remains a useful compatibility fallback. Modern sites can also publish PNG and manifest icons, which is why this generator provides both.