It seems that Apple guidelines as of August 3, 2010 now include the “High resolution” images (for iPhone 4) in their “required” icon sizes. Looks like we need to provide both a 57×57 and a 114×114 image now, as well as a 640×960 title image. See Custom Icon and Image Creation Guidelines (Javascript required) which … Read more
First, make sure you don’t have a “normal” cache problem by loading the favicon URL directly (put it into the browser’s URL bar) and force-refreshing it. If that does the job, no need for the complicated solution below. IMPORTANT: My original problem cannot have been a cache issue: First, I did clear the cache, second, … Read more
While it’s currently only supported by Firefox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to head section of your page: <link rel=”icon” href=”animated_favicon.gif” type=”image/gif” > Take a look at AnimatedFavIcon.com for additional help and … Read more
From the same WHATWG document: For historical reasons, the icon keyword may be preceded by the keyword “shortcut”. If the “shortcut” keyword is present, it must be come immediately before the icon keyword and the two keywords must be separated by only a single U+0020 SPACE character.
Simply add this to the <head></head> section of your layouts: <%= favicon_link_tag ‘favicon.ico’ %> Place the favicon.ico image in /app/assets/images/ if you are using the asset pipeline, and in /public/images/ if you are not. Also, there is a bug if using Ruby 2.0 with Rails 3.0.20 (and maybe also 3.0.x), that will throws an exception … Read more
Add this option to convert: -background transparent However, keep in mind that your original image must actually have an alpha channel. PNGs may have an alpha channel, JPEGs do not.
Create a /static folder in project root. This will be added to the static export folder. Add favicon file in /static folder. Add _document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com). Add <link rel=”shortcut icon” href=”https://stackoverflow.com/static/favicon.ico” /> to head. npm run build && npm run export P.S. Thanks to the previous answer … Read more
I go for a belt and braces approach here. I create a 32×32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn’t really matter unless you are dealing with older browsers. Place favicon.ico at your site root to support the older browsers (optional and only relevant for older … Read more
With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming. You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device. You should have a look at … Read more
SVG favicons are now supported for Firefox, Chrome, Edge and Opera: https://caniuse.com/#feat=link-icon-svg <link rel=”icon” href=”images/favicon.svg” sizes=”any” type=”image/svg+xml”> Safari remains unsupported, as of v15.x