Tutorial
Step by step: Create favicons for your website
In this tutorial, you'll learn how to use the Favicon Generator to create all required favicon formats from a single image – directly in your browser.
Upload your image
Start by uploading your source image. Drag and drop it into the upload area, click to select a file, or paste from your clipboard with Ctrl+V. For best results, use a square image at least 512×512 pixels. Supported formats: PNG, JPG, SVG, GIF, and WebP.
Configure settings
Customize your favicon: set a background color (or keep it transparent), adjust the border radius for rounded corners, and add padding. Select which sizes you want to generate – the recommended sizes cover all major browsers and devices.
Preview results
Check how your favicon looks in real-time previews: browser tab, bookmarks bar, home screen, and search results. Toggle between light and dark backgrounds to ensure good visibility in all contexts.
Download and integrate
Download all favicon files as a single ZIP package. Copy the provided HTML code into your <head> section and add the web app manifest to your project. Upload the files to your web server root directory.
Tips & Best Practices
- • Always use a square source image. Non-square images will be cropped or distorted. 512×512 px is the ideal minimum resolution.
- • Keep your favicon simple and recognizable. Complex details get lost at small sizes like 16×16. Use bold shapes and high-contrast colors.
- • Test your favicon on both light and dark backgrounds. Many browsers and operating systems now support dark mode, so your icon should be visible in both.
- • Include an SVG favicon for modern browsers. SVG favicons scale perfectly to any size and support features like dark mode media queries.