Favicon MakerFavicon sizes and formats
A favicon is the small picture in a browser tab, in bookmarks and in search results.
What Google says
For the icon to appear in Google Search results, Google's documentation requires that the favicon is a square (1:1) of at least 8 × 8 pixels, and recommends one larger than 48 × 48 pixels so that it looks good on various surfaces. It supports the formats BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. The address of the favicon must be stable, so do not change it often. You tell Google about it with a link tag in the head of your home page: <link rel="icon" href="/path/to/favicon.ico">. Google also accepts shortcut icon and apple-touch-icon as rel values.
What Apple says
Apple's archived Safari documentation says that to give an iOS home-screen icon for the whole site, you put a PNG file named apple-touch-icon.png in the root folder, or you add <link rel="apple-touch-icon" href="..."> to a page. To support several devices, give each link a sizes attribute. The page lists 152 × 152 (iPad), 167 × 167 (iPad retina) and 180 × 180 (iPhone retina), and says that the most suitable size for the device is used. It points to the iOS Human Interface Guidelines for current sizes: because the page is archived, check them.
The set this site makes
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32 and 48 pixels in one file | Older browsers, the default /favicon.ico request, tabs |
| favicon-16.png, favicon-32.png | 16 and 32 pixels | Tabs and bookmarks |
| favicon-48.png | 48 pixels | Sizes above 48 are recommended for search results, so the 192 and 512 files are also fine |
| apple-touch-icon.png | 180 pixels | iPhone home screen |
| icon-192.png, icon-512.png | 192 and 512 pixels | Web app manifest, Android home screen |
| maskable-512.png | 512 pixels | Android adaptive icons (optional) |
| site.webmanifest | text | Names and lists the icons of a web app |
The minimal tags
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The icon maker writes these for you, with the folder you choose.
Design tips
- Use a simple shape with a strong contrast. Fine detail disappears at 16 pixels.
- Test it small: look at the 16 pixel preview.
- A single letter or a bold mark often works better than a full logo.
- Keep the same file address once it is in use.
Do I still need favicon.ico?
Browsers ask for /favicon.ico on their own if no link tag is found, so a file there is a safe default.
Can I use SVG?
Browsers can show SVG icons with <link rel="icon" type="image/svg+xml" href="...">, but Google's list of supported formats for search results does not include SVG, so keep a PNG or ICO too.
Sources
- Google Search Central: Define a favicon to show in search results (developers.google.com/search/docs/appearance/favicon-in-search)
- Apple: Configuring Web Applications, archived documentation (developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications)
Read on 14 November 2026.
This is an independent guide. It is not connected with Google, Apple, Mozilla, Blogger or any company named here. Facts were read on 14 November 2026 from the pages named on each page. The icon maker runs in your browser: your picture is not uploaded anywhere.