Hot answers tagged

8

Your icon should be square. It needs to be resized in a variety of ways to support every browser and application that will use it. It is fine to use PNG files, but you should create an ICO file with multiple sizes in it. This cuts down on the number of meta tags you have to use. You can name your files however you like. It is fine to use the default ...


7

After a lot of testing I was able to get large icons working for my website (in Firefox 57.0.4). I think it is important to use a large (>100px) icon and specify the size: <link rel="icon" type='image/png' sizes='256x256' href="/applogo_256.png"/> In addition Firefox seems to cache the preview quite aggressively, so I needed to use a new Profile to ...


6

How to pick which version of .ico image is favicon? With regards to a favicon and an HTML link element you can't. Or rather, you don't; the system does (or should, theoretically). Whilst an .ico file can store multiple images, the general idea is to be able to store multiple versions of the same image at different resolutions (16x16, 32x32, 64x64, etc.) ...


4

You can name the favicon whatever you want - the minimal needed for a client to read it is: <link rel="icon" href="some-changing-file-name.ico"> The 'shortcut' part is depreciated. If you're changing the file name, there's no need for the querystring. The whole point of a query string on a favicon is to force an update even though the assets URI ...


4

Apple docs says: To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png So file in ICO format definitely won't work.


3

This appears to be a "Chrome thing" from as far back as 2010. It has been reported and marked as a verified bug and also reported as fixed as of version 29 back in 2013 but this doesn't seem to be the actual case as there has also been many reports that Chrome is still sending requests to favicons on it's own without the request being part of the pages ...


3

I've always used the favicon generator at realfavicongenerator.net, which allows you to see how your chosen artwork will appear on different devices. There are quite a few options and you can try with their example icon to test. Start with a square SVG for the best results as the site will convert it to the necessary formats and give you a compressed folder ...


3

I decoded that image and opened it with Firefox. Firefox was able to read it just fine. I visited your website (found through reverse image search for the icon) and confirmed that in Firefox, the icon does not show up in the tab. I looked at your source code. You should add the following code into the head of your website. It will trigger browsers other ...


3

The favicon CAN have an effect on SEO. I saw one case where a website had a favicon that was about 400kb in size - slowing the website down. Speed is a Google ranking factor and slow loading sites likely have poor metrics, which can also negatively affect SEO. Also, most browsers automatically look for a file called favicon.ico in the root folder of a ...


2

I put my favicon.ico image in my public/ folder in my rails app. Then I deployed to heroku and had to clear my browser cache before the new one showed up.


2

Browsers tend to cache favicons for longer than normal files, so trying to use it as your counter would probably make the counter quite unreliable. Even if it worked this would slow down your page unnecessarily, since you're adding a redirect into the mix. Just stick with the standard code, and if the favicon errors are a problem use one of the options bybe ...


2

Certain browsers will always search for a favicon and will carry on doing so until you place the file. There is absolutely no reason why you should need to put a 307 or any other redirect method for that matter simply to get rid of a 404 error. 404's does not imply your site is broken It's important to note that errors 404 does not indicate that something ...


2

Some bots and older browsers Some bots and older browsers will ignore custom favicon paths and will attempt to fetch a locally stored favicon from the root /. A simple fix would be to copy the favicon from the CDN and store it locally on the site just to satisfy those bots and browsers, you could also setup a redirect using something like redirect 301 /...


2

The two URLs you reference are most probably requested from iOS (iPhone, iPad) devices. If you check the access logs on your server, you can (in the most part) find out who/what exactly is requesting these resources. Do I really need these faviocons on my site? If you want to give iPhone and iPad users the best experience then yes. Otherwise it's not a ...


2

Another one that I've noticed is browserconfig.xml which is some bastardisation requested by IE. Bloody rubbish filling up the logs.


1

Create a 158 x 158 image to be used as an icon. Save your creation as a .png file to a location on your server. Note down the path e.g https://example.com/images/apple-touch-icon.png. Now you just need to add a simple little line of code to the index.php of your site to let phones know that you want it to use your icon whenever someone bookmarks your site or ...


1

The solution to my problem was to unblock Google Image's crawler from scanning my website. The robots.txt file looked like so - ‎User-agent: Googlebot-Image Disallow: /‎ I removed the above lines from the robots.txt file and Google started showing the favicon on the search results within 2-3 days. I repeated the process for another domain that had the ...


1

It's true that by default the browser only checks the /favicon.ico path, however we can use an HTML meta tag to tell it explicitly where the favicon is if it's at a different path or in a different image format than .ico. In addition to .ico, you can use the .gif and .png file formats in all modern browsers as long as you use an HTML meta tag on your page ...


1

No, favicon is mostly affecting user experience and the brand awareness it wont have any affect on SEO. Read more about favicons: https://www.woorank.com/en/blog/the-importance-of-favicons-for-seo


1

Whether you really need them or not is determined by whether or not you want to cater to users on all devices. iOS uses different icons than Android which uses different icons than Windows. I've found http://realfavicongenerator.net/ to be the simplest way to generate everything for me all at once. All you have to do is create one "favicon" image at least ...


1

Ok, another hour of trial and error, I think I finally found the answer. The problem is caused by this code: <link rel="apple-touch-icon" sizes="57x57" href="https://***/wp-content/themes/***/favicons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="https://***/wp-content/themes/***/favicons/apple-icon-60x60.png"> <...


1

Why not generate most icons on the fly? In PHP (and probably other server-side scripting languages), there are functions you can use to generate an image and display it on the screen based on size. Also, use a script that rewrites URLs on the server software. Here's how you can do it with apache and PHP. In the apache config file, add these lines: ...


1

If you really want to set a small keepalive timeout. You can do that. NOTE: the tests are no longer available on webpagetest, so I couldn't see them. I'm assuming that the connection isn't used for a few seconds and then the favicon is requested. You have two options. Accept that a new connection is required the first time the favicon is requested. ...


1

Method 1 (HTML 4.01) You can use this code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head profile="http://www.w3.org/2005/10/profile"> <link rel="icon" type="image/png" href="...


1

It would be worth looking at the user-agent values for those requests causing the 404's. As previously asked/answered, browsers will normally follow the <link> location before any default request is made against the root folder of the site. The error logs you are seeing are due to your file locations being in other directories. Most browsers will find ...


1

location = /favicon.ico { return 307 http://mc.yandex.ru/watch/XXX; } seems to work; however, it would seem like only certain browsers request a favicon.ico by default, so, not all visitors would be counted. Also, it has a limitation of not letting you know which pages are popular on your site: when a redirect is made, it is likely that the ...


1

16px is compatible with all browsers and often found in the following locations, the address bar, tabs, bookmarks. 24px Internet Explorer 9 (Pinned Sites). 32px Internet Explorer 9, Taskbar in Windows 7 and 8, Safari’s side bar. 57px Standard iOS size iPhone first generation to 3G+, iPod Touch 72px Apple iPad Home Icon 96px Supported by Google's TV platform ...


1

You should also change the order from lowest resolution, to highest. Since the browsers will use the last instance that they can use. Your: <link rel="icon" type="image/png" href="favicon.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon" href="favicon.png"> Should be: <link rel="shortcut icon" href="...


1

Added the code still got error on "about:blank" Then changed to code below: No more error message from Chrome Developer Tool. <link rel="shortcut icon" href="#">


1

Newer apple versions request these files (in this order) /apple-touch-icon-120x120-precomposed.png /apple-touch-icon-120x120.png /apple-touch-icon-precomposed.png /apple-touch-icon.png


Only top voted, non community-wiki answers of a minimum length are eligible