Create your favicon
The free Vivlab favicon generator builds your site's icons from an image, an emoji or a letter, right in your browser.
Customize your favicon, download each size, then copy the HTML code to paste into your page.
Source
HTML code
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Preview
How it works
Create a favicon in 3 steps
Choose the source
Start from an image, an emoji or a letter, then set the background and text colours to match your brand.
Check the preview
Compare the 512, 32 and 16 pixel versions side by side to make sure the icon stays readable at a tiny size.
Download and add it
Grab the PNGs in 512, 180, 32 and 16 pixels, then copy the ready-made HTML to paste into your site's head.
Everything about the favicon
What is a favicon
The favicon is the little icon that stands for your site. You'll see it in the browser tab, in the bookmarks list, in your history and, on mobile, on the home screen when a visitor adds your site as a shortcut. It's a small thing, but it strengthens how people recognize your brand.
The sizes you need
A handful of formats cover most cases: 16×16 and 32×32 pixels for the tab and bookmarks, 180×180 for the apple-touch-icon on Apple devices, and 512×512 for the Android home screen and web apps. Our tool generates each size from your image.
How to add it
Download the files, drop them into your site, then add the tags provided inside the of your pages. Each tag tells the browser which file to use for which size. The ready-to-paste code is generated automatically in the tool.
Our advice
Keep it simple and square: at 16 pixels, a detailed logo turns into a blur. Go for a clean symbol, an initial or a well-contrasted pictogram that stays recognizable even when it's tiny.
Frequently asked questions
The favicon in practice
Why several sizes?
16 and 32 pixels are for the browser tab and bookmarks. 180 is the iOS home-screen icon (apple-touch-icon), and 512 feeds a web app's manifest. Each context calls for its own resolution.
Do I need an .ico file?
Not really anymore. Current browsers read PNGs declared with link tags, which is what this tool provides. The old .ico mainly serves the default /favicon.ico request, but the tags cover most cases.
How do I add it to my site?
Put the PNG files at the root of your site, then paste the block of link tags into the head of your pages. On a Vivlab store, the favicon is set straight from the settings, with no code to touch.
What goes in a 16 pixel favicon?
Keep it simple: a letter, a monogram or a strong symbol. A full logo becomes unreadable at that size. Aim for clear contrast between the mark and the background so it stays recognisable in a tab.
Is my image sent online?
No. The icons are generated in your browser from your file, and nothing is uploaded. Your visual stays on your device throughout.
Keep exploring