<link rel="shortcut icon" href="https://www.website.com/template/img/website/favicon.png?ver=v2.1.31">
We changed our 32x32 png favicon to a 48x48 png favicon, because one of our websites reverted back to the default Wordpress favicon and after deploying the change we noticed that the favicon was reverted back to the Wordpress favicon still on the websites we deployed. So I was wondering if there was a fool-proof way of making sure that our favicon appears on the search result page.
One of the answers I got from Googling was that we should change favicon.png to favicon.ico, but the Google documentation tells us it's not necessary. What changes can we do to make it work without changing the file format?
https://developers.google.com/search/docs/advanced/appearance/favicon-in-search
First, keep in mind that Google can take days or weeks before reflecting your icon in its search results. So any change you make needs patience, unfortunately.
However, you can get insights from Google. Visit https://www.google.com/s2/favicons?domain=www.website.com , just make sure to replace the domain parameter with your own site. There is no evidence that this is what Google is actually using to fill its results pages. But chances are that what this entry point returns is what you can expect in results pages a bit later.
According to me to add a favicon, one should use the .ico image. Otherwise, it might show some issues. Try converting your .png image to .ico by using this converter.
This will work for sure.
Here's a text from a webpage I searched about the favicon.
A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices.
So according to this .ico is mostly preferred over any other extension of the image. Hence I would recommend you to use .ico extension for the image.
Related
Before someone closes this because of mistakenly thinking it is a duplicated question, I'm referring to SVG favicon in particular instead of ICO format. And there is a reason for that.
I'm using an SVG favicon in order to support both light and dark modes. In other words, the icon will change colors automatically thanks to the #media (prefers-color-scheme: dark) query in the SVG file. I also have a favicon.ico placed in the root folder for fallback support (a.k.a. Safari mainly).
Yet, when I open a PDF in a new tab, favicon.svg will not be loaded instead, the favicon.ico is loaded regardless of whether the browser supports SVG favicon. That can be a problem because the two icons will look different in dark mode, where the SVG icon changes colors while the ICO doesn't.
So is there any way to make the browsers display the "correct" icon?
A picture paints a thousand icons
The browser will use favicon.ico or similar for the html content see the left 3 are coloured. However once an embedded frame has full focus it is the pdf viewers task to display any suited icon Here the blob and remote pdf and local pdf do not themselves have a favicon to fall back on.
Each browser pdf extension will be different but generally it is the browser that provides fall back. Lets use an example svg icon
Lets Icon nab it and apply it to another site
now lets try to display that in the iframe only
Clearly no problems in using SVG ico with PDF until you open in another tab
I think you are missing the rule that if there is nothing to display in the current html context then the common FALLBACK is addressRoot/favicon.ico so the browser will use that whatever the browser tab color light or dark. so design your ico to match the svg one. However once the addressRoot/ is clients device there is no favicon.ico other than built into the browser, it really has nothing to do with PDF viewer just that is where its more noticable.
Have this weird case when my images are being found in sources, linked correctly, src url is okay, but still not being displayed. Other images in that same folder are being loaded and displayed just fine, but my new uploaded images are not. I'm using open cart and upload images via ftp. Permissions are fine 644 like the others. I asked other developers in my team and no one has any clue why is that. Guys tried downlaoding and opening the image on their computer and can't even open it, whereas I'm using MAC and can open the same images on my computer without any problems. Images are saved as .jpg from Photoshop. What's the deal here? Here is how it looks in Mozilla:
This can happen because of corrupted image file. Most likely it is the extension problem of the file. Instead of doing save as in Photoshop, try exporting the image through export settings and choose png or jpg format there. It should work fine now, it worked for me.
Just to make sure on this front - Are you uploading them as .JPG or .jpg? If so, the problem may lie there...
If you link to a file that is .jpg and you put .JPG into the code for the link, the link will not work.
Make sure you're not using uppercase JPG as some servers will not read/detect them, and you will not able to see the pictures until you change the extension to lower case jpg.
Also, make sure the color mode, if saving them from Photoshop directly to jpg, is RGB format. If you use any other color mode, it may not display at all. CMYK files for example will not display correctly.
I am working on a site using the one of the twitter bootstrap templates and my JavaScript console is complaining that it is missing:
favicon.ico
ie-emulation-modes-warning.js
I downloaded all of the Bootstrap files from the Bootstrap website. What are these files and do I need them?
If so, where can I get them?
Edit: Thanks guys! Looked into Favicons and didn't realize that is what they are! So simple! lol
By default, browsers look for favicons in your site's root directory. You can use favicon generators online, which (by standard) create 16x16 pixel png-like objects that are used as your site's icon on a browser tab, etc. Just make one of those and drop it in your root directory.
If that doesn't work, you may want to use your inspector (assuming you're using chrome), right click > inspect element > console (or network), and look there to see where your template is looking for the favicon. Just drop the generated .ico file in that folder.
For the JS file, you may be able to find it online, download it, use the inspector again, and drop it wherever your browser is looking for it. This is good for performance—missing files slow roundtrip requests down.
It's something browsers look for by default. Nothing to do with Bootstrap
http://en.wikipedia.org/wiki/Favicon
We used a favicon converter to create multiple image sizes within one .ico file for our website. I am concerned because our new .ico is now 1.6 KB and I don't know if internet browsers will load all of the various image sizes or only the image sizes that they need?
This code is now in the head of all of our web pages:
<link rel="SHORTCUT ICON" href="http://example.com/images/favicon.ico"/>
Because the code is in the head it will be one of the first things that the browser loads before it proceeds to load the rest of each web page.
I am also worried about getting penalized via the Google Caffeine update if we have now significantly increased our page load times for the average browser.
Does anyone know if browsers selectively upload only the image size that they need from the .ico file (small 16 by 16 image)? Or if they in fact upload the entire .ico file (all 1.6 KB)?
1.6 KB is fine for a favicon. You shouldn't run into any speed problems with that. Most browsers (I believe) will just resize the file that you have... you could make it smaller, if you want, but it should be fine as it is.
Also, remember that most users (the ones that don't regularly clear their cache) will only have to load the icon once (i.e. the first time they go to your page), after that, it's temporarily saved to their computer for faster load times.
Hope that helps!
The favicon file is always fully downloaded. However, 1.6KB is not that big. If you could get it to 1.4Kb, it would fit one IP packet, and therefore it would have nearly no impact on your page speed.
If you want to do your best, try using only a 16x16 favicon, and using <link rel="">.. links to provide alternatives for better browsers (mobile phones with retina, those beasts)
The favicon will be used by older browsers as a fallback, and other, more advanced ones will use whatever PNG you provide in the <link> sections.
I have done a favicon.ico for a quick client request, redone my cache but in my firefox it seems to show a blank favicon in the navbar, not sure if its my machine or not as tried on a offline native browser and get the same result however amazingly IE on my local seems to show as expected!
I done a 16x16 favicon based on PNG format to withhold the PNG quality of transparency but as i said above on firefox locally it shows nothing - can onlyone with firefox 2+ 3.x to latest 3.6 run a test for me to see if that can see the rugby ball favicon i have created as want to make sure its working off local before i do their other sites favicons! the site is ramrugby[dot]co[dot]uk
Thanks in advance!
It comes up blank for me.
There is no need to create an .ico file in .png format to retain transparency. ICO will already retain transparency.
The best way to create a proper .ico is to download the .ico photoshop plugin, which adds an additional ".ico" image format to your Photoshop "Save As" image format list.
The plugin is free, and you can get it here:
http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Download that, put it in your Photoshop > Plugins > File Formats folder, and save, then restart Photoshop and you can create icos.