Data & Text
Image (optional)
Text (optional)
Shape & background
Preview
Runs entirely in your browser — your image is never uploaded. Fonts are loaded from Google Fonts.
What's in the zip
| File | Used by |
|---|---|
favicon.ico | Every browser, and anything that requests /favicon.ico directly. Contains 16, 32 and 48px versions in one file. |
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | Browser tabs, bookmarks and history. Modern browsers prefer these over the ICO. |
apple-touch-icon.png | iPhone and iPad home screens (180×180). Always a full square — iOS rounds the corners itself, so transparent corners would show as black. |
android-chrome-192x192.png, android-chrome-512x512.png | Android home screens and installed web apps, referenced from site.webmanifest. |
site.webmanifest | Tells Android and Chrome which icons to use, plus your site name and theme colour. |
favicon-html.txt | The <link> tags shown above. |
Installing it
Unzip the files into your site's web root — the folder served at /, such as public/ in Laravel — and paste the HTML into the <head> of every page (in Laravel, your main layout). Browsers cache favicons aggressively, so if you're replacing an old one, a hard refresh or a private window is the quickest way to see the change.
Designing for 16 pixels
The smallest size is what most people actually see, in a crowded row of browser tabs. One or two bold letters survive at that size; whole words and fine detail don't. Heavier weights and high contrast between text and background help, and the light and dark tab previews show how it'll look against both browser themes.