Favicon generator

Make a favicon for your website

A favicon is the small icon shown in the browser tab, in bookmarks and sometimes next to your site in search results. This favicon generator builds every file you need from an image, a few letters or an emoji: a favicon.ico holding three sizes, PNG files, the phone home screen icon, an SVG file when possible and the site manifest. It also writes the HTML code to paste. You can use it as a favicon maker from scratch or as a PNG to ICO converter for a logo you already have. Everything happens on your device: no image is uploaded.

Handy for a café website, a local football club or a personal blog.

How to use it

1. Under “Start from:”, pick “Image”, “Text or initials” or “Emoji”.
2. With “Image”, click “Choose an image” (PNG, JPG, SVG or WebP). With text, type 1 to 4 characters, then set the “Font”, “Weight” and “Text colour”.
3. Set the “Shape” (square, rounded or circle), tick or untick “Coloured background”, then choose the “Background colour”, “Padding” and “Text or emoji size”.
4. Check the “Previews at actual size” on light and dark backgrounds.
5. Fill in the “Site name”, “Theme colour”, “Splash screen background” and “Folder of the files on your site”.
6. Click “Download all (ZIP)”, then “Copy the code” to grab the HTML tags.

Which sizes you need today

The favicon.ico stays for compatibility: some browsers and tools request it straight from the root of the site, even without a tag. This one holds three images: 16, 32 and 48 px. The 16, 32 and 48 px PNG files serve modern browsers. The 180 × 180 px icon appears when a visitor adds your site to their phone's home screen; the phone rounds its corners itself. The 192 and 512 px icons are listed in site.webmanifest with the site name and colours, for installing the site as an app. The SVG (text or SVG source) stays sharp at every size.

Example: a 1,200 × 800 px photo is cropped to an 800 × 800 px square, removing 200 px on the left and 200 px on the right. With 10% “Padding”, the artwork fills 409.6 px of the 512 px icon and 12.8 px of the 16 px one.

Where to put the files and the HTML code

Unzip the archive and upload the files to the root of your site, next to the home page: the favicon then lives at /favicon.ico. If you keep them elsewhere, such as /icons/, type that folder into “Folder of the files on your site” and the code and manifest are updated. Then paste the tags into the <head> of every page.

Design tips

• Keep it simple: one letter, two initials or a symbol. A full logo turns into a smudge at 16 px.
• Check readability at 16 px in the previews: that is the size of a tab.
• Mind the contrast: a coloured background with white or very dark text shows up on light and dark tabs alike.

Why the new favicon takes a while to show

Browsers keep favicons in a separate cache, often for several days. After changing your icon, open /favicon.ico directly and reload it, or clear the browser cache. To force it for every visitor, add ?v=2 to the end of each file address in the HTML code. In search results, the new favicon only appears after the search engine next crawls your site.

Frequently asked questions

Is favicon.ico still useful?

Yes. It costs almost nothing and serves older browsers, feed readers and tools that request /favicon.ico without reading the page code.

Why does the emoji look different on my phone?

The emoji is drawn by the font of the device that creates the icon. Made on another system, the same emoji will look different.

My image is a rectangle: what happens?

The centre is kept and cropped to a square, trimming both long sides equally. Keep the subject in the middle.

Are my settings and my image saved?

Your settings are saved on this device for your next visit. The image itself is neither uploaded nor kept.