Favicon Generator

The generator has three tabs and a live preview that redraws as you type, so you can adjust the icon until it reads clearly when small.

1. Choose a tab: Text, Image or Emoji.
2. Fill in that tab. On Text, enter 1 to 3 characters under Text, then set Font (Sans serif, Serif, Monospace, Friendly or Heavy), Text colour, Text size and Bold. On Image, drop a picture on the drop zone, click to choose one or paste it, then pick How to fit it: Crop to a square or Fit the whole picture. On Emoji, type or paste one emoji, or pick one of the 24 shown.
3. Set the Background colour, or tick No background (transparent). Then choose a Shape (Rounded square, Square or Circle) and adjust Padding.
4. Optionally type a Website name. It is used only in the manifest file.
5. Check the previews: a large 128 px one, true-size ones at 16, 32, 48, 64 and 180 px, and a mock browser tab that shows the icon beside your website name.
6. Press Download favicon package for one ZIP, or use the small buttons for a single file: favicon.ico, 32 px PNG, Apple icon or 512 px PNG.

A favicon is the small square icon that stands for a website. It appears in the browser tab next to the page title, in bookmarks and history lists, in the tab switcher on phones, and often beside a site name in mobile search results, though search engines decide what to show. When a visitor adds your site to a phone home screen, a larger icon is used instead.

The file favicon.ico lives in the root folder because browsers request yoursite.com/favicon.ico by themselves, even when a page has no icon tag. Putting it there means a basic icon works at once, and the link tags then point browsers to the PNG versions.

Several sizes are needed because each place shows the icon at a different size, and a large picture scaled down looks blurry. The generator draws every size separately from your design.

The ZIP holds favicon.ico (16, 32 and 48 px inside), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest and a README.txt. The Apple icon is always filled in: it uses your background colour, or white when you chose a transparent background. The manifest lists the name, a short_name cut to 12 characters, the two Android icons, theme_color, background_color and display set to standalone.

Worked example: type TW, keep the default indigo background (#4f46e5) and Padding of 8, and enter the Website name ToolsWish Free Tools. At 512 px the padding is about 41 px on each side, so the letters sit in roughly 430 px. At 16 px the margin is about 1 px. The manifest gets short_name ToolsWish Fr and theme_color #4f46e5. With No background ticked, theme_color becomes #ffffff.

Under the tool, three numbered steps cover the rest. Download the package. Upload all the files to the root folder of your website. Paste the five link tags shown in the box into the head of your pages, using the Copy code button. On WordPress you can skip the tags and upload the 512 px PNG under Appearance, Customize, Site Identity, Site Icon.

Tiny icons need bold, simple shapes. One or two characters stay legible at 16 px, and a thin font or a detailed picture turns to a smudge, so try the Heavy font or a plain emoji first. Prepare a photo or logo as a square first with the image cropper or the image resizer, and use the colour picker to find a matching hex code. Use the image converter if your source is in a format the browser cannot open.

Transparent backgrounds look fine in tabs, but Apple icons always get a solid background. The Apple icon is made as a full square in your background colour (white when the background is transparent), because iOS rounds the corners itself, while the Shape setting applies to the other sizes. The package is for ordinary websites. It does not create SVG favicons or dark-mode variants. Browsers cache favicons hard, so after uploading new files clear the cache or open the site in a private window to see the change. Add your title and description tags with the meta tag generator.