How to Make a Favicon for Your Website

A favicon is the small icon shown in the browser tab, in bookmarks and on a phone home screen. A site without one shows a blank page icon, which looks unfinished. Getting it right takes one image and a few lines of HTML.

The files you need

• favicon.ico in 16, 32 and 48 pixel sizes, for browsers and older software.
• favicon-32x32.png and favicon-16x16.png for modern browsers.
• apple-touch-icon.png at 180 by 180 pixels, used when someone adds your site to an iPhone or iPad home screen.
• android-chrome-192x192.png and android-chrome-512x512.png, listed in a web manifest for Android and installable apps.
• site.webmanifest, a small JSON file that names the icons and sets the theme color.

Start with the right image

Tiny icons need simple shapes. A single bold letter, a simple symbol or a logo mark works far better than a logo with small text. Start from a square image, because the icons are square. If your logo is wide, crop it first with the Image Cropper.

Make the whole pack in one go

The Favicon Generator builds every file above from a letter, an emoji or your own image. Pick a color and a shape, check the preview at 16 pixels, then download the ZIP.

Add it to your pages

Put the files in the root folder of your site and paste this into the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

If it doesn't show up

Browsers cache favicons for a long time. After changing yours, do a hard refresh, or open the page in a private window. The Meta Tag Generator can help you finish the rest of your page head, such as the title, description and social sharing tags.