UlvixorFavicon Generator
Upload your logo or icon and automatically generate the standard favicon files for your website: a favicon.ico with 16, 32, and 48 pixel versions, and a 180×180 pixel apple-touch-icon.png for Apple devices. Everything is generated with canvas directly in your browser. The file is never uploaded to any server.
How it works
- Select your logo or icon from your device using the file picker; ideally a square image.
- Press 'Generate favicon' to start the process.
- The tool generates a multi-resolution favicon.ico with 16, 32, and 48 pixel versions, reusing the same logic as the ICO Converter.
- In parallel, it generates a 180×180 pixel apple-touch-icon.png, the size expected by Apple devices for home screen icons.
- Download each file separately and upload them to the root of your site, linking them from the <head> of your HTML.
Use cases
- Generate the favicon.ico and apple-touch-icon.png of a new website from the brand logo.
- Replace a project's generic favicon with your own without using design software.
- Create consistent icons so your site looks the same in the browser tab and on an iPhone home screen.
- Regenerate the favicon files after updating an existing site's logo.
Use cases
- Generate the favicon.ico and apple-touch-icon.png of a new website from the brand logo.
- Replace a project's generic favicon with your own without using design software.
- Create consistent icons so your site looks the same in the browser tab and on an iPhone home screen.
- Regenerate the favicon files after updating an existing site's logo.
Common mistakes
- Uploading a rectangular, not square, image and being surprised that the favicon looks stretched or distorted.The tool fits the image to each icon's square dimensions without cropping, so a non-square image gets distorted. Use a square image as the source, or crop it to a square first with the Image Cropper tool.
- Uploading a logo with a lot of fine detail expecting it to still look sharp at 16×16 pixels.At sizes as small as 16×16, fine details and text get lost or look blurry. For best results, use a simple icon, for example just your brand's symbol without text, as the source image.
- Uploading an animated GIF expecting the favicon to preserve the animation.This tool uses a single static image as the source; if you upload a GIF, only the first frame is used, with no animation.
Frequently asked questions
No. Both the favicon.ico and the apple-touch-icon.png are generated entirely in your browser using canvas. The image is never sent to any server.
Because the tool fits your image to square dimensions (16×16, 32×32, 48×48, and 180×180) without cropping it. If the source isn't square, the image is stretched to fit and looks distorted.
A favicon.ico (with 16, 32, and 48 pixel versions) and an apple-touch-icon.png (180×180 pixels). Upload both files to the root of your website and link them from the corresponding <link> tags in the <head> of your HTML.
This tool specifically generates favicon.ico and apple-touch-icon.png, the two files most commonly used for desktop browsers and Apple devices. It doesn't generate the full set of icons some PWAs require for Android, such as different sizes in manifest.json.
Alternatives
Online generators like RealFaviconGenerator offer more advanced options, such as specific icons for Android or Windows. This tool covers the most common case, favicon.ico and apple-touch-icon.png, quickly and without uploading your logo to any external server.