About Favicon Generator
Upload a square logo or symbol and get a ZIP with favicon.ico and PNG versions in the sizes browsers, bookmarks and phone home screens use.
Start from a square PNG of at least 512 × 512 px with a transparent background. Non-square images are fitted into a square.
Adding the icons to your site
- Unzip the download and copy favicon.ico to the root folder of your site, next to your home page.
- Copy the PNG files to the same folder.
- Reference them in the <head> of your pages with <link rel="icon"> tags, and the largest PNG with <link rel="apple-touch-icon">.
- Reload with the cache cleared; browsers keep old favicons for a long time.
Designing for 16 pixels
At the smallest size, details vanish. A single letter or a bold symbol in strong colours works better than a full logo with text.
How to use it
- 1Choose or drop a square logo
- 2Generate the icons
- 3Download the ZIP and add the files to your site
Questions
What do I put in my HTML?
Place favicon.ico in your site’s root folder; browsers find it there. Link the PNG icons with <link rel="icon"> and <link rel="apple-touch-icon"> tags.
What image works best?
A simple, bold symbol. Fine detail and small text disappear at 16 × 16 px.
Is transparency kept?
Yes, in favicon.ico and the PNG files.