Back to Documentation

Getting Started with Favicon Generator

Welcome to the Favicon Generator! This guide will walk you through the simple steps to create a comprehensive set of favicons for your website.

Step 1: Upload Your Source Image

Navigate to the Favicon Generator tool. You'll see an upload area.

  • Choose a good source image: For best results, use a square image (e.g., 512x512 pixels or larger). Supported formats are PNG, JPG, and SVG.
  • Upload: Drag and drop your image onto the designated area, or click to browse and select the file from your computer.
Image Upload Area

Step 2: Preview Your Favicon

Once your image is uploaded, you'll be taken to the "Preview" tab. Here you can see:

  • A preview of your original uploaded image.
  • Simulated previews of how your favicon might look in different browser tabs and on various platforms (iOS, Android, Windows).

If you're not happy with the source image, you can click "Change Image" to upload a different one.

Step 3: Generate Favicon Package

When you're satisfied with the preview, click the "Generate Favicon Package" button. Our tool will process your image and create all the necessary favicon files and manifest information. This might take a few seconds.

Step 4: Download and Implement

After generation, you'll land on the "Download" tab.

  • Download Package: Click the "Download Favicon Package (.zip)" button. This will download a ZIP file containing all your generated icons and manifest files (like `favicon.ico`, various PNGs, `site.webmanifest`, etc.).
  • Extract Files: Extract the contents of the ZIP file into the root directory of your website.
  • Add HTML Code: Copy the provided HTML code. Paste this code into the <head> section of every HTML page on your website.
Download and HTML Code

That's it! Your website should now display your new favicons across various platforms and browsers. You can use our Favicon Checker tool for a simulated check of your setup.

What's in the Package?

The downloaded ZIP file typically includes:

  • `favicon.ico`
  • `favicon-16x16.png`, `favicon-32x32.png`
  • `apple-touch-icon.png` (and possibly other sizes)
  • `android-chrome-192x192.png`, `android-chrome-512x512.png`
  • `safari-pinned-tab.svg` (if generated)
  • `site.webmanifest`
  • `browserconfig.xml` (for Windows tiles)
  • Various `mstile-*.png` images for Windows

For more details on specific file types and best practices, please refer to our Favicon Best Practices guide.