Start / Website guide / Website maintenance / Use favicons correctly

Website maintenanceUse favicons correctly

Favicons are small graphics that serve to symbolise a website by displaying e.g. the company logo. Originally used for display in the header/tab area of the browser window or in bookmark and favourites lists (hence favicon), these icons now fulfil many other functions. We show you what they are and how to use them.

Matthias Speth, 16 December 2021

Picture of a beautifully tidy garden

Favicons are small graphics that serve to symbolise a website by displaying e.g. the company logo.
In the past, people tended to use them in the header/tab area of the browser window or in the bookmark and favourites lists (hence favicon). Today, these icons fulfil many other functions. This also has to do with the increased use of mobile phones.

For example, it is possible to link a homepage directly on the screen of a smartphone. This way you can open it at any time with just one tap.
For this, the favicon graphics must have properties that go beyond the requirements that were common in the past.
For the original browser functions, an image size of 16×16 px was sufficient. Currently, the size should be at least 512×512 px. Smaller favicons often look rough and pixelated on high-resolution tablet or smartphone displays.

Colour transparency is possible for favicons. Displaying one's own logo on a transparent background, for example, means that the logo is shown on the respective background without a possibly disturbing frame. What looks particularly elegant in the browser can, however, be rather unfavourable when linked on the tablet display. Here, depending on the nature of the logo, it can appear cleaner and clearer to have a defined background and thus just a visible frame.

Then it is a matter of integrating the graphics provided for the various systems (iOS/MacOS, Android, Windows, ...) in the source code of the website in a suitable manner.

Of course, it's all very easy with Mainetcare's RundUmsorgt package: we create your favicon according to your wishes and specifications and embed it on the website.