Use favicon (website icon) in websites

A frequently asked question in courses and workshops about website production concerns the setup of the favicon ("favorite icon"), as it is visible in the address bar of browsers or as a symbol of the website in the browser's bookmark list.

Website icon in the browser tab

To make such graphics usable for your own website, they must first be created and then uploaded to the web server. You may then need to specify in the HTML source code where these graphics are located on the web server.

Favicon/Website icon

By default, the file that represents the favicon should also have the name favicon.ico have. The graphic format of the favicon is now freely selectable (GIF or PNG are also possible). The results are beautiful if you use PNG files with a transparent background.

Manufacture

The easiest way to do this is to use an online tool. With some tools, you can also draw the content yourself.

Or you can create a square graphic on your own computer and have this file converted into a favicon.ico file. This will probably give you a more attractive result.

Filing

The favicon is stored either under the name favicon.ico in the top directory of the website (e.g. http://de.wikipedia.org/favicon.ico) or in another location on the website, which you then have to tell the browser.

<link rel="icon" type="image/x-icon" href="/unterverzeichnis/favicon.ico">

If you store the file in the top directory of the website, you do not need to specify the location, because browsers search for favicon.ico.

In the case of WordPress you can easily add your favicon - WordPress also says Website icon - in the Customizer upload.

Website icon in the Customizer

To the Wikipedia article about the favicon

For the recommendation:

Would you like to be informed quickly about new articles and more?

Then we recommend that you subscribe to our newsletter "Online Marketing News from E-Werkstatt".


Heinz Duschanek
Heinz Duschanek

Heinz Duschanek founded the online marketing agency E-Werkstatt in 2003. Having previously worked in radio (Radio CD International, Ö1, Ö3), he is now particularly pleased with the direction that online marketing is taking. This gives him an excuse to buy lots of electrical devices and gadgets for audio and video.

Heinz is also interested in Tango Argentino (since 2009), Lindy Hop, Wing-Tsun, boxing and (jazz/blues) guitar.

15 Comments

  1. The rel attribute "shortcut" should be omitted from the favicon link. It doesn't even exist in the HTML standard and was once Microsoft's idea, but it has died. It is therefore perfectly sufficient to use link rel="icon" to write.

  2. Is it possible to create an Apple Touch icon automatically? In other words, I want the visitor to only have to press a button and the icon lands on the iPhone...! Is that even possible? And if so, how?
    Thank you very much

  3. I have now found a way, as bookmarks in Safari can only be made manually. There is here a script that makes the "installation" easier for the user. Otherwise I have not found a better solution!

  4. Hello, I am looking for a plugin for WordPress, which gives the user a hint when calling a WordPress theme on a mobile device from Apple in Safari that he can call the website directly via Apple Touch.

    I have already seen this on various sites and would like to make it available to my customers.

    I hope the question was understandable.

    LG Pascal

  5. I would always place a favicon at the top, as it is usually searched for there, and if it cannot be found there, the server's error logs will be cluttered.

    I have a question about the touch icons that I can't find an answer to. If you use precomposed to also address Android users, Apple does not add any gloss or round corners. Is it possible to use both at the same time, one with precomposed icons and one without?

  6. Linking via HTML is of course a prerequisite, otherwise it can't work at all. Nevertheless, I have seen often enough in the past how clients were not bothered by this and made queries to the document root directory. Maybe it's better today, I don't know, but you can avoid all the trouble by placing the favicon there. You also save the markup of the link if you stick to this convention.

    That with iOS 7 is of course relevant. The question is how widespread older versions are. Can you research this and update or rewrite the article? There are quite a few instructions on the net, but all the ones I have found so far are outdated or quite incomplete. Unfortunately, I haven't seen any up-to-date instructions that deal with the topic exhaustively.

  7. To be honest, I hadn't looked at it that closely yet, but now I have.

    Unfortunately, it seems to me that the author only has half-knowledge. What about the order of the links, for example? Is it arbitrary, or do some clients abort the search when they have found the first suitable one? Still, better than nothing, I'll look for further information if necessary, and then there's still testing, testing, testing.

Leave a Reply

Your email address will not be published. Required fields are marked *