Generate Favicon from Image

1. Upload Image

2. Preview

Image preview
Image Preview

Generate Favicon from Text

1. Enter Text & Choose Colors

2. Preview

Text Preview

Generate Favicon from AI

1. Describe your SVG Icon

2. AI Generated SVG Preview

AI SVG Preview

3. SVG Code

Generate Favicons Package

Once you have a source (from Image, Text, or AI), click below to generate the full package.

Generates multiple PNG sizes, a basic .ico, and a webmanifest file.

Download Package

Generate the package to enable download.

Installation Instructions

1. Prepare Files

First, use the download button above to download the favicons_package.zip file. Unzip it, and place the following files in the root directory of your website:

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico (typically 32x32)
  • site.webmanifest
  • (Optional) favicon.svg (if downloaded from AI tab)

2. Add Links to HTML

Next, copy the following link tags and paste them into the <head> section of your HTML pages. If you are using the SVG favicon, you might prefer it for modern browsers:

<!-- Recommended PNG Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">

<!-- Optional: For Scalable SVG Favicon (modern browsers) -->
<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg"> -->