Favicon generator. For real.
All browsers
All platforms
Drop your favicon image here
No hard decision
With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.Done in 5 minutes
You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.Compelling design, a platform at a time
Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.Instant feedback
How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.Favicon for Google
Google loves icons, and they are a great way to make your sites look good on search results. Good thing RealFaviconGenerator instantly shows how your favicon will look like.So easy
RealFaviconGenerator not only creates your icons, it also generates the corresponding HTML markups along with clear instructions to setup your favicon and even a favicon checker.Favicon checker
Whether you've just created a new favicon and want to make sure it's perfect, or you're troubleshooting an issue and need to understand why something isn't working, our favicon checker can help. See how your favicon appears on different platforms and get detailed technical insights.
Favicon: the reference
Not just a favicon generator. This is all you need to know about favicon. Our guides act a reference material and help you learn about all aspects of favicons.
What is a favicon
The very nature and purpose of a favicon. What are its components and how they are used by browsers and other platforms.
Why your site needs a favicon
Favicon is more important than ever to establish branding and trust. Discover why and take action.
Understanding favicon elements
Which icons are needed exactly? Which purpose do they serve? This is the definitive reference.
Favicon history
From Internet Explorer 5 to the iPhone, from Windows 8 Metro to the SVG icon, learn about the history of the favicon.
All the resources you need for a perfect favicon
Whether you are looking for a quick online service or a full solution to handle more complex cases, RealFaviconGenerator has the right tools for you.
Favicon online creation
How lucky! You've just found the best favicon generator on the web 😅 Installing a favicon depends greatly on the technology you're working with. This is why RealFaviconGenerator comes in different flavors.
Favicon knowledge base and reference
RealFaviconGenerator is based on a ton of research and tests. The favicon blog contains a lot of information about favicons, from how to create an SVG favicon to what Android does with the icons it gets, from how RealFaviconGenerator tests favicon in the wild to the scaling algorithm iOS used to process the touch icon, and much more.
The FAQ has also a lot of information about favicon, such as the current and past conventions, etc.
Favicon verification
Your favicon is ready. But does it work?
If your website is online, use the favicon checker. RealFaviconGenerator verifies your favicon, lets you know how your site appears on various platforms, and give you hints if something is wrong.
If your website is still under development and running on your local machine, use RealFaviconGenerator's CLI tool withnpx realfavicon check <port>
(for example, npx realfavicon check 3000
).
Advanced usage
As a developer, you often need more than an online tool.
Command line
To work in a CLI environment, use npx realfavicon
:
- To create a favicon, use
npx realfavicon generate (...)
. Don't waste your time learning a new CLI. Rather use the favicon creation via CLI tool to get started. - To check the favicon of the web app you're working on, run
npx realfavicon check <post>
. For example, to verify the icons of a Next.js app, you're probably going to usenpx realfavicon check 3000
.
TypeScript/JavaScript for Node and your favorite server-side runtime
You can generate icons and markups right from your code, using the same module RealFaviconGenerator uses internally, @realfavicongenerator/generate-favicon
. But it's much more quicker to start with the Node generation tool to get your first ready-to-use snippet.
Got favicon markups but don't know what to do next? @realfavicongenerator/inject-markups
injects them in your HTML files.
You can also automate the verification of favicon by leveraging @realfavicongenerator/check-favicon
. This module analyzes the favicon of a website and returns a report you can easily process, along with the icons themselves.
Interactive API
You can integrate RealFaviconGenerator's favicon experience to a site builder, thanks to the interactive API. This is how the RealFaviconGenerator for WordPress plugin operates.