Favicon Code Generator
Generate the HTML code for favicons that work across all browsers and devices. Includes Apple Touch Icons, Android Chrome, and more.
Configuration
The base URL where your favicon files are hosted
Required Files
Make sure you have these files in your website root:
favicon.ico48x48favicon-16x16.png16x16favicon-32x32.png32x32apple-touch-icon.png180x180android-chrome-192x192.png192x192android-chrome-512x512.png512x512site.webmanifestJSONHTML Code
Add this code to the <head> section of your HTML
site.webmanifest
Save this as site.webmanifest in your website root
Supported Platforms
Frequently Asked Questions
What file formats do I need for favicons?
Modern websites need multiple favicon formats: ICO for legacy browser support, PNG for most browsers and devices (16x16 to 512x512), SVG for scalable icons, and optionally WEBP for better compression. Apple devices require Apple Touch Icons in PNG format.
What sizes should my favicon be?
Essential sizes include: 16x16 and 32x32 for browser tabs, 180x180 for Apple Touch Icon, 192x192 and 512x512 for Android/PWA. The ICO file should contain 16x16, 32x32, and 48x48 versions. Most generators handle this automatically.
Where do I put favicon files on my website?
Place favicon.ico in your root directory for maximum compatibility. Other files like apple-touch-icon.png can go in the root or a subfolder, as long as the HTML link tags point to the correct location. The web manifest file (site.webmanifest) should also be in the root.
Do I need different favicons for mobile and desktop?
Yes. Desktop browsers use small icons (16-32px) in tabs, while mobile devices need larger icons (180-512px) for home screen shortcuts. Apple devices specifically require Apple Touch Icons, and Android uses icons defined in the web manifest for PWA installations.
What is a web manifest file?
A web manifest (site.webmanifest) is a JSON file that provides information about your web app to browsers. It includes app name, icons, theme colors, and display preferences. Android devices use this to determine how your site appears when added to the home screen or installed as a PWA.
