Favicon generator
Upload your logo or type one or two letters. You get every size a browser, a phone or Google asks for, a multi-size favicon.ico, the web manifest and the HTML to paste - all made in your own browser. Nothing is uploaded anywhere.
What each size is for
| File | Size | Where it shows |
|---|---|---|
favicon-16x16.png |
16×16 |
Browser tab |
favicon-32x32.png |
32×32 |
Bookmark bar and retina tab |
favicon-48x48.png |
48×48 |
Windows shortcuts and older desktop |
apple-touch-icon.png |
180×180 |
IOS home screen (apple-touch-icon) |
android-chrome-192x192.png |
192×192 |
Android home screen |
android-chrome-512x512.png |
512×512 |
Splash screens and stores |
favicon.ico |
16, 32, 48 |
Requested blind at /favicon.ico by older browsers, feed readers and link unfurlers that never read your HTML |
site.webmanifest |
- | Tells Android and Chrome which icons to use when someone adds your site to their home screen |
These are the sizes a Webkio site generates and declares from one upload, so the list is read from the product rather than typed here.
On Webkio? Skip everything below: upload one square image as the site icon under Settings > General and every size and tag is done for you.
Add the favicon to any website
Put the files in the root of your site, so they answer at /favicon.ico,
/apple-touch-icon.png and so on, then paste this inside <head>
on every page. On most platforms there is one header template, so it is one paste.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
The first line points at the ICO with a sizes hint, the PNG lines give modern
browsers an exact size to pick, the apple-touch-icon line is the one iOS reads, and the
manifest carries the 192 and 512 icons for Android. Adjust the paths if your platform
keeps uploads in a folder.
ICO, PNG or SVG?
PNG is what every browser, phone and manifest accepts, and the only common
format that keeps transparent padding transparent. It is the workhorse of the set.
ICO is a container, not a picture: the one made here holds three PNGs
(16, 32 and 48) in a single file, so whatever asks for /favicon.ico without
reading your HTML still gets a sharp icon. SVG scales to any size, can
switch colours in dark mode with a media query, and is accepted in a link tag by most
browsers, but not Safari, and never for the iOS home screen or the manifest. Treat an SVG
as an addition to this set rather than a replacement for it.
What Google needs to show your icon in search results
- A square icon whose side is a multiple of 48 pixels: 48, 96, 144, 192. The 48 and 192 pixel files in this set both qualify; the 512 does not, and the 16 and 32 are too small.
- Declared with a
<link rel="icon">on your home page, and the same icon across the site. - At a stable address Googlebot can fetch. Changing the file name on every deploy, or blocking it in robots.txt, means no icon.
- A real representation of your brand. Google says it may not show an icon it judges generic or inappropriate, and it does not promise to show one at all.
If your site is on Webkio, skip all of this
Open your site's Settings, go to General and upload one square image as the site icon. The six sizes above are generated from it and the link tags are written into every published page, so there is nothing to paste and nothing to keep in sync. This tool is for everyone whose website lives somewhere else.
Build a site on WebkioHow this is worked out
Everything happens in your browser; there is no upload. The source - a logo file or one or two letters drawn on a solid colour in the shape you choose - is painted on a 512 pixel canvas, then scaled down in halving steps to each of the six sizes a published Webkio site generates (16, 32, 48, 180, 192 and 512), which gives a cleaner small icon than one jump from 512 to 16. Letters are sized by measuring the glyphs so a W and an I both fit the same box. The 180 pixel iOS icon is always drawn with an opaque background, because iOS fills transparency with black. The favicon.ico is a standard ICO container holding the 16, 32 and 48 PNGs, the manifest lists the 192 and 512 icons as the Web App Manifest specification describes, and the zip is written with the STORE method and CRC-32 by the page itself. The page says which sizes meet Google's rule that a search-result icon be a multiple of 48 pixels.
Standards and documentation it follows
- Google Search Central: define a favicon to show in search results
- W3C: Web Application Manifest
- Apple Human Interface Guidelines: app icons
- WHATWG HTML Standard: link type "icon"
Guides that use this
- Your Website Launch Checklist: 12 Things to Do Before You Go Live
- How to Choose a Website Design (and When to Stop Choosing)
- Before You Launch a Store or Booking Page, Run One Real Order Through It
Quoting this tool
Free to quote and link. Cite it as Favicon generator, a free tool by Webkio, https://webkio.com/favicon-generator. The method above is the whole
method, so a figure you quote can be checked by anyone with the same inputs.