Free Favicon & Web App Manifest Generator
Upload your master logo or image to compile an optimized, browser-compliant favicon bundle. Includes multi-layer favicon.ico, iOS Apple Touch icons, site.webmanifest, and ready-to-paste HTML tags.
Automated Data Security Purge Policy
To maintain strict platform security compliance, compiled production archives are **purged automatically 30 minutes** after processing. Please download your zip archive promptly.
Is your new branding showing up on Google Search?
Google mobile search results display favicons directly alongside organic search snippets. Track daily SERP click-through rates, trigger 1-click Google indexing, and prevent wasted ad spend.
Compiled Favicon Package Specifications
The package includes everything required for modern and legacy browsers, mobile devices, and PWAs:
| Filename | Dimensions | Target Platform & Purpose |
|---|---|---|
| favicon.ico | Multi-res (16x16, 32x32, 48x48) | Legacy browsers, desktop browser tabs, Windows taskbars |
| favicon-16x16.png | 16 × 16 px | Standard desktop browser tab bar displays |
| favicon-32x32.png | 32 × 32 px | High-DPI Retina browser tabs, browser bookmark managers |
| apple-touch-icon.png | 180 × 180 px | Apple iOS Safari "Add to Home Screen" web application bookmarks |
| android-chrome-192x192.png | 192 × 192 px | Android Chrome homescreen shortcut icons |
| android-chrome-512x512.png | 512 × 512 px | Progressive Web App (PWA) splash screens and app manifests |
| site.webmanifest | JSON Schema | Standard Web App Manifest defining progressive display parameters |
Installation: How to Add Favicons to HTML
Extract your ZIP package into your web root directory and paste this inside your template's <head> tags:
<!-- Generated by FrictionLabs Favicon Toolkit (frictionlabs.space) -->
<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">
<meta name="theme-color" content="#ffffff">Frequently Asked Questions
Technical implementation, dimensions, and indexing behavior for web application favicons.
Why is my new favicon not showing up on Google search results?
Googlebot crawls favicons on a dedicated, lower-frequency schedule compared to regular web pages. Your favicon URL must reside at a stable root path and consistently return a 200 HTTP status code. You can expedite discovery by submitting your root domain via Google Search Console or using FrictionLabs' one-click indexing pipeline.
Do I still need a classic favicon.ico file if I use modern PNG formats?
Yes. While modern desktop browsers parse high-resolution PNG links effortlessly, search engine bots, RSS feed aggregators, and older browser versions still issue requests specifically to /favicon.ico. Having a valid multi-layer .ico file prevents 404 server errors in your access logs.
What image dimensions and source formats work best?
We recommend uploading a square PNG or WEBP file with a transparent background that is at least 512×512 pixels. Avoid fine lines or extensive micro-text, as standard desktop browser tabs compress the icon down to 16×16 pixels. High-contrast geometric shapes deliver the best legibility across light and dark browser themes.
What is the site.webmanifest file and do I need it?
The site.webmanifest is a JSON file that tells Android Chrome and mobile browsers how your web application should appear when installed or bookmarked on a mobile device home screen. It points directly to 192x192 and 512x512 app icons, defines the theme color, and sets the default launch URL.
Where should I store the extracted files in my project?
Extract all files directly to your web server's public root directory (or your framework's static assets folder) and place the generated HTML link tags inside the <head> section of your base template.