I have noticed that HTML5 Boilerplate and dev websites like css-tricks.com use only apple-touch-icon as any reference to favicon, and that image is indeed displayed in a browser. I was not following this topic for a while and am confused to how this works. Is it safe to now only include a touch-icon and will it be displayed in various browsers?
A favicon.ico file is used by the browser automatically if it's in the root directly of your page/app.
If you want to add a favicon in a different format (e.g. png), of you want to add it from another source (e.g. a subdirectory like /img) or if you want to make the browser load a new version of the file (e.g. favicon.ico?v=2) you use the link tag.
More info here:
Necessary to add link tag for favicon.ico?
Related
I know how to embed images in a web page inline. That's not my question.
My question is for a web page that has images included the normal way, as links to a distinct jpg file, how can I save it where it creates a single html file where the images are converted to embedded images inline in the html?
You can use SingleFile for this (I'm the author). It can be run as an extension or from the command line, more info here: https://github.com/gildas-lormeau/SingleFile.
Not a direct answer, but you may consider the MHTML format (https://en.wikipedia.org/wiki/MHTML), supported natively by IE, but also available in other browsers via plugins.
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
Maybe a stupid question, but for the life of me I can't find a reference to the favicon "ico" file on this website:
http://www.fitnessutah.com/
They obviously have one because it displays in the browser tab/window. I've tried Chrome developer tools, Network tab which shows all images on a page -- but no favicon there either. Where is it hiding?
It does seem to be being pulled in differently, but it is typically always in the default location - which this one is as well.
http://www.fitnessutah.com/favicon.ico
There are two ways to specify the favicon for a website:
1) Give a link to the favicon
<link rel="icon" type="image/png" href="/somepath/favicon.png" />
2) Put it in a prefefined URL, this is relative to the server root. So in this case will be http://www.fitnessutah.com/favicon.ico
This website seems to be using the second method so you will find the favicon in that link.
You do not need to add a link element with your favicon image for it to appear on your website.
Quote:
A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root.
Source:
http://www.w3.org/2005/10/howto-favicon
Further to Keir's and Carlos' answers - to spell it out - most browsers are programmed to also look for a favicon here:
http://yourwebsitename.com/favicon.ico
If the favicon image is named/stored as above, there is no need to mention it in the HTML code.
Therefore, if you are looking at a website and you can't find any reference to their favicon in the HTML source, just type the website's base URL in the browser address bar followed by /favicon.ico:
http://example.com/favicon.ico
Real-life example - try to find the favicon in the source code:
http://www.fuelly.com/favicon.ico
Use Chrome Dev Tools Network tab.
Filter by favicon
reload the page with Shift+F5
You will get the icon regardless it was loaded with link or from default location
A client wants a url to be a download link.
Use case is like so:
user gets linked to example.com/download once there, it downloads a pdf file.
Can I do this without php ?
HTML5 introduced the download attribute.
Supporting user-agents will offer to download the file foo.png when clicking this link:
<a href="foo.png" download>Save the image</a>
You can also specify a different default file name that should be used:
<a href="foo.png" download="image.png>Save the image</a>
Read more at http://www.w3.org/TR/html5/links.html#downloading-resources.
Note that this only works for links. When users enter the URL directly into their browsers, this will have no effect, of course. If you want that, you need to send specific HTTP headers. See for example the question: How to force download of a file?. You don’t necessarily need a programming language like PHP for that. You can do it with, for example, .htaccess, too: Force File(image) Download with .htaccess
How a file is displayed is browser specific. Some may force you to download while some directly render it on the browser.
If you want to force the browser to download the file then you can set in Header the
Content-Type : application/octet-stream
You only need a link (anchor tag). The way the link behaves on click will depend on what browser you are and what settings you have in that particular browser. Some browsers will prompt you to open or save the file, other browsers will open the PDF file on a new tab or window.
Download PDF
You'll also need to make sure that the path to the PDF file is correct on the href property of your anchor tag.
Use this (HTML) not PHP:
Download pdf
Use the full url including the pdf file like.
Download