Generator Favicon

BaruTren 🔥

Buat semua ukuran favicon dari satu gambar

Alat Gambar

Cara Menggunakan Generator Favicon

  1. 1Unggah gambar persegi (PNG direkomendasikan)
  2. 2Alat secara otomatis menghasilkan semua ukuran favicon standar
  3. 3Unduh ukuran individual atau ZIP semua file
  4. 4Copy the HTML snippet to add favicons to your website

Tentang Generator Favicon

Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.

Fitur Utama Generator Favicon

  • Generates six standard sizes: 16x16, 32x32, 48x48, 96x96, 180x180, and 512x512
  • Includes the 180x180 Apple Touch Icon for iOS home screen bookmarks
  • Individual download button for each size
  • Ready-made HTML link tag snippet for every generated size
  • PNG output with transparency preserved from source image
  • Instant browser-based generation — no upload required
  • Works best with square source images at 512x512 or larger
  • One-click copy for the full HTML snippet block

Format yang Didukung

Format Input

PNGJPGWEBPSVGGIFBMP

Format Output

PNG (all sizes)

A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.

Contoh

Add favicon to a new website

Upload the logo, click Generate Favicons, download all sizes, and paste the HTML snippet into your document head.

Input

512x512 square logo PNG

Output

Six PNG files (16 to 512px) plus HTML snippet

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

Input

New brand logo PNG

Output

Fresh set of all standard favicon sizes

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

Input

App icon PNG

Output

180x180 Apple Touch Icon PNG

Kasus Penggunaan Umum

  • Adding a complete favicon set to a new website project
  • Updating an outdated favicon with a refreshed brand logo
  • Generating the Apple Touch Icon for iOS home screen bookmarks
  • Creating all required icon sizes for a Progressive Web App manifest
  • Providing multiple favicon sizes for better browser and OS compatibility
  • Ensuring brand consistency with a matching favicon across all browsers

Pemecahan Masalah

Favicon appears blurry at small sizes (16x16, 32x32)

Solusi

Start with a source image of at least 512x512 pixels. The downscaling algorithm needs enough detail to produce a sharp small icon.

Favicon is not showing in the browser tab

Solusi

Clear the browser cache and hard-reload the page. Browsers aggressively cache favicons — even after updating the HTML, the old icon may persist for minutes.

Non-square source image appears distorted in output

Solusi

Crop your source image to a square first using the Crop Image tool, then generate the favicons from the square version.

Pertanyaan yang Sering Diajukan

Ukuran gambar berapa yang harus diunggah?

Minimal 512×512 piksel untuk hasil terbaik.

Format apa yang dihasilkan?

File PNG untuk semua ukuran ditambah file ICO multi-ukuran.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.

How do I add the favicons to my website?

Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.

Why is my favicon not showing after adding the HTML snippet?

Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.