Tips and tools for WordPress, Google and more
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.

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.
- https://www.websiteplanet.com/de/webtools/favicon-generator/
- https://tools.dynamicdrive.com/favicon/
- https://www.favicon-generator.org/
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.

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".
thanks for the instructions! cool!
Why 129×129 pixels ?
I don't know, it used to be quoted like that. In the meantime, other sizes are in vogue:
In this respect, the 129×129 seems to have become superfluous. I'll improve it. Thanks for the hint.
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.
@NetHawk Thanks for the hint, I fixed it.
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
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!
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
We have not found a plugin, but maybe this will help: http://cubiq.org/add-to-home-screen
This is probably the most comprehensive guide to favicons:
http://www.jonathantneal.com/blog/understand-the-favicon/
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?
If you are in the
of the HTML file specifies the position of the favicon, the error logs remain unaffected.About Android: maybe this article will help? http://favicons.info/apple-touch-icon.html
PS: since iOS7, Apple has done away with gloss and round corners.
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.
Unfortunately, I don't have the time.
The article from http://favicons.info/apple-touch-icon.html was not sufficient? As I understand it, there are ultimately quite a lot of icons on the server, including my own with -precomposed for Android.
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.