Digitools .ca

Favicon Generator

Generate a complete favicon set from one image — all sizes plus .ico and HTML snippet. Runs in your browser.

Runs entirely in your browser — your image is never uploaded.

A square image works best. PNG or SVG is recommended; the tool will crop to a square if your source isn't already.

About this tool

Generates a complete set of favicon files from a single source image, plus the HTML <head> snippet to reference them. Runs entirely in your browser.

What it generates

  • favicon-16x16.png — classic browser tab icon
  • favicon-32x32.png — high-DPI browser tab
  • favicon-48x48.png — Windows site icon
  • apple-touch-icon.png (180×180) — iOS home screen
  • android-chrome-192x192.png — Android home screen
  • android-chrome-512x512.png — high-DPI Android, PWA splash
  • favicon.ico — multi-resolution legacy format (16/32/48 in one file)

Source image tips

  • Use a square source image. Rectangular sources get centre-cropped.
  • At least 512×512 pixels for best results across all sizes.
  • SVG sources rasterize crisply at any size.
  • Avoid fine detail — at 16×16 it disappears. A simple, high-contrast design reads at every size.
  • Avoid pure white logos on transparent backgrounds — they vanish on light browser themes. Use the "white background" option in that case.

How to use the HTML snippet

Upload all the generated files to the root of your website, then paste the generated snippet inside the <head> of your HTML. Browsers pick the best size automatically.

Frequently asked questions

Why generate a .ico file instead of just using .png everywhere?
Legacy browsers and Windows tools still look for /favicon.ico. Having one keeps things working everywhere. Modern browsers prefer the higher-resolution PNGs declared in the HTML; the .ico is a safety net.
Do I need all those sizes?
For a polished result, yes. Different platforms pick different files: iOS uses apple-touch-icon, Android uses the chrome-* files, browser tabs use the small PNGs, and old Windows shortcuts use the .ico. Skipping sizes means worse-looking icons in some places.
Can I generate a maskable icon for PWAs?
Not in this version. Maskable icons need a safe-zone within the design — a manual design step rather than a one-click conversion. If you need PWA-grade icons, design with safe zones in your image editor first.
What about dark mode?
Browsers don't currently support different favicons for light and dark mode via standard HTML (some have experimented with media queries in <link rel="icon">, with mixed support). Best practice is a design that works on both light and dark backgrounds — usually meaning don't rely on a transparent background with a single-colour logo.
What's the .ico file actually doing here?
It bundles three PNG bitmaps (16/32/48 pixels) into a single ICO container. Modern browsers handle it fine; we generate it client-side using a simple ICO header writer — no external library.

Related tools

Last updated: May 17, 2026