Free · without registration

Favicon and Apple Touch Icon

Create appropriate website icons from your logo. Select the cutout and download all files with finished HTML integration. Your image will remain on your device.

Your image as a website icon

Select PNG, JPG or WebPUp to 10 MB and 16 megapixels. A clear motif with at least 512 × 512 pixels provides good starting data.

Appropriate imageEnhancement 1.0×Extent horizontalVertical section

Transparent backgroundBackground colour

The chessboard shows transparent surfaces and is not exported. Single-color backgrounds are especially suitable for Apple Touch icons.

32 × 32

48 × 48

180 × 180

Select an image to start the preview.

HTML for the <head> area

What does the Favicon package contain?

You get PNG favicons in 16, 32, 48 and 96 pixels. apple-touch-icon.png with 180 pixels and web app icons with 192 and 512 pixels. The file favicon.ico contains several sizes. In addition, there is a customizable manifest, the HTML code and a short installation manual.

How to Incorporate the Icons

Download the ZIP and unpack it.
Place the image files and site.webmanifest in the main directory of your website. For another folder, you need to adjust the paths in the HTML and Manifest.
Take over the link tags in the <head>-Area. Remove conflicting old icon details and replace the website name in the manifest.
Check the published files with the Favicon Checker. A CMS can have its own icon settings; then use the intended upload area.

What makes Favicon and Apple Touch Icon different?

Browser favicons help with recognition in tabs and bookmarks. The Apple Touch Icon is used for shortcuts on iPhone or iPad. The files are therefore named separately and of different sizes. A manifesto with icons alone does not yet make a website an installable web app.

For Google search results, the favicon must be under a stable, crawlable address. A correct icon does not guarantee a display. Google explains the Favicon requirements.

Frequent questions

Will my picture be uploaded?

No. Crop, preview and file generation run locally in the browser. There is no image upload.

Can I keep a transparent background?

Yes. Activate the transparency. However, an already opaque background in the initial image is not removed as a result.

Why does a small logo look fuzzy?

The generated files cannot supplement any missing image details. If possible, use a clear source file with at least 512 × 512 pixels and control the small preview.