How to add the icon to your site
WordPress
In the dashboard: Appearance → Customize → Site Identity → Site Icon, then upload android-chrome-512x512.png. WordPress creates the other sizes.
Shopify, Salla, Zid and similar
In your store settings, upload android-chrome-512x512.png or favicon-32x32.png in the favicon field.
Hand-coded site
Upload all the files to your site’s root folder and paste the HTML inside <head> on every page.
The files and their sizes
| File | Where it shows |
|---|---|
| favicon.ico (16, 32, 48) | Browser tabs, bookmarks and Google results. Google needs a size that is a multiple of 48 px. |
| favicon-32x32.png and 16x16 | Modern desktop browsers. |
| apple-touch-icon.png (180) | When your site is added to an iPhone or iPad home screen. Always on a solid background, since Apple doesn’t support transparency. |
| android-chrome 192 and 512 | Android home screens, and the site icon in WordPress, Shopify and similar. |
| site.webmanifest | Tells phones your site’s name, colors and icons. |
Favicon FAQ
What is a favicon?
The small image next to your site name in browser tabs, in Google’s mobile results, in bookmarks, and on phone home screens.
Why doesn't my icon show in Google results?
Google needs a square icon in a multiple of 48 px, not blocked from crawling, and then time to revisit your site. Our files meet the size rules; the rest is a matter of time.
What image works best?
A simple logo or your brand’s first letter. Fine details vanish at 16 px, so simpler is clearer. A transparent PNG or SVG gives the best result.
Is my logo uploaded?
No. The icon is made in your browser on your device, and your logo never leaves it.
Does it work with Arabic letters?
Yes. Choose “Letter or emoji” and type any Arabic or Latin letter or an emoji, then pick its colors.