How to make a favicon
- Choose Text or initials to design an icon from letters, or An image to use your logo.
- For text, type up to three characters and pick the background, text colour, shape and font. For an image, upload a square logo if possible.
- Check the previews at 16, 32, 48 and 180 pixels to make sure it is readable when small.
- Download the full package as a ZIP, or just
favicon.ico, and paste the HTML snippet into your site’s<head>.
What’s in the favicon package
The ZIP contains everything modern browsers and devices look for: favicon.ico with 16, 32 and 48 pixel images inside, separate 16 and 32 pixel PNGs for browser tabs, a 180 pixel apple-touch-icon.png for iPhone and iPad home screens, 192 and 512 pixel Android icons, a site.webmanifest file, and a text file with the HTML tags.
Favicons are tiny, so simple designs work best. One or two bold letters on a strong background stay readable at 16 pixels, while detailed logos often turn into a blur. Non-square images are centred and cropped to a square. All icons are generated in your browser with the Canvas API.
Where favicons appear
- Browser tabs, bookmarks and history.
- Search results on mobile, next to your site name.
- Phone home screens when someone saves your site.
- Shortcuts and pinned sites on desktops.
Favicon generator FAQ
Where do I upload the files?
Put them in your website’s root folder (the same folder as your homepage) so the paths in the HTML snippet work. On WordPress you can also set a Site Icon in the Customizer.
What size should my source image be?
At least 512 × 512 pixels, ideally square. Smaller images will look soft in the large icons.
Do I need all the files?
A favicon.ico alone works in every browser. The extra files make your icon look sharp on phones and high-resolution screens.