pixanon
No uploads
TR

Give your site an icon

Drop your logo or type a letter. Get every icon a browser tab, iPhone and Android need, plus the code to paste into your site.

Source
Background
Shape
Padding
10

Code for your site

Put the files in your site’s root folder and paste these lines inside <head>.

7 files: favicon.ico, apple-touch-icon.png, Android icons, site.webmanifest and an install note

What’s in the package?

  • favicon.icoThe icon in the browser tab. It holds three sizes (16, 32 and 48 px), so older browsers and Windows recognise it too.
  • icon.svgAdded when your logo is an SVG. Sharp on every screen; modern browsers prefer it.
  • apple-touch-icon.pngThe 180 px icon shown when someone taps “Add to Home Screen” on iPhone or iPad. iOS paints transparent areas black, so the background is always filled.
  • icon-192 / 512, icon-maskFor Android and “install as app”. In the maskable version the logo sits in the central safe zone, so it isn’t cut off when cropped to a circle or teardrop.
  • site.webmanifestA small file that tells the browser your site name, theme color and icons.

Common questions

Is my logo uploaded to a server?

No. Every icon is drawn in your browser. Your logo never leaves your device.

Which image should I use?

A square, simple logo of at least 512 pixels. Thin text can’t be read in a 16 px tab icon; using only your logo mark or initial often works better.

Where do I put the files?

In your site’s root folder, where index.html lives. Then add the code from the package to the <head> of your pages. On WordPress you can also upload it under Appearance → Customize → Site Identity.

My new favicon doesn’t show up. Why?

Browsers cache favicons for a long time. Reload with Ctrl+F5 or open the site in a private window.

I don’t have a logo. What can I do?

Choose “Letter”, type one or two letters and pick the colors. Plenty of well-known sites use just an initial as their favicon.