Make a favicon for your website in a minute.
- Pick one of 47,518 free icons or upload your own image.
- Choose a background colour, icon colour, spacing and rounded corners.
- Download every file a modern site needs: favicon.ico, an SVG favicon, the Apple touch icon, Android and web app icons, and a site.webmanifest.
Just upload your files, press the copy code button and add it to your website. It’s free, no sign-up and your image never leaves your device.
1. Choose a picture
Loading…
2. Style it
Preview
Loading…
3. Download
Shown under the icon on phone home screens.
Optional. Pick one to colour the phone browser bar; the preview shows how it looks.
favicon.ico, Apple touch icon, Android and web app icons, site.webmanifest and install notes.
This icon’s licence asks you to credit its author:
Bell Ring Bold Duotone icon by 480 Design (https://www.figma.com/community/file/1166831539721848736/solar-icons-set), licensed under CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/), via IconVulture
4. Add it to your website
- Unzip the pack and upload every file to the top folder of your website, next to your home page, so
yoursite.com/favicon.icoopens. - Copy the code below and paste it inside the
<head>of your pages. - Browsers hold on to old favicons, so open your site in a private window to see the new one.
Paste into your page’s <head>
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><meta name="apple-mobile-web-app-title" content="My website">Where the code goes
- Plain HTML site
- Paste it into the <head> of every .html page. If your pages share a header include, paste it there once.
- Templates (PHP, Blade, Twig, Liquid, Jinja, Handlebars)
- Paste it once into the shared layout or header file that holds the <head>, such as header.php, layouts/app.blade.php, base.html or theme.liquid. Every page then gets it.
- React, Vue or Svelte apps (Vite, Create React App)
- Put the files in the public folder and paste the code into the <head> of index.html.
- Next.js, Nuxt, Astro and similar
- Put the files in the public folder and add the tags to your root layout’s <head> (in Next.js, app/layout.tsx).
- WordPress, Shopify, Squarespace, Wix
- Use the built-in Site Icon or Favicon setting and upload icon-512.png. To add the full pack, paste the code into the theme’s header or the custom code (head) setting.
How to make a favicon
- Pick an icon from the library, or upload a PNG, JPG, GIF, BMP, WebP, ICO or CUR image. On an icon’s page, the Make a favicon button brings it here.
- Choose whether to keep its proportions, crop it or stretch it to a square, then set the background colour, the icon colour, the space around it and the corners.
- Check the preview in a browser tab and on iPhone and Android home screens.
- Download the ZIP, upload the files to your site’s top folder and paste the HTML into your page’s
<head>.
What’s in the favicon pack
| favicon.ico | 16, 32 and 48 px in one file, for browser tabs and bookmarks |
|---|---|
| favicon.svg | A sharp, scalable favicon for modern browsers (library icons) |
| favicon-96x96.png | For search results and browsers that prefer PNG |
| apple-touch-icon.png | 180 × 180 for iPhone and iPad home screens |
| icon-192.png, icon-512.png | Android home screens and installed web apps |
| icon-maskable-512.png | Android icons trimmed to a circle or rounded shape |
| site.webmanifest | Your site’s name, colours and icons for phones |
Favicon questions
What is a favicon?
A favicon is the small icon a browser shows next to your page title in the tab, in bookmarks and in history. Phones also use larger versions when someone adds your site to their home screen, and search engines can show it next to your site in results.
Which favicon files does a website need?
Most sites need favicon.ico for browser tabs, favicon.svg for sharp icons in modern browsers, a 180 × 180 apple-touch-icon.png for iPhone and iPad, 192 × 192 and 512 × 512 PNG icons for Android, and a site.webmanifest file that lists them. This generator makes all of them in one ZIP, with the HTML to paste into your page.
What sizes are inside favicon.ico?
The favicon.ico file holds 16 × 16, 32 × 32 and 48 × 48 pixel images, which covers browser tabs, bookmarks and the Windows taskbar.
Can I make an SVG favicon?
Yes. When you build your favicon from an icon in the Icon Vulture library, the pack includes favicon.svg, which stays sharp at any size. Uploaded photos and other pixel images get PNG and ICO files instead, because they are not vector drawings.
Which image types can I upload?
PNG, JPG, JPEG, GIF, BMP, WebP, ICO and CUR files up to 10 MB. Square pictures work best; otherwise choose to keep the proportions, crop to a square, or stretch to a square.
Is my image uploaded to your server?
No. Your image is read and resized in your own browser, and the ZIP is made there too. It is never sent to Icon Vulture or anyone else.
What is site.webmanifest for?
It is a small text file that tells phones and browsers about your site: its name, its icons and its colours. Android and Chrome read it when someone adds your site to their home screen or installs it as an app, so it shows your icon and name instead of a screenshot or a plain letter. It is also needed for a site to work as an installable web app (PWA). Upload it with the other files and link to it with the manifest tag in the HTML.
What is the theme colour?
The theme colour tints the browser’s address bar on Android phones and in some desktop browsers, and the title bar of a site installed as an app. It is set in site.webmanifest and in the theme-color meta tag. It is optional: pick a brand colour in the Download step and the generator adds it, and the preview shows how the phone browser bar will look. Leave it empty and browsers use their own colours.
Can I change the colour of my favicon?
Yes, for one-colour icons. Library icons drawn in a single colour (solid, outline and two-tone icons) and uploaded images drawn in one colour on a see-through background, like most logos and glyphs, get an Icon colour picker. Multi-colour icons and photos keep their own colours, but you can still add a background colour.
Why does the Apple touch icon have a background?
iPhones and iPads fill any see-through parts of a home-screen icon with black, and round the corners themselves. So the Apple and Android home-screen icons always get a solid background (white unless you pick a colour) and square corners. The Android maskable icon also keeps your picture inside the safe zone, so it isn’t cut off when the phone trims it to a circle.
Is the favicon generator free?
The generator is free with no sign-up. Each icon’s page shows its pack’s licence. Some licences ask you to credit the icon’s author; when you use a library icon, the generator shows the exact credit line to use and adds it to the ZIP.
How do I add the favicon to my website?
Unzip the pack, upload the files to the top folder of your website, and paste the HTML shown on this page into the <head> of every page, or once into the shared layout or header template if your site uses one. Step 4 on this page shows where that is for common platforms. The ZIP includes the same steps in HOW-TO-INSTALL.txt. Browsers keep old favicons for a while, so check it in a private window.