How to Create a Favicon Online Free (Best Favicon Generators 2026)
Want to create a favicon online for free? A favicon is the small icon that appears in browser tabs, bookmarks, phone home screens and even next to your site in Google search results, so it’s an important part of your brand. When we redesigned the QOT favicon in 2012, we drew it pixel by pixel in a free online editor. In 2026 you can still do that, or turn your logo into a complete favicon set in seconds. Here’s how.
Quick answer: To create a favicon online free, upload a square logo (at least 512 x 512 pixels) to a generator such as RealFaviconGenerator or favicon.io, download the icon pack and add it to your site. On WordPress, simply upload a 512 x 512 image under Appearance > Customize > Site Identity > Site Icon, or in the Site Editor for block themes, and WordPress creates the sizes and code for you.
Table of Contents
Best free tools to create a favicon online
- RealFaviconGenerator: upload an image and get every size and file you need (ICO, PNG, SVG, Apple touch icon, web manifest), with previews for each platform and the HTML code.
- favicon.io: make a favicon from text, an emoji or an image. Great if you don’t have a logo yet.
- favicon.cc: the pixel editor we used in 2012. You draw on a 16 x 16 grid, pick colours, preview and download a favicon.ico. It’s fun for simple pixel-art icons.
- Canva or any design app: design a square icon, export it as a 512 x 512 PNG, then run it through a generator.
How to create a favicon online free, step by step
- Start with a simple, square design. One letter, a symbol or a simplified logo works best at 16 x 16 pixels. Fine details and long text disappear.
- Use high contrast so it’s visible on light and dark browser tabs. A transparent background with a coloured shape, or a solid coloured square, both work.
- Upload to a generator and check the previews for desktop tabs, iPhone and Android home screens.
- Download the package and upload the files to your site’s root folder.
- Add the code to your page’s
<head>(the generator gives you the exact lines).
Favicon sizes and code in 2026
You no longer need dozens of files. A modern minimal set is:
<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"> <!-- 180x180 -->
<link rel="manifest" href="/site.webmanifest"> <!-- lists 192 and 512px icons -->The old rel="shortcut icon" tag from our 2012 code isn’t needed any more, and links should use https:// or relative paths.
How to add a favicon in WordPress
- Classic themes: go to Appearance > Customize > Site Identity and click Select site icon. Upload a square image at least 512 x 512 pixels.
- Block themes: in the Site Editor, select the Site Logo block and switch on Use as Site Icon. Recent WordPress versions also show a Site Icon option under Settings > General.
WordPress generates the browser, Apple and Android icon sizes and adds the code automatically. If your theme or SEO plugin also adds favicon code, keep only one source to avoid conflicts.
Make your favicon show in Google search
Google shows favicons next to results on mobile and desktop. To qualify, your favicon should be square, at least 48 x 48 pixels (or a multiple of 48), crawlable by Googlebot, and declared on your homepage. Changes can take days or weeks to appear. Google also shows your site name next to the favicon; see how to set the correct site name in Google Search. For sharp logos on retina screens, read our guide to displaying a sharp logo with srcset.
Frequently asked questions
What size should a favicon be?
Upload a 512 x 512 source image. Browsers use 16 to 32 px versions, Apple uses 180 px and Android uses 192 and 512 px.
Is favicon.ico still needed?
It’s still a good fallback, because some browsers and tools request /favicon.ico automatically.
Why isn’t my new favicon showing?
Browsers cache favicons heavily. Clear the cache or open your site in a private window. Google may take weeks to update it in search.
Can I use an SVG favicon?
Yes. Modern browsers support SVG favicons, which stay sharp at any size and can even adapt to dark mode.
Get our free weekly email: new tech guides and tools, no spam.
New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.
One email a week. Unsubscribe anytime. See our privacy policy.
you can try to generate favicons online.
I found a favicon generator that creates many file formats (.png and .ico) at http://faviconit.com/en
Worth a visit :)
I also want a favicon for my site. And with this help, i think i can easily create one for my site too. By the way can you tell me how to blend the site header logo with the background color( image)?
Favicon are small images which is basically display in the address bar. Many owners use these due to its gives a unique look to your website. It made up of 16 or 32 pixels.
It Amazing QOT Icon
Thanks for this article. Using this creating favicon online will be simple and the easy. I was always in search useful things. You blog is quite useful.
Thank you so much for this post. It was really helpful to me. I am making my website and was looking for the important tools to publisize it and I finally find something.. Can you also tell how to organize rss feeds for the wordpress platform??