The Favicon Generator — One Favicon to Rule Them All

adminHTML0 Comment
3 min. reading

How many favicons you must prepare for your website? The answer is simple — many! Here is the exact list. And here you’ll find answer why there is so many of them?

And here is a real gem and a true magic! A Favicon Generator!

The auto-machine

All you need, is a fairly big source icon (they say that 260×260 px or more; I used 400×400 px) and about 60 seconds of your time. Everything else is done auto-magically. As a result, you’re getting a bunch of files and a piece of code that you have to put into <head> section of your HTML file.

If you prefer the other way — spend 5-10 minutes, but have a control over everything, you can configure nearly everything. The pre-generator screen has seven sections, eighteens tabs and dozens of configuration options to suit your needs.

In most scenarios, however, you can just hit the Generate your Favicons and HTML code button and leave them all in default values.

A little bit of customization

One thing that I noticed and that I think is worth reporting is the generated code.

In default version it goes like this:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Notice slashes in the beginning of each path.

This works only if you wish to put all generated image files in the root directory or in the same directory as your HTML file using them. But since Favicon Generator generates ten different files with varying and sometimes weird filenames or file extensions, you may want to put them all in a separate folder.

In this case you must omit the opening backslash, if starting path with a subfolder, i.e.:

<!-- https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

That would be all… Oh, no, one more thing…

The cash

Ten image or manifest files and one piece of HTML code was generated for you in a matter of snapping your fingers. How much time did you save this way? Is it worth donating five or ten buck? I bet it is!

Leave a Reply