Furthermore, a favicon is always shown near the address or the name of the website, every single time when you use the browser. In the majority of cases, the favicon is a square with a size of 16 by 16 pixels saved in a favicon. ico format.
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons. The favicon is supported by several files: A favicon.
There are several ways to create a favicon. The best way for you depends on various factors:
If you want to get the job done well and quickly, you can use a favicon generator. This one creates the pictures and HTML code for all major desktop and mobiles browsers. Full disclosure: I'm the author of this site.
Advantages of such solution: it's quick and all compatibility considerations were already addressed for you.
As you suggest, you can create a favicon.ico
file which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).
Then, declare it in your HTML code:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
This method will work with all desktop browsers, old and new. But most mobile browsers will ignore the favicon.
About your suggestion of placing the favicon.ico
file in the root and not declaring it: beware, although this technique works on most browsers, it is not 100% reliable. For example Windows Safari cannot find it (granted: this browser is somehow deprecated on Windows, but you get the point). This technique is useful when combined with PNG icons (for modern browsers).
In your question, you do not mention the mobile browsers. Most of them will ignore the favicon.ico
file. Although your site may be dedicated to desktop browsers, chances are that you don't want to ignore mobile browsers altogether.
You can achieve a good compatibility with:
favicon.ico
, see above.Declare them with
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
This is not the full story, but it's good enough in most cases.
I used https://iconifier.net I uploaded my image, downloaded images zip file, added images to my server, followed the directions on the site including adding the links to my index.html and it worked. My favicon now shows on my iPhone in Safari when 'Add to home screen'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With