Home / Favicon generator

Favicon generator

Drop your logo and get every icon your website needs: favicon.ico, Apple icon, app icons and manifest – with the matching HTML lines.

Drop your logo here

or tap to choose. Square works best, PNG or SVG.

Choose file

Step by step

  1. Drop your logo, ideally square and as a PNG with a transparent background or as an SVG.
  2. In “Website name (for the manifest)”, enter the name the site should appear under when someone installs it as an app on their home screen.
  3. Under “Background”, either keep “Transparent” or choose a colour as a square, rounded or circle. Set the shade under “Color”.
  4. Use “Padding” to decide how much space surrounds the logo. The preview shows every size from 16 to 512 pixels and updates instantly.
  5. Tap “Download everything as ZIP”. The HTML lines below the preview can be taken over directly with “Copy”.

What you can use it for

  • Your own website or blog: The icon appears in the browser tab, in bookmarks and in the history. Without a favicon, browsers show only a neutral placeholder there.
  • Online shop: A recognisable icon in the tab helps customers find your shop again among many open pages.
  • Web apps and dashboards: With the manifest and the 192 and 512 pixel icons, the site can be added to a smartphone home screen like an app.
  • Telling test environments apart: If you run a test and a live version of the same site, you can create an icon with its own background colour for each and see at once which tab you're working in.

What's in the ZIP?

  • favicon.ico with 16, 32 and 48 pixels – for all browsers.
  • apple-touch-icon.png (180 px) – when someone adds your site to the iPhone home screen.
  • icon-192.png and icon-512.png with site.webmanifest – for Android and installable sites.
  • einbauen.html with the lines for your page's <head>.

Upload all files to your website's root folder and add the HTML lines. In WordPress it's even simpler: upload a 512 px icon under Appearance → Customize → Site Identity.

Frequently asked questions

What should the logo look like?

Simple and bold. At 16 pixels fine details and text can't be read – often the initial letter or the symbol is enough.

Is my logo uploaded?

No. All icons are created in your browser.

My logo isn't square – will it be distorted?

No. It is fitted in completely and centred. A wide logo leaves space above and below, a tall one on the left and right.

When does a coloured background make sense?

When a dark logo would barely show on dark browser tabs, or for home screen icons, which iPhones don't display as transparent. A round or rounded shape then looks like an app icon.

I still see the old icon after installing it.

Browsers cache favicons stubbornly. Reload the page bypassing the cache or open it in a private window. Bookmarks update after a while too.

What's in the manifest?

The name, a short form cut to 12 characters, the two app icons, the chosen colour as the theme colour and display as a standalone app. The file is plain text and can be edited in any editor.

Do I need to upload every file?

For the browser tab, favicon.ico is enough. The other files are needed for the Apple icon, for Android and for sites that can be installed as an app.

My files aren't in the root folder.

Then adjust the paths. In the HTML lines and the manifest they start with a slash that points to the root folder.