search⌘KtranslateENexpand_moreupload_fileConvert

Favicon Generator Online

Favicon generator

Make the tiny icon that shows in browser tabs, bookmarks and home screens, from letters or an icon, and get every size plus the HTML to paste in.

LettersIconImageupload

Letters (1-2)

Shape

SquareRoundedSquircleCircle

Colours

Site name (for the tab preview)

how it looks in a browser tab

AcboltAcme StudioInbox

phone home screenAcboltAcme Studio

Every size, in one packageprogress_activityRendering…

16 pxbrowser tab

32 pxretina tab

48 pxWindows

180 pxiPhone home

192 pxAndroid

512 pxapp / PWA

~/install-it

Two steps to install.

01Upload the files to your site’s rootPut favicon.ico, icon.svg, apple-touch-icon.png and site.webmanifest next to your homepage, so they’re reachable at /favicon.ico and so on.

02Paste these lines into the <head>Add them to every page, or to your site template once. Browsers cache favicons hard, so a hard refresh (Ctrl/Cmd + Shift + R) may be needed to see the change.

<head> of every pagecontent_copyCopy HTML

<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#4f46e5">

~/inside-favicon.ico

An .ico file is a tiny folder of images.

Your browser just drew your design onto a canvas at 16, 32 and 48 pixels, saved each as a PNG, and packed them into a real favicon.ico. The format starts with a 6-byte header and a 16-byte directory entry per image, then the images themselves. Since Windows Vista those images can be complete PNG files, which is what modern generators use.

FIRST 54 BYTES · header + directoryrendering…

■ reserved 0, type 1 = icon, image count■ width, height, colours, reserved■ planes, bits per pixel■ byte size■ offset of the image

imagesizebppbytesoffsetdata starts withas BMP instead

lightbulbRendering your design…downloadRendering…

~/sixteen-pixels

Designing for 16 × 16 pixels.

A favicon is usually seen smaller than a fingernail, in a row of other tabs. What survives at that size:

One or two letters, not a wordFull names turn into a grey smudge at 16 px. Use an initial or a bold symbol.AcmeavoidAbetter

Bold weight, big contrastThin strokes vanish on small, low-resolution screens. Heavy shapes on a solid colour read best.aavoidabetter

Fill the squareA small mark with lots of padding looks tiny next to other tabs. Let the shape go nearly edge to edge.·avoidAbetter

Check it on dark tabsMany people use dark mode. A black icon on a transparent background disappears there: use a coloured background.AavoidAbetter

~/reference

Who asks for which icon, and how.

Every platform looks for its icon in a slightly different place. These are the files in the package above, the tag or convention that points to each one, and the quirks that catch people out.

filesizefound throughnotes

favicon.ico16, 32, 48<link rel="icon" href="/favicon.ico" sizes="32x32">Browsers also request /favicon.ico from the site root automatically if no tag points elsewhere, as do RSS readers and many link-preview bots.

icon.svgany<link rel="icon" type="image/svg+xml">Scales perfectly and can switch colours with a prefers-color-scheme media query inside the SVG. Supported in Chromium browsers and Firefox; Safari has long preferred raster icons.

apple-touch-icon.png180×180<link rel="apple-touch-icon">Used when someone adds the site to an iPhone or iPad home screen. iOS also probes /apple-touch-icon.png. Transparent areas turn black, so this file is drawn without rounded corners.

icon-192.png192×192site.webmanifest → icons[]Android home screen and install prompts.

icon-512.png512×512site.webmanifest → icons[]Splash screens and app stores for installed web apps. Chrome needs 192 and 512 to offer installation.

maskable icon512×512"purpose": "maskable"Android crops it to a circle, squircle or other shape. Keep the logo inside the central circle, 80% of the width, so nothing important is cut.

theme-colorcolour<meta name="theme-color">Tints the address bar on Android and Safari, and the title bar of installed apps.

PNG inside ICOSmaller files since VistaEach directory entry can point at a whole PNG, starting 89 50 4E 47. Older entries are headerless BMPs with a 1-bit transparency mask.

0 means 256One byte for widthThe directory stores width and height in a single byte each, so 256 px is written as 0.

/favicon.icoRequested anywayWithout a link tag, browsers fetch the root favicon.ico. A missing file just fills logs with 404s.

CacheHard to updateBrowsers cache favicons separately and for a long time. Changing the file name, such as /favicon-v2.ico, is the reliable fix.

From bookmarks to home screens

1999Internet Explorer 5Fetches /favicon.ico to show beside bookmarks, the origin of the name “favorites icon”.

1999rel="shortcut icon"The link tag lets a page name its own icon. “shortcut” was never needed by other browsers.

2007Windows VistaICO files may now contain PNG images, needed for 256 px icons.

2008apple-touch-iconiPhone OS adds home-screen web clips with their own icon file.

2011HTML5 sizesThe sizes attribute lets one page list several icons for different uses.

2015SVG faviconsFirefox supports SVG icons in tabs; Chrome follows in 2020.

2015Web app manifestAndroid Chrome reads icons from a JSON manifest for home-screen installs.

2019Maskable iconsThe purpose field lets Android crop icons to its own shapes.

Sources

[1]HTML Standard: rel=iconHow browsers choose between several icons, and the /favicon.ico fallback.WHATWG ↗[2]Icons (ICO format)The ICONDIR header and ICONDIRENTRY structure.Microsoft ↗[3]Web Application ManifestThe icons member, sizes and purpose.W3C ↗[4]Configuring web applicationsapple-touch-icon sizes and behaviour.Apple ↗[5]Maskable iconsThe safe zone and how Android crops icons.web.dev ↗[6]ZIP APPNOTEThe format of the favicons.zip this page writes.PKWARE ↗

More tools for launching a site

The other small things that make a site look finished.

All tools →

photo_size_select_largeImage Resizer

Resize a logo to exact icon sizes if you already have one.

logo.png 2000 pxarrow_forward512 px

paletteColor Palette Generator

Pick brand colours that work together.

1 colourarrow_forward5-colour palette

shareOG Tag Generator

Set the image shown when your site is shared.

no previewarrow_forward1200×630 card

codeMeta Tag Generator

Write the title and description that appear in search.

blank <head>arrow_forward9 meta tags

imageImage to Base64

Inline a tiny icon directly into HTML or CSS.

icon.pngarrow_forwarddata:image/…

qr_code_2QR Code Generator

Link printed material to your new site.

acme.studioarrow_forwardQR code