A favicon is the small icon in a browser tab, bookmark list, and search result. It is also the icon people see when they add your site to their home screen. A missing one looks unfinished, and getting all the sizes right used to be fiddly. Here is what you actually need today.
The files to create
- favicon.ico containing 16, 32, and 48 pixel images: the classic file, still requested by many browsers and tools.
- icon.svg: a scalable version supported by modern browsers, which can even adapt to dark mode.
- apple-touch-icon.png at 180 by 180 pixels: used when someone adds your site to an iPhone or iPad home screen.
- icon-192.png and icon-512.png: used by Android and progressive web apps through the web manifest.
Design tips
- Start from a simple, bold shape. Tiny sizes can't show detail or long text.
- Use a square source image at least 512 by 512 pixels.
- Keep a little padding for the touch icon; iOS applies rounded corners.
- Make sure it is readable on both light and dark tab bars.
The HTML to add
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
The manifest lists the 192 and 512 pixel icons so Android and installable web apps can use them.
Testing
- Open your site in a private window to avoid cached icons.
- Check the tab, a bookmark, and a mobile home-screen shortcut.
- Browsers cache favicons aggressively; a hard refresh or changed filename helps when updating.
Generate them all at once
A favicon generator takes one source image and produces every size plus a snippet to paste into your HTML. Choose one that runs locally so your logo isn't uploaded.
Frequently asked questions
What size should a favicon be?
Provide 16, 32, and 48 pixels in an ICO file, a 180 pixel Apple touch icon, and 192 and 512 pixel PNGs for Android and web apps.
Can I use an SVG favicon?
Yes. Modern browsers support SVG favicons, which stay sharp at any size. Keep an ICO fallback for older ones.
Why isn't my new favicon showing?
Browsers cache favicons heavily. Try a private window, clear the cache, or rename the file and update the link.
Where do I put favicon.ico?
In the root of your site (yoursite.com/favicon.ico), where browsers look by default, and reference it in the head.
Try it: Favicon Generator — free, runs in your browser, nothing is uploaded.
Originally published at ilovekit.app.
