The way I use to display the favicon on my website is to add a favicon.ico in the root folder.
It is working alright on the tabs of the desktop and also the tabs on Chrome in phone itself, but when it's in the quick links, I only see the first letter of my website name. so if the domain is example.com I see E instead of the favicon:
Will I have to add meta tag for favicon to make it show here, or it has nothing to do with it?
favicon.ico is used for low resolution icons, such as the one that appears in the tab. However, bookmark and add-to-home-screen images must be high resolution icons.
In order to have such icons for Android Chrome:
Preferably, provide a Web App Manifest, along with a 192x192 icon.
If you don't want to create such file, you can provide a 180x180 Apple Touch icon. It is simpler and more platforms support it (eg. iOS Safari).
As an alternative, you can use online favicon generators, such as RealFaviconGenerator, to create all these files for you. Full disclosure: I'm the author of this service.
Related
I was wondering if it is possible to add an icon to your own website to show in the tab of your browser in Quarto? Here you can see an example of my website tab without an icon and the website of Quarto with an icon:
I can imagine there should be an option using the Bootstrap Icons as you can use in your sidebar and navigation bar. But how is this possible for the browser tab?
You could use this website called realfavicongenerator to generate a favicon. You only need to set the .png file generated on that site, in your right directory and set the name of the file in your .yml file like this:
website:
favicon: icon.png
icon.png is the image of the favicon. It seems that now all browser are supported by what I know.
Google Chrome
For Google chrome the result looks like this:
This works!
Safari
When I do the same and open it in safari it returns:
As you can see it doesn't return the favicon.
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.
I have a page that displays the incorrect favicon when I view its source.
In the following image, you can see in the first tab (which is viewing the page) using the correct favicon - favicon-tenaya.ico.
However, when you go to view the page's source via Ctrl + U, it seems to display the default favicon - favico.ico, which is in the website's root folder:
Is there a way to get around this? We don't want the favicon changing when they view the source. How does the view source page in Chrome decide which favicon to use?
Viewing the source of a page is browser-dependent. There nothing you can do to force it to display a specific icon. For example, Firefox doesn't display any icon at all for a "View source" tab.
However, you can influence browsers to achieve this. For Chrome and your particular web site, replace the existing favicon.ico at the root of your web site with your favicon. This is what Chrome displays and yours is the black and white icon you don't want. Even better: rename favicon-tenaya.ico to favicon.ico (thus replacing the existing favicon.ico) and change the HTML accordingly.
As an aside, you don't need two declarations. Just keep the shortcut icon one, although the other one should do just as well.
Since Chrome does not parse the html it uses default file "/images/favicon.ico" to show as favicon in view-source. If it doesnt find it it look into different other locations too. for example if you use wordpress it uses http://[domain]/wp-content/themes/[theme]/images/favicon.ico
In Website, you can mention the favicon like below
<link rel="shortcut icon" href="/favicon-tenaya.ico"/>
and its working fine.
Where as in view source of chrome, they automattically find the favicon on below path
https://www.tenayalodge.com/favicon.ico
Favicon to be fetched from added favicon.ico after your website.
A very simple way:
put your favicon.ico file on the root of the website.
That should be accessed like: http://www.[domain].com/favicon.ico
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
Google Chrome allows you to save websites as application shortcuts with an icon on the user's desktop. Unfortunately the icon it adds to the desktop is a scaled up version of the 16x16 version.
The icon is an icon file that contains images in several resolutions and is saved in the root of the website. No code in the header of the site mentions the favicon.
The icon file itself seem to work. IE is displaying the larger icons just fine.
Has anybody had the same problem?
Looks like this is due to a bug:
http://code.google.com/p/chromium/issues/detail?id=5126
http://code.google.com/p/chromium/issues/detail?id=92954
I have found wordaround for this. Not a very convincing one though. Websites like Gmail, Google Search, Google Drive etc can be added as apps (they are just shortcuts/links) from Chrome web store. (Some of them come by default with Google Chrome installation)
Install chrome launcher from here: https://chrome.google.com/webstore/launcher
Open chrome launcher from your windows taskbar. Select the website shortcut/app and drag it to taskbar. Now you have a higher resolution icon.
Simply put this HTML in your webpage:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
This will tell Chrome that it should use the entire file as is instead of converting 16x16 to bigger sizes.