A favicon helps people find your site among their open tabs. Here is what sizes you need and how to add them to your pages.
A favicon is the small icon shown in browser tabs, bookmarks and search results. It is a small detail, but it makes a site easier to recognise and look more finished.
Start with a simple, square image
Favicons are shown as small as 16 × 16 pixels, so fine detail disappears. A bold letter, a simple symbol or a simplified version of your logo works best. Start from a square image at least 512 × 512 pixels.
The files you need
- favicon.ico with 16, 32 and 48 pixel sizes, for older browsers and Windows.
- favicon-32x32.png and favicon-16x16.png for modern browsers.
- apple-touch-icon.png at 180 × 180 pixels for iPhone and iPad home screens.
- android-chrome-192x192.png and 512x512.png, listed in a site.webmanifest file, for Android.
Add the tags to your pages
Upload the files to the root folder of your website and add these lines inside the <head> of every page:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Generate them all at once
Creating each size by hand is tedious. Our Favicon Generator builds every file above from one image, packs them in a ZIP and gives you the HTML to copy.
Browsers cache favicons aggressively, so if you replace an old icon and do not see the change, try a private window or clear the browser cache.