Favicon Generator nothing stored

From one logo to the browser and phone icon files

The pack includes a combined browser icon with several sizes inside, plus separate images for tabs and phone shortcuts. Tab images have sides of 16 and 32 pixels; the Apple image is 180 pixels square, and the Android images are 192 and 512 pixels square.

Use Download all for an archive containing the icons, site.webmanifest and favicon-head-tags.html. The illustrated preview is a contact sheet for checking the result, not the icon file to install on your site.

Fit a wide logo inside a tiny square

Fit offers Whole image or Fill square; its starting setting is Whole image. Keeping the complete image preserves a wide logo but makes it smaller within the square. The alternative crops from the center and can cut off letters or an off-center subject.

Padding starts at 0%. Increasing it adds space around the artwork and reduces the visible mark. If the source already has empty margins, adding more can make the tab icon difficult to recognize. Prepare a tighter source crop when needed.

Transparent tab icons and the solid Apple exception

Background offers Transparent, White or Color, starting with Transparent. Keeping transparency preserves empty areas already present in the source; it does not erase a white rectangle baked into the artwork. Use the separate Background Remover if that rectangle needs cutting away.

In Advanced, Icon shape offers Square, Rounded or Circle. Clipping can make the mark round, with transparent pixels outside the shape. The Apple home-screen image is an exception: the engine places it over a solid square using the selected background color, or white when transparency is selected.

Check the mark at tab size before publishing

Inspect the small icon sizes as well as the light and dark tab previews. Fine lines, long names and closely spaced details can merge when the image is reduced. A clean symbol or a short monogram is easier to inspect than a detailed scene.

The engine resamples your artwork; it does not redraw tiny lettering or provide a pixel-editing brush. If the small version is unclear, simplify the source design. A dark mark may also disappear against a dark tab, so check its contrast before choosing a transparent background.

Install the icon pack with its matching head tags

Extract the archive and place its files at the root of your website. Open favicon-head-tags.html and copy the supplied tags into the head of your page template. Those tags point to root-level paths; moving the files into another folder means updating the references too.

The manifest starts with blank name and short_name fields. Fill those in for your site, and keep its icon paths aligned with where the files are served. Generating this pack does not install it on a website or turn the site into a finished web app. If an old icon persists, check the deployed paths and test in a fresh browser session.

Keep the source logo local while building the pack

The browser reads the source image, draws the master icon and builds the output files on your device. The logo is not uploaded for this conversion. Building the icon files on your device still requires page code to load and can involve website service requests.

The browser on your phone or computer needs enough memory to decode the full logo before drawing the smaller icons. A small output does not make a very large source effortless to open. There is no verified processing time or input size that works on every phone.

Package an existing mark or create the artwork first

This generator begins with an image. It has no drawing canvas, letter-entry mode or prompt for inventing a new logo. Make initials or a hand-drawn symbol in your design editor, export an image, then bring that artwork here.

For a new concept from a written description, use the linked Ultra HD Image Generator. Inspect the generated artwork and simplify it if necessary before making the favicon pack. Creating a logo and preparing its browser files are separate jobs.

How do you use the favicon generator?

1. Choose your logo image

   Add a JPG, PNG, WebP or HEIC picture with a clear symbol or mark you want people to recognize.

2. Frame the icon

   Adjust Fit, Padding and Background. Open Advanced to change Icon shape.

3. Generate and inspect the pack

   Run Make favicons, then examine the tab previews and the phone icon before using the output files.

4. Save your result

   2 free downloads, 8 more after sign-in.

When is the free favicon generator enough?

Favicon Generator: questions and answers