![]() ![]() Other devices will downscale it, but if we provide the source with a high-enough quality, the downscaling won’t hurt the end-user (I’ll come back to this later). Since iOS 8+, iPads have required an image with a 180×180 resolution. The Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. This will allow you to toggle the same icon between light and dark system themes. As with any CSS, it can contain media queries like (prefers-color-scheme: dark). SVG is an XML format and can contain a tag to describes CSS. Your HTML page should have a tag in its with rel="icon", type="image/svg+xml" and with the href containing a link to the SVG file as attributes. As of this writing, 72% of all browsers support SVG icons. ![]() At large sizes, it’s more efficient than raster images. SVG is a vector format that describes curves instead of pixels. A single SVG icon with a light/dark version for modern browsers ico file in order to fix the Chrome bug where it chooses an ICO file over an SVG. Some tools, like RSS readers, just request /favicon.ico from the server and don’t bother looking elsewhere. In that case, you can ask your designer to come up with a special version of the logo that’s tailored to fit small pixel grids.ĭon’t get smart with the folder static asset folder structure and cache busters. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (if it becomes blurry, for instance). ICO files actually have a directory structure and can pack files with different resolutions. This list should work with all popular browsers and devices, both old and new. Now I’ll reveal the minimal set of icons that I came up with during my research and practice. This solves a problem for Internet users that don’t have unlimited data plans.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |