How to
How to make a favicon for your website
- Choose where to start. An Image such as your logo, a Text icon made of one to three letters, or an Emoji.
- Style it. For text and emoji, pick the shape, the background color and how large the mark sits in the tile. For an image, choose padding and a background.
- Name your site. The name and theme color go into the web manifest that Android uses when someone adds your site to the home screen.
- Download the zip. It holds favicon.ico, the PNG icons, site.webmanifest and a text file with the HTML.
- Upload and paste. Put the files in your site's root folder and paste the HTML lines inside the head of every page.
What each file is for
favicon.ico holds 16, 32 and 48 pixel icons in one file; browsers and many other tools ask for /favicon.ico on their own. favicon-16x16.png and favicon-32x32.png are the tab icons most browsers prefer when the HTML lists them. apple-touch-icon.png is 180 pixels with a solid background, because iOS does not show transparency on the home screen. The two android-chrome icons at 192 and 512 pixels are listed in site.webmanifest, which also carries your site name and theme color.
WordPress, Shopify and other builders
Most site builders have their own setting for the site icon and create the sizes for you; in WordPress it is called Site Icon. There, upload the 512 pixel android-chrome PNG from the zip. Use the full set and the HTML when you control the page head yourself.
Tip
Only need the .ico? The PNG to ICO converter lets you choose every size in the file, up to 256 pixels for Windows. For a vector logo, SVG to ICO draws each size from the vector.
Questions people ask
How do I create my own favicon?
Pick a simple mark: your logo's symbol, your initial or an emoji. Make it here from an image, a letter or an emoji, download the zip, upload the files to the root of your site and paste the HTML lines into the head of every page. Browsers cache favicons hard, so a new one can take a while to show.
What exactly is a favicon?
It is the small icon that stands for a website: in the browser tab, in bookmarks and history, next to the site in some search results, and on a phone's home screen when someone saves the site. One favicon is really a set of files at different sizes, because each of those places asks for its own size.
What size should a favicon be in 2026?
There is no single size. A current set is a favicon.ico holding 16, 32 and 48 pixels, PNG favicons at 16 and 32, a 180 pixel Apple touch icon for iPhone and iPad, and 192 and 512 pixel icons listed in the web manifest for Android. Start from a square image of at least 512 pixels.
Should the favicon be SVG or PNG?
Use both when you can. An SVG favicon stays sharp at every size and is tiny, and most current browsers accept it, but Safari on iPhone and many apps and link previews still want PNG or ICO files. This generator adds favicon.svg to the zip when you start from an SVG logo with no padding or background.
What is the best favicon design?
Simple and bold. At 16 pixels there is room for one shape or one or two letters, so drop taglines, thin lines and small details. Use strong contrast and test it on light and dark browser tabs. A solid colored tile with a white letter is hard to beat when the logo itself is wide or busy.