Favicon Generator
A small mark that feels like you. Create your website icons, check the tiny details and save a complete package that is ready to install.
One mark becomes a tab icon, an app icon and a package.
Favicon generator is in your dock. Everything you started is still there.
Make a small impression count.
Shape your mark, check it at 16 pixels and leave with the files your website needs.
Give your website a face.
Drop a logo here. Or start with initials or an emoji.
PNGJPGWebPAVIFSVGGIF+1
No CSS shrinking.
Apple gets a solid background.
The device rounds its corners.
Context previews are illustrations. Browser and device appearance can vary.
Every file has a job.
Select a file below. The secondary Save button saves just that file.
Copy code in the file bar copies this panel. A manifest alone does not make your site installable.
Your image and generated icon files stay in this tab.Typed text and design settings save privately. Artwork, filenames, previews and image placement stay in this tab.Saving details
How to make a favicon
Start with your mark
Choose an image, type initials or pick an emoji. Try the example if you want to explore first.
Make every pixel count
Trim transparent edges, adjust the spacing and check actual-size icons in both tab themes.
Save and install
Review Files & code. Save the package, copy the installation code and put the files on your website.
Using the favicon studio
Start with a simple mark that remains recognisable at 16 pixels. Use Try an example to explore the studio with a locally drawn leaf.
Choose an image, initials or emoji
Image opens your existing artwork. Drop it anywhere on the page, paste a copied image or use the picker. Use initials and Use emoji create a mark without a source file. You can also choose either mode in the settings.
| Control | What it does |
|---|---|
| Choose your image / Open another | Open one image. Open another replaces the current artwork and recentres its placement. |
| Your initials / Your emoji or symbol | Enter one to three visible characters. Emoji buttons fill the symbol field. |
| Typeface | Choose Geometric sans, Humanist sans, Classic serif or Monospace for initials. |
| Clear | Remove the artwork and return to the drop zone. General design and website settings stay available. |
Shape the browser icon
Shape changes the browser icon’s outer edge. Whole image keeps its proportions; Fill and crop fills the available square. The tool never stretches your logo.
Trim empty transparent edges finds the visible artwork before fitting it. It cannot remove an opaque white background. Large sources are sampled at up to 1024 pixels for this trim, so inspect fine edges.
| Control | When to use it |
|---|---|
| Browser padding | Add space around the mark. The percentage is the inset on each side. |
| Transparent tab background | Let the tab show through. Turn it off to choose a solid Tab background. |
| One-colour mark, light & dark | Replace the mark’s colours while keeping its alpha shape. Set Mark colour and Dark-tab mark separately. |
| Dark-tab background | Set the solid background for dark-tab variants when transparency is off. |
| Fine-tune placement | Adjust Zoom, Horizontal position and Vertical position. Drag the composition for the same movement. |
| Centre and reset zoom | Return placement to the centre and zoom to 100%. |
Check the tiny result and the phone icons
The 16 pixel test enlarges a real 16 × 16 render without smoothing. The Actual pixels row shows separate 16, 32, 48 and 96 pixel renders. Use the light and dark tabs to catch a mark that disappears against one theme.
App background fills Apple and app icons with an opaque colour. App icon inset changes their breathing room. Maskable icons use their own centred fit, keeping the whole mark inside the safe circle. Show safe circle changes only the preview overlay.
Set your website details and installation paths
Open Website & installation to name the app and choose its folder. These fields update the manifest and installation code together.
| Field | What it changes |
|---|---|
| Site name / Short name | The manifest names. Site name also labels the browser preview. |
| Asset folder | The website path to the icon package, such as /assets/icons/. It is a local path, not a URL to fetch. |
| App start path | The page the installed app opens. Its parent folder becomes the manifest scope. |
| Theme colour | The manifest theme and HTML theme-colour declaration. It does not recolour the icon. |
Save one file or the whole package
Files & code lists the exact package. Select a file to change the secondary Save button. The main Save button saves every file through floi’s shared ZIP or separate-files choice. Its arrow lets you change that choice.
Switch between Installation and Manifest, then use Copy code or Copy manifest in the file bar. Installation supports HTML, Astro, React / Vite and Next.js App Router. The package always includes head.html and README.txt.
Open in passes the selected file to another tool. Share uses the package. For more room, choose Narrow, Wide or Full at the top right of the tool.
Keyboard controls
Focus the composition to move the mark with the keyboard. Ordinary form controls keep their usual browser keys.
| Keys | Action |
|---|---|
| Tab | Move between controls, previews and package files. |
| Arrow keys | Move the focused composition one position step. |
| Shift + arrow | Move the composition ten steps. |
| Ctrl + O or ⌘ + O | Choose an image. |
| Ctrl + S or ⌘ + S | Save the whole package using your batch preference. |
What it will not do
Raster inputs are limited to 20 MB, 25 megapixels and 16000 pixels per side. SVG inputs are limited to 2 MB and 10000 elements. SVG scripts, external resources, embedded images and animation are refused. Animated raster images contribute a still, not an animated favicon.
The tool cannot recover fine detail from a small source or guarantee readability. SVG text can depend on fonts installed on the viewing device. It does not inspect your hosted website, create a service worker or guarantee that browsers or Google will display your chosen icon.
Frequently asked questions
Is this favicon generator free?
Yes. Make and save the complete package without an account, payment or a floi watermark. There is no daily export quota.
Can I convert PNG to a real ICO file?
Yes. The ICO contains separate 16 × 16, 32 × 32 and 48 × 48 pixel images. It is a multi-resolution ICO, not a PNG with a different filename. Transparent pixels are preserved.
Can I make a favicon from text or an emoji?
Choose Initials or Emoji. Enter one to three characters and choose the spacing and colours. Text has four typeface choices. Emoji are rendered using this device’s fonts, and the saved PNG and ICO keep that appearance.
Does it create a vector SVG from my PNG?
No. SVG export is included only when your source is a self-contained SVG. Raster images, initials and emoji produce raster icons. The tool does not trace artwork or wrap a PNG in SVG and call it a vector.
How do the light and dark favicon colours work?
Enable One-colour mark, light & dark. The tool colours the mark’s visible pixels, preserving its transparency. Choose both mark colours. The package includes dark PNGs with media-aware HTML. An SVG source also gets an adaptive SVG. ICO and app icons use the light mark colour.
Are my logo or generated files uploaded?
No. Your artwork, filenames, previews and generated files stay in this browser tab. When signed in, your typed initials, website details and general design settings save automatically to your private account. Image placement stays in the tab. Add the image again after a reload.
Something missing? Request a feature