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 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 in more recent browser versions.
The perfect favicon
What should a favicon actually look like? First and foremost, don't overload it! Depending on the device and browser on which the favicon appears, a very detailed icon may not display 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 use favicons for apps too?
Yes, you can. App icons are the small icons you tap on your smartphone to open an app (so-called touch icons). You can also create these using our generator. The ZIP file contains all the icon formats needed for correct display on mobile devices. These include sizes such as 57 x 57px, 72 x 72px or 144 x 144px or larger.
Browsers automatically check for favicons and display an error message if they can't find an icon. So why not create them – it's easy to do, so get started 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 into 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.
FAQ: Frequently asked questions
about favicons
- What are favicons?
A favicon is a small icon, symbol or logo measuring 16 x 16 or 32 x 32 pixels that is used by web browsers to increase the recognition value of a website. It appears, among other places, in the bookmarks list (favourites), on the tabs and, in Windows, when a page is saved in the taskbar or set up as a tile. The icons go back to the Microsoft computer group, whose Internet Explorer 5 first displayed favicons in 1999.
- How do I create a favicon?
The simplest way to create a favicon is using an online generator. All you need to do is upload the image you want to use, edit it and then download it in ICO and PNG format. Alternatively, you can use the generator to create a letter icon.
- How do I integrate my favicon into my website?
You can use an HTML command in the header in the main directory to include a favicon at any time:
<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>- How does the integration into a CMS (e.g. in WordPress) work?
Many popular CMS offer the option of changing the favicon in the backend. For example, with WordPress (from version 4.3), you can upload the favicon to the media library and select it as the new website icon under the Website Information menu item. The recommended size is 512 x 512 pixels.
In the Joomla backend, you can search for your template under Extensions/Templates. You then just need to upload the new favicon via the template directory. If these options do not work with your CMS, it is best to integrate the icon via the main directory as described above.
- Can I only create the favicon using an online generator?
No, it is also possible to create favicons using graphics software such as GIMP or Photoshop. Those who are familiar with these programs can, of course, also proceed in this way. However, the online tool is easier to use for absolute beginners.