How to Add a Favicon to a Website

September 11, 2026

Create a square icon, place favicon.ico at the site root, and link PNG and Apple touch icons in the head so browser tabs and phones show it.

The tab for your site shows a blank page icon. A favicon fixes that in browser tabs, bookmarks, and phone home screens. It takes one image, one file at the root, and two lines in the head.

Create a square image

Make a square PNG at least 512x512 pixels, or an SVG. Keep the design bold: it will be displayed at 16 to 32 pixels, so thin lines and small text disappear. From that master, export favicon.png and a 180x180 apple-touch-icon.png.

Place favicon.ico at the site root

Browsers request /favicon.ico on their own, with or without any tag in the page. Convert the PNG to ICO (most image editors and online converters can do this) and upload it so it is reachable at https://yourdomain.com/favicon.ico. Older browsers and some tools only look there.

Link the PNG icon in the head

Inside <head> on every page:

<link rel="icon" href="/favicon.png" type="image/png">

For an SVG, use href="/favicon.svg" and type="image/svg+xml". Modern browsers prefer whatever this tag points to over the ICO fallback.

Add the Apple touch icon

iOS uses a separate image when someone adds the site to their home screen:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The file should be a 180x180 PNG with no transparency; iOS adds the rounded corners itself.

Check it in a browser

Load the site in a private window. The tab should show the icon. If the blank icon persists, the browser has cached the old one; hard-refresh or try a different browser. Also open https://yourdomain.com/favicon.ico and https://yourdomain.com/favicon.png directly to confirm both return the image and not a 404.

Google shows favicons in search results. Mobile results display the favicon next to the site name. Google requires the icon to be at least 48x48 pixels and a multiple of 48, such as 96x96 or 144x144, and 512 is not a multiple of 48. If Google is not picking up the icon, export a 144x144 or 480x480 PNG and point the rel="icon" tag at that instead.