This is how I have set up the icon-links in my header.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="/screen/favicon.png" sizes="192x192">
My 16x16 favicon.ico shows a simplified version of my logo, which looks much better than a downscaled version of a larger PNG. For the touch-icons on mobile devices I have created a 192x192 png of my original logo. Since I added that larger PNG to my header, it is not only used (correctly) as a touch-icon, but also replaces the 16x16 favicon.ico. Thus on the browsers the downscaled png-version is display. I dislike it, cause the ico-version looks better.
Is there any way, to force the display of the ico-version of my favicon in browsers?
If the reason of your high-resolution image/png icon is Android, then you should declare it via a web manifest.
This is what RealFaviconGenerator does: it only declares low-resolution image/png icons in the HTML. So desktop browsers only pick those, whereas Android get the high resolution icons it expects. Even if you don't plan to use the service, you can generate a fake set of icons and adapt the generated code and files to your needs.
Full disclosure: I'm the author of this service.
Are there any alternatives to the default option in web browsers, like chrome that allows me to add a link or button in my webapp and create an icon in homescreen?
For example, I have my webapp and i want a link or button in the main.html that execute an script and create the icon in the homescreen. It is not possible i think. So are there any alternatives that simulate this default option in web browsers?
Also i want to specify the icon that shows in the homescreen. How can i do that?
I want to specify the icon that shows in the home screen. How can i do that?
You can use <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> (yes, even for Android device).
Please check iOS document for detail information on Apple devices. Please note you can even define icon for the entire website.
Please check Android document for detail information on Android devices. If <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> does not work, you can try <link rel="icon" sizes="192x192" href="nice-highres.png">, which is the recommended method in Android.
Are there any alternatives that simulate this default option in web browsers?
You can check http://cubiq.org/add-to-home-screen for an alternative. "add-to-home-screen" will show an overlaying message encouraging user to add the web app to the homescreen.
Note: Thanks to adam0404's comment, cubiq.org link is broken now. Fortunately, the "add-to-home-screen" library was uploaded to GitHub, please check https://github.com/cubiq/add-to-homescreen
First line apply to Web and Android, second line apply to iOS omit sizes tag to specify only one icon.
if jpg
<link rel="shortcut icon" type="image/jpeg" href="favicon.jpg">
<link rel="apple-touch-icon" href="favicon.jpg">
if png
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
the last opened pages got a shortcut in chrome and safari on smartphone. but my page not.
how do I set up the picture for this?
for example ikea and bild works
favicon is set
<link rel="shortcut icon" href="include/designs/wirte/favicon.ico">
<link rel="shortcut icon" href="include/designs/design/images/favicon.png" type="image/x-icon">
<link rel="icon" href="include/designs/design/images/favicon.png" type="image/x-icon">
iOS Safari uses the Apple Touch icon for this purpose and also bookmarks and home screen icons. You definitely want to declare this one.
Android Chrome is similar, it reuses the icon it already takes for bookmarks and home screen icons:
A high resolution icon declared in a Web App manifest.
Else, a high resolution PNG icon.
Else, the classic Apple Touch icon.
As an alternative to the classic, manual creation, you can use this online favicon generator. It allows you to design your icons platform per platform and creates the icons and HTML you need to get the job done. Full disclosure: I'm the author of this site.
Add this code with your favicon.
<link rel="SHORTCUT ICON" HREF="/favicon.png">
After going through the page source, I found:
<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69">
But even after I did that, my image still has a bored effect. My image is also a transparent png. Any ideas?
Here is my attempt (10.10.1 OS X Yosemite, Safari: Version 8.0.2):
I used this website to generate the favico:
http://realfavicongenerator.net
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Two things in this answer:
How I did to reproduce StackOverflow's behavior
Why this may not be a good idea
How to reproduce StackOverflow's behavior
What I did:
Download http:////cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png
Submit this picture to RealFaviconGenerator (full disclosure: I'm the author of this site)
Put the generated pics and HTML in a test web site
Access it with Safari and add a bookmark
I got your expected result, ie. a transparent background.
This is basically what you did, so there must be something wrong. A few tips:
There can be a lot of issues with favicon, whatever the browser. They often cache the old icon and do not load the new one. Sometimes they do not load your icon at all, but load it if you wait a few seconds. And so on. My advice: try to use another domain to make sure you start from a fresh state.
Maybe your test web site as some additional stuff that can conflict with your actual test. For example, if you have a file apple-touch-icon.png in your root directory, Safari may load it, even if it is not declared in your HTML code.
Why this may not be a good idea
Mac OS Safari relies on the Touch icon, primarily designed for iOS. It is mainly used for the "Add to home screen" feature. In that case, iOS prevents transparency and fills transparent regions with black. Add StackOverflow.com to the home screen and you get:
Honestly the result is okay, but is this really what SO expected? Your choice.
I figured out the problem here.
The farthest one on the right has a TLD of .io
The center one has a TLD of .com
They are exact clones, the same code on. So it must be because the domain TLD is not .com/.net
Edit:
To further recap information I found about this. It seems like adding a www in front of my domain, allows it to be fully transparent.
mysite.com works
www.mysite.com works
mysite.io doesn't work
www.mysite.io works
Transparent Apple Touch icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac or a similar program on Windows. I did extensive research and stumbled on the answer by looking at the Apple Touch icon used by the Virtual DJ site. This icon keeps its transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac's Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!
I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.
Is this possible? Would an iPad-friendly 72×72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16×16 or 32×32 image?
Update for 2020: Sticking to the original question of 16x16 versus 32x32 icons: the current recommendation should be to provide a 32x32 icon, skipping 16x16 entirely. All current browsers and devices support 32x32 icons. The icon will routinely be upscaled to as much as 192x192 depending on the environment (assuming there are no larger sizes available or the system didn't recognize them). Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.
For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.
For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.
Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Look at this favicon pictures list for a complete reference.
TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.
Short answer
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.
Long, comprehensive answer
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.
The favicon is supported by several files:
A favicon.ico icon.
Some other PNG icons.
In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.ico
Although 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.
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:
Most desktop browsers: 16x16, 32x32, "as big as possible"
Android Chrome: 192x192
Google TV: 96x96
... and others that are more or less documented.
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 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. edit: fixed in 2016.
Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons. edit: fixed in 2018.
Mobile platforms
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.
Conclusion
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.
I don't see any up to date info listed here, so here goes:
To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:
16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile
2021 standards thanks to faviconit
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">
Since Windows 8
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">
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.
I am not sure if/how browsers scale large icons, but The W3C suggests the following1:
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.
1 w3c.org: How to Add a Favicon to your Site (Draft in development).
Actually, to make your favicon work in all browsers properly, you will have to add more than 10 files in the correct sizes and formats.
My friend and I have created an App just for this! you can find it in faviconit.com
We did this, so people don't have to create all these images and the correct tags by hand, create all of them used to annoy me a lot!
The simplest solution (2021)
Use one(!) SVG image
If you do not care about supporting Safari, you can use a single SVG icon:
<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any">
Use one(!) PNG image
If you want full support*, you should 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.
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.
*Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.
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.
Simple solution for modern browsers (2022)
Use an SVG favicon:
<link rel="icon" href="/icon.svg">
Supported by major browsers (except Safari in 2021) and Living Standard
Only 1 short line of code and simple to remember
Other attributes like type and sizes are not necessary
Scales much better at any size compared to PNG
Let's end the favicon craziness with hundreds of different sizes...
You can have multiple sizes of icons in the same file. I routinely create favicons (.ico file) that are 48, 32, and 16 pixels. You can add in any size image you want. The question is, will the iPhone use an ico file?
ico also supports transparency, but I'm not sure if it's an alpha channel like PNG; probably more like GIF where it's on or it's off.
According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.
I would stick with two different icons.
As I learned, no one of those several solutions are perfects. Using a favicon generator is indeed a good solution but their number is overwhelming and it's hard to choose. I d'like to add that if you want your website to be PWA enabled, you need to provide also a 512x512 icon as stated by Google Devs :
icons including a 192px and a 512px version
I didn't met a lot of favicon generators enforcing that criteria (firebase does, but there is a lot of things it doesn't do). So the solution must be a mix of many other solutions.
I don't know, today at the begining of 2020 if providing a 16x16, 32x32 still relevant. I guess it still matters in certain context like, for example, if your users still use IE for some reason (this stills happen in some privates companies which doesn't migrate to a newer browser for some reasons)
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).
You will need separate files for each resolution I am afraid. There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
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/
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.
Seems like your file should be .ico type.
Check this post about favicons:
http://www.html-kit.com/support/favicon/image-size/
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 favicon doesn't have to be 16x16 or 32x32. You can create a favicon that is 80x80 or 100x100, just make sure that both values are the same size, and obviously don't make it too large or too small, choose a reasonable size.
May I remind everybody that the question was:
I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon? Is this possible? Would an iPad-friendly 72x72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16x16 or 32x32 image?
The answer is: YES, that is possible! YES, it will be scaled. NO, you do not need a 'regular browser favicon'. Please look at this answer: https://stackoverflow.com/a/48646940/2397550