Frequently Asked Questions (FAQ)

What's the best source image format to use (PNG, SVG, JPG)?

For maximum quality, the short answer is: use SVG whenever possible.

SVG (Recommended): As a vector format, it can be resized to any dimension (from 16x16 to 512x512) without any quality loss. IcoSmith will render it perfectly at each size before applying optimization filters.
PNG: This is the second-best option, especially if you need a transparent background. Use a high-resolution PNG (at least 512x512 pixels) to ensure we have the most image data to work with during resizing.
JPG/JPEG: Only use this if it's your only option. The format doesn't support transparency, and its compression can introduce artifacts that become more noticeable when the icon is optimized for small sizes.

Why does the ZIP package include so many different files? Don't I just need `favicon.ico`?

The favicon.ico file is the legacy format, and it's still important for maximum browser compatibility. However, the modern web ecosystem requires multiple icons for different platforms:

apple-touch-icon.png: Used when someone saves your site to the home screen of an iPhone or iPad.
android-chrome-*.png: Used by Android devices for the same purpose, and also by the site.webmanifest.
site.webmanifest: A configuration file that allows your site to be installed on a home screen as a Progressive Web App (PWA).
safari-pinned-tab.svg: A special vector icon that Safari on macOS uses when a user pins your tab.

IcoSmith generates them all so your site will look professional on every platform, with no extra effort.

Are my files safe? Where is my image uploaded?

Nowhere. IcoSmith is a 100% client-side tool.

This means all image processing happens directly in your browser, on your own computer. Your image is never sent over the internet to a server. This approach guarantees both total privacy and maximum speed.

How does IcoSmith keep icons sharp at 16x16 pixels?

It's not just a resize. A standard resize of a large image to 16x16 pixels inevitably causes blurring. We use a two-step process: first, we resize the image using high-quality algorithms. Then, we apply a custom sharpening filter. This filter enhances the edges and contours of the image, counteracting the blur and restoring clarity.

What’s the right way to add the favicons to my HTML?

After conversion, IcoSmith generates a ready-to-use HTML snippet. Just copy and paste it inside your site's <head> tag. It looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">