Free browser-based utility

Favicon Generator

Turn one logo or image into every icon a website needs: favicon.ico for browser tabs, an Apple touch icon for iPhone and iPad home screens, and 192 and 512 pixel icons for installable web apps. You also get the web app manifest and the HTML to paste into your pages.

Processed locally — your image stays on your device.

Need only an .ico file, with other sizes such as 24 or 256 pixels? Use the Icon Converter. To see or change the sizes inside an existing .ico, use the Icon Editor.

Choose image

PNG, JPEG, WebP, GIF, BMP, TIFF, SVG, AVIF, HEIC or ICO

Drag & drop your logo here or You can also paste an image from your clipboard.

Icon style

The recommended choices work for most websites.

Shape

FitShow the whole image FillCrop to a square

App and home-screen icons

Best compatibility — RecommendedUses a solid background for app and home-screen icons, so phones and computers are less likely to add a background of their own. Keep this if you're unsure.

Preserve transparencyKeeps transparent space around your web app icons. Choose this when that look matters to you. Some devices may add their own background or spacing.

Background colour

Hex colour

Web app details

Used in site.webmanifest when someone installs your site or adds it to a home screen.

Site or app name

Short name optional

Theme colour

Theme hex colour

Start page

Display

Your favicon files

Upload them to your website's root folder.

HTML for your pages

How to add a favicon to your website

Choose your logo. A square image at least 512 pixels wide, or an SVG, gives the sharpest icons.
Pick Fit to show the whole image or Fill to crop it to a square, and keep Best compatibility unless you have a reason not to.
Enter your site's name, then select Create favicon files.
Download the ZIP, unzip it, and upload the files to your website's root folder, next to your home page.
Paste the three lines of HTML inside the <head> of every page. Browsers can take a while to show a new favicon, because they keep the old one for a time.

If your website lives in a subfolder rather than at the root of its domain, change the / at the start of each path in the HTML and in site.webmanifest to that folder.

What each file is for

File	Size	Used by
`favicon.ico`	16, 32 and 48 px in one file	Browser tabs, bookmarks and history, and Windows shortcuts
`apple-touch-icon.png`	180 × 180 px	iPhone and iPad when someone adds your site to the home screen
`icon-192.png`	192 × 192 px	Android and computers when your site is installed as an app
`icon-512.png`	512 × 512 px	Larger app icons and start-up screens
`site.webmanifest`	Text	Tells browsers your site's name, colours and app icons
`favicon-links.html`	Text	The HTML to paste into your pages, kept with the files for later

A manifest with these icons is part of what browsers look for before offering to install a site, but on its own it does not make a site installable. Browsers also check other things, such as whether the site uses HTTPS.

Best compatibility or Preserve transparency?

Both are valid choices; they trade predictability for control. Platforms show app icons on many backgrounds and in many shapes. Current web app guidance from web.dev warns that a transparent icon may be given a background chosen by the device, so Best compatibility puts your chosen colour behind the logo and the icon looks the same everywhere.

Preserve transparency keeps the transparent areas of the 192 and 512 pixel icons, for logos whose shape matters. The device then decides what appears behind them; Safari, for example, adjusts the spacing around transparent icons. Either way, the browser-tab favicon.ico keeps its transparency, and the Apple touch icon keeps a solid background because iPhone and iPad can fill transparent areas with black.

Doodleden's icons are ordinary square icons. Some platforms also use special "maskable" icons that are designed for cropping into circles and other shapes; Doodleden does not label these files as maskable, because that needs extra space around the logo that it does not add yet.

Private by design

Your image is read, turned into icons and packaged inside your browser. It is not uploaded to a Doodleden server, and nothing about it is stored.

Files are processed in your browser and are not uploaded to or stored by Doodleden. This site is funded by advertising; our ad partners use cookies and similar technologies as described in our privacy policy.