What files does a website need?
- favicon.ico: the classic tab icon. This one contains 16, 32 and 48 pixel versions inside a single file, so every browser picks the sharpest one.
- apple-touch-icon.png (180 × 180): used when someone adds your site to the iPhone or iPad home screen.
- android-chrome-192x192.png and 512x512.png: used by Android and by installable web apps, listed in site.webmanifest.
Tips for a crisp favicon
A favicon is tiny, so keep it simple: one bold letter, a single emoji or a clean logo mark works far better than a detailed picture. Check the 16 px preview: if you can't tell what it is there, simplify it. Apple fills transparent areas with black, so give the touch icon a background color if your design uses transparency.
Using an emoji as a favicon
Type any emoji and pick a background. The emoji is drawn with your device's emoji font, so it will look like Apple, Google or Microsoft style depending on what you're using now. The saved PNG files look the same everywhere.
Are my images uploaded?
No. Everything happens inside your own browser, so your pictures never leave your device. It even keeps working if you go offline after the page loads.