I have a favicon with the dimensions of height=26px / width=20px named favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
However, in my browser, my favicon.png is all distorted.
Question: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?
favicon.ico is 16x16
<link rel="shortcut icon" href="favicon.ico"/>
And I use these ones to be beautiful in mobile and tablet:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">
It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.
I use faviconit.com for the best browser and device support possible. You upload an image and this site gives you the code, the converted images and a browserconfig file.
We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.
But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).
And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!
Example code of what faviconit would give you, next to all the converted images:
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
Upload a file named browserconfig.xml (to enable the tiles in windows >8)
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
16x16 pixels, *.ico format.
No, you can't use a non-standard size or dimension, as it'd wreak havoc on peoples' browsers wherever the icons are displayed. You could make it 12x16 (with four pixels of white/transparent padding on the 12 pixel side) to preserve your aspect ratio, but you can't go bigger (well, you can, but the browser'll shrink it).
Wikipedia has this to say:
Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).
I think the best way is to use a 32x32 gif and test it with different browsers.
The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.
To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.
The favicon is supported by several files:
favicon.ico icon.In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.icoAlthough all desktop browsers can deal with this icon, it is primarily for older version of IE.
The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.
An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico.
For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.
Declare the favicon with:
<link rel="icon" href="/path/to/icons/favicon.ico">
However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.
Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.
What are the recommended sizes? Pick your favorite platforms:
The PNG icons are declared with:
<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...
Beware: Firefox does not support the edit: fixed in 2016.sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.
Also note that Chrome does not support the edit: fixed in 2018.sizes attribute and tends to load all declared icons. Better not declare too many icons.
This question is about desktop favicon so there is no need to delve too much in this topic.
Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).
Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.
Microsoft defines the tile picture and the browserconfig.xml file.
Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. - How to Add a Favicon to your Site - QA @ W3C
The format of favicon must be square otherwise the browser will stretch it. Unfortunatelly, Internet Explorer < 11 do not support .gif, or .png filetypes, but only Microsoft's .ico format. You can use some "favicon generator" app like: http://favicon-generator.org/
Simply add this to the head of your document:
<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.
Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.
The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px (3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.
Seems like your file should be .ico type.
Check this post about favicons:
Source: Stackoverflow.com