How to add a favicon to your website
- Choose your logo. The preview shows each icon at its real size.
- Download the ZIP and put all the files in the root folder of your site, next to your home page.
- Copy the HTML above into the
<head>of your pages. Browsers cache favicons, so a hard refresh may be needed to see the new one.
What's in the package
favicon.ico holds 16, 32 and 48 px versions in one file, for browser tabs, bookmarks and Windows. favicon-16x16.png and favicon-32x32.png are the same icons as PNG. apple-touch-icon.png (180 px) is used when someone adds your site to an iPhone or iPad home screen. It always gets a solid background, because iOS shows transparent areas as black. android-chrome icons (192 and 512 px) and site.webmanifest are used by Android and installable web apps.
Tips for a sharp favicon
At 16 pixels, detail disappears. Simple shapes, a single letter or a bold symbol work far better than a full logo with small text. SVG or a large PNG gives the cleanest result. If your logo touches the edges, add a little padding so it doesn't look cramped in the tab.
Private and free
The icons are drawn by your browser, and this page's security policy stops it from sending data to any server. Unreleased logos and client work stay on your computer. There's no sign-up and no watermark.
Questions
Is the .ico a "real" ICO file?
Yes. It is a standard Windows icon file with three sizes inside. Each size is stored as PNG, which every current browser and Windows since Vista support.
Can I use an SVG favicon instead?
Modern browsers accept <link rel="icon" href="/icon.svg" type="image/svg+xml">. Keep favicon.ico as well, for older browsers, feed readers and tools that only look for /favicon.ico.
Why does my icon look blurry?
The source image is probably small. Use an image of at least 512×512 pixels, or an SVG.