Favicon Generator
Minimum effort, maximum recognition value: With the favicon generator you can easily and free of charge create a favicon and embed it on your website. You want a logo made of letters instead? No problem thanks to the letter generator!
Edge herunterladen | Chrome herunterladen | Firefox herunterladen
How does our favicon generator work?
Our favicon generator is very easy to use: upload the image file, edit it, preview it, download it—and your ICO icon is ready to use! So you don't have to spend a lot of time using image editing software, but can do everything directly online.
- Upload your image for the favicon, if you already have one. Alternatively, you can design a logo according to your preferences in the letter generator. Please note: The image should be square and at least 310 x 310 pixels in size for uploading.
- The favicon generator converts the image into ICO and PNG files. Your icon will then have a format that all browsers support. With the preview function, you can see how the result will look in the browser and in the app version.
- All you need is to download it and you're done! You can download the favicon as a ZIP file and then embed it on your website at any time.
Once you have integrated the favicon on your website, the small graphic now appears next to the URL in the browser address bar and, since recently, also directly in the Google search results.
In 3 steps to your own favicon, without any graphics software: With our favicon generator, you can create a recognisable icon for your brand in just a few minutes.
What actually is an ICO file?
ICO is a Windows icon file and, to a certain extent, a complete package: The file consists of several layers and contains PNG image files in different sizes on these layers. Depending on where the favicon is displayed, the browser uses a different image file from the ICO file. Common ICO sizes are 16 x 16 pixels, 32 x 32 pixels and 48 x 48 pixels. Theoretically, other file formats (PNG, GIF) can also be used as favicons - but only with more recent browser versions. The safe solution for Internet Explorer & Co. is still ICO.
The perfect favicon
What should a favicon actually look like? First and foremost, not too cluttered! Depending on the device and browser on which the favicon appears, a very detailed icon may not be displayed correctly. Google, for example, uses a simple "G" in the characteristic Google colours. You are on the safe side with letters, a logo or an emoji!
Can I also use the favicon for apps?
Yes, that's possible. App icons are the small symbols that you tap on when you want to open an app on your smartphone (so-called touch icons). You can also create these with our generator. The ZIP file contains all icon formats that are required for correct display on mobile devices. These include sizes such as 57 x 57px, 72 x 72px or 144 x 144px or larger.
Not having a favicon creates browser errors. So get creating right away!
Why you shouldn't ignore favicons
One good reason for using favicons is the fact that they have a high recognition value. Images are more appealing than pure text—so it's high time for the icon feature on your own website! Moreover, it can have a negative effect on Google's page ranking if the favicon is missing. This is because the browser automatically searches for this graphic and sends an error message if no icon is found. This, in turn, increases your website's loading time.
The favicon is ready and—now what?
You can integrate the finished favicon into the main directory of your domain with a simple command. All you need is an FTP programme such as FileZilla and the following HTML commands. These commands must be inserted in the HTML file in the <head>-part.
<html>
<head>
<!-- For Apple devices -->
<link rel="apple-touch-icon" sizes="180x180" href="[PATH TO THE ICON]/apple-touch-icon-180x180.png">
<!-- For browsers -->
<link rel="shortcut icon" type="image/x-icon" href="[PATH TO THE ICON]/favicon-32x32.ico">
<link rel="icon" type="image/png" sizes="96x96" href="[PATH TO THE ICON]/favicon-96x96.png">
<!-- For Windows -->
<meta name="msapplication-square310x310logo" content="[PATH TO THE ICON]/mstile-310x310.png">
<meta name="msapplication-TileColor" content="[HEX COLOUR (z.B. #000000)]">
</head>
<body>
<h1>Favicons!</h1>
</body>
</html>Enter these lines in the head area of the root directory. Alternatively, many CMS offer the option of integrating the favicon via the media library in the backend (see below). Our tip: Delete the browser cache after integrating the favicon, since it might not load right away otherwise.
For websites, blogs and online shops
Webmasters love favicons because they are a worthwhile addition to any web project. From small blogs on Blogger, Tumblr or WordPress to online shops and large corporate websites - favicons attract attention and give the brand a high recognition value.
On all browsers and devices
Your favicon will be displayed correctly in all browsers and on the desktops and home screens of all devices, including tablets and smartphones. The files and formats created are compatible with the individual specifications of all browsers.
Standardised image formats
The favicon generator provides files in various sizes completely free of charge. You can create the corresponding icon online and use it as you wish. This ensures that your icons look the same on every platform—no matter what device the site visitors use.
Different file formats and sizes
You also receive the corresponding app icons for Android, iOS and Windows in numerous other formats. This way you can decide for yourself how and in which format you want to use the generated files.