The favicon is the little icon that appears in browser tabs, bookmarks and, in many cases, next to your site’s name in Google search results. It’s tiny, but a missing or blurry one makes a site look unfinished. The good news is you only need to prepare a few files.
The sizes worth making
- 32 x 32 pixels: the classic browser tab size.
- 48 x 48 pixels or a multiple of it: Google’s guidance for search results asks for a favicon whose size is a multiple of 48 pixels, such as 48, 96 or 144. It also needs to be square.
- 180 x 180 pixels: the Apple touch icon, used when someone adds your site to their iPhone or iPad home screen.
- 192 x 192 and 512 x 512 pixels: used for Android home screen icons and web app manifests.
Standards and recommendations shift over time, so it’s worth glancing at Google’s current documentation if search results appearance matters to you.
Which format to use
PNG is the most reliable choice for favicons. It’s supported everywhere and handles transparent backgrounds. ICO is the old-school format and still works fine, especially for the traditional /favicon.ico file. SVG is supported by modern browsers and stays sharp at every size, which makes it a nice option, usually paired with a PNG fallback. Read more in what is an SVG file.
Designing a favicon that works at tiny sizes
At 32 pixels wide, almost everything disappears. Follow these tips:
- Use a simple shape. A single letter or a simplified logo mark works better than a full logo.
- Use bold, high-contrast colors. Pale colors vanish against a white or dark tab bar.
- Skip text. A full word is unreadable at this size. A single initial is fine.
- Test on light and dark browser themes. A dark icon with a transparent background can disappear in dark mode.
How to make one from your logo
- Start with a large, square version of your logo mark, at least 512 x 512 pixels.
- Crop it tightly so the shape fills the square without too much empty space.
- Resize it down to each of the sizes you need. Always resize from the large original, not from one of the smaller versions.
- Save them as PNG to keep transparency.
For more on handling logos, see how big should a logo be.
Adding it to your site
On WordPress, go to Appearance > Customize > Site Identity and upload a square image as your Site Icon. Use at least 512 x 512 pixels, and WordPress will create the smaller versions for you. On other platforms, add link tags pointing to your files in the head section of your pages.
Why isn’t my favicon showing?
Browsers cache favicons aggressively, so a new one may not appear straight away. Try a hard refresh or open the site in a private window. If it still doesn’t show, check that the file path is correct and the image is square.
Need to scale your icon down to exact sizes? Our image resizer lets you type the exact pixel dimensions and download each one.