A decade of Canvas at your command — powered by our custom cutting-edge, continuously trained AI engineStart Building →

Design Tool

Favicon Generator

Upload any image and get all 7 favicon sizes as downloadable PNG files — from 16px browser tab icons to 512px PWA splash screens. Includes copy-ready HTML link tags for your Canvas HTML Template <head> section.

Drop an image or click to upload

PNG, SVG, JPG supported. Square images work best.

What is a favicon and why does it matter?

A favicon (short for “favourite icon”) is the small icon displayed in the browser tab, bookmarks bar, browser history, and search results. Despite being tiny, favicons are a critical branding touchpoint — they make your site immediately recognisable among open tabs and signal professionalism. A missing favicon causes the browser to display a generic page icon.

Modern websites need multiple favicon sizes for different contexts: the classic 16×16 and 32×32 for browser tabs, 180×180 for Apple Touch Icon (iOS home screen), 192×192 for Android Chrome home screen shortcuts, and 512×512 for Progressive Web App (PWA) splash screens and app store listings.

When building with Canvas HTML Template, paste the generated HTML link tags into the <head> section of every page, and upload the PNG files to your web server root or a /icons/ directory. Canvas Builder includes favicon link tag generation in its meta tag output.

How to use this tool

  1. 1

    Prepare a square image — ideally at least 512×512px. A simple logo mark or initial works best at small sizes.

  2. 2

    Drag and drop the image onto the upload area, or click to browse and select it.

  3. 3

    The tool generates all 7 favicon sizes instantly — from 16px to 512px.

  4. 4

    Download each size individually by clicking the Download button under each icon preview.

  5. 5

    Click 'Copy HTML' to get the ready-to-paste link tag block for all sizes.

  6. 6

    Paste the HTML tags inside the <head> of your Canvas HTML Template pages and upload the PNG files to your server root.

Favicon size guide

SizeContextHTML tagRequired?
16×16Browser tab, bookmarks bar<link rel="icon" sizes="16x16">Essential
32×32Standard favicon, Windows taskbar<link rel="icon" sizes="32x32">Essential
48×48Windows desktop shortcut<link rel="icon" sizes="48x48">Recommended
64×64High-DPI browser tabs<link rel="icon" sizes="64x64">Recommended
180×180Apple Touch Icon (iOS home screen)<link rel="apple-touch-icon">Essential for iOS
192×192Android Chrome home screen<link rel="icon" sizes="192x192">Essential for Android
512×512PWA splash screen, app storesmanifest.json icons arrayRequired for PWA

Frequently Asked Questions

What size should a favicon be?

You need multiple favicon sizes for different contexts. The minimum set is: 16×16 (browser tab), 32×32 (standard favicon, taskbar), 180×180 (Apple Touch Icon for iOS), 192×192 (Android Chrome home screen), and 512×512 (PWA splash screen and app stores). For the best coverage, generate all 7 sizes — 16, 32, 48, 64, 180, 192, and 512 pixels.

Can I use an SVG as a favicon?

Yes — modern browsers support SVG favicons via <link rel='icon' type='image/svg+xml' href='/favicon.svg'>. SVG favicons scale perfectly at any size and can include CSS media queries for dark mode. However, for maximum compatibility (iOS Safari, older browsers), you should still provide a 180×180 PNG Apple Touch Icon alongside the SVG. This tool generates PNG sets from any image including SVG uploads.

Do favicons affect SEO?

Favicons are not a direct Google ranking factor, but they influence click-through rates — a recognisable favicon in browser tabs and bookmarks reinforces brand recall. Google also displays favicons in search results (mobile SERPs) next to your page title, making them a subtle but real factor in perceived brand quality. Missing or broken favicons can trigger Google Search Console warnings.

What is an Apple Touch Icon?

An Apple Touch Icon is the icon displayed when a visitor adds your website to their iOS home screen using Safari's 'Add to Home Screen' feature. It requires a 180×180 pixel PNG and is declared with <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>. Without it, iOS will use a screenshot of the page instead, which looks unprofessional.

Ready to build a full HTML layout?

Canvas Builder generates production-ready Canvas HTML Template pages complete with meta tags, favicon links, and SEO setup.

Try Canvas Builder