I am looking to set the icons for a domain on an nginx server I have configured. There are many different urls on this domain which will need to display the same favicon / icon no matter what the url.
I am looking for some advice in implementation.
If you would like to have all (sub)domains on a server have the same favicon, you can enter this in the server configuration:
location ~ /(favicon.ico|apple-touch-icon.png)$ {
root /var/www/default;
}
And just place the icons in the above folder.
Hope that helps, cheers!
You're looking for either these two HTML tags:
<link rel="apple-touch-icon" href="somepath/image.png" />
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
or these two domain-root-folder files:
apple-touch-icon.png
favicon.ico
as per Wikipedia (with more details). You can also use apple-touch-icon-precomposed if you don't want Apple's standard icon gloss.
Since you want every page to have the same icon, putting them in the root without bothering with HTML is probably simpler.
Related
I'm getting started building out a blog with Middleman using the middleman-blog extension. Everything is working great so far on the home page. The problem occurs when I click on a link to see the full blog post. The full blog post page has no CSS being applied to it. After further inspection, I am receiving a 404 error. I fixed it on Dev Tools by moving 3 levels up in my CSS link href like so:
BEFORE (works in Home Page but not in Article pages)
<link rel="stylesheet" href="stylesheets/global.sass">
AFTER (moving two levels up no longer gives me a 404)
<link rel="stylesheet" href="../../../stylesheets/global.sass">
My question is: What do I need to modify so that Article Pages look for the CSS 3 levels up while the home page remains intact?
In your case, the easiest way would be to use webroot-relative paths.
To recap, you're using a regular relative path...
<link rel="stylesheet" href="stylesheets/global.sass">
If your page is at http://example.com/index.html, then the browser will look for http://example.com/stylesheets/global.sass.
But if your page is at http://example.com/blogs/2013/03/20/blogpost.html, the browser will look for http://example.com/blogs/2013/03/20/stylesheets/global.sass
Now, the solution...
If you add a slash to the beginning of the path, you make that relative path into a webroot-relative path. The web browser will start looking for the file at the webroot...
<link rel="stylesheet" href="/stylesheets/global.sass">
So, regardless of whether your page is at http://example.com/index.html, http://example.com/blogs/2013/03/20/blogpost.html or http://example.com/a/b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/page.html, the browser will, in all cases, look for the file at http://example.com/stylesheets/global.sass.
The Adobe Dreamweaver documentation on linking and navigation explains this a bit more completely.
How to get favicon website with Chromium Embedded Framework? I could look at the source code and get the url of the icon, but some sites, like Facebook, do not use a standard procedure to add a favicon, then, how do I get the favicon? Thanks.
The rules for the favicon are all explained on the Wikipedia page.
The standards use a link element with a rel attribute in the <head> section of the document to specify the file format, file name and a location can be specified for any Web site directory.
You need to look, inside the <head> element, for link elements of this form:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
or
<link rel="icon" type="image/vnd.microsoft.icon"
href="http://example.com/image.ico" />
If you don't find such links, then use the fall back of looking for favicon.ico at the root directory.
I'm not certain why you think that Facebook don't follow the standard. I just looked at an FB page which contained this:
<link rel="shortcut icon"
href="http://static.ak.fbcdn.net/rsrc.php/yP/r/Ivn-CVe5TGK.ico" />
It's not possible for websites to use some other mechanism to get favicons to browsers. The browsers follow the well-defined rules for getting favicons. If a website did something different, the browser would not find the favicon.
From this blog entry, the best practice for cross-browser supported favicons is to include
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico"> <!-- For good browsers. -->
<link rel="SHORTCUT ICON" href="http://www.example.com/image.ico"/> <!-- For Internet Explorer-->
The first link is for real browsers and the second is for ie rubbish. On some websites you will see type="image/x-icon" in the link tag. There was a time when this was the correct implementation, but image/x-icon has now been superceded by image/vnd.microsoft.icon which is now part of the IANA standard for MIME types.
By the way, older versions of ie just looked for a file name /favicon.ico which was hard-coded. If you wanted to be ultra safe, you should name your favicon as favicon.ico. Of course that does not help you if your domain hosts multiple web-sites for different purposes.
Note: If you don't need to support favicons for IE, then you are then free to use png, gif and jpg formats for your favicon, as indicated below...
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
CEF1 has a callback named OnFaviconURLChange that's called whenever the favicon URL for a page changes. CEF3 doesn't support this callback yet, according to this bug in the CEF issue tracker.
You need to implement a client handler and at least CefDisplayHandler. This class have the OnFaviconURLChange (not sure in what version did appear, but for sure is present in branch 2357 and later).
C++ prototype is:
void OnFaviconURLChange(CefRefPtr<CefBrowser> browser,
const std::vector<CefString>& icon_urls);
icon_urls usually contains a single entry (if any), which is the URL of the favicon.
Consider also checking the favicon URL for its security, I passed the URL to a HTMLayout application only to discover that was on a self-signed https:// resource and all sorts of wininet security error (InternetErrorDlg for example) started throwing all the place.
I have three solutions; all share one thing in common which is the stylesheets. I would like to have only one version of the stylesheets.
I thought to put this and maybe other things like common scripts in one project and then have all three solutions reference this same project.
But how can I link in the stylesheets to my layout pages. Currently I use:
<link href="#Url.Content("~/Content/Stylesheets/Package3.css")"
rel="stylesheet" type="text/css" />
Any advice would be appreciated.
You might be able to do this with your source control? But the better solution might ultimately be to make a 4th project of your static shared files (ex. css, javascript, images) and deploy them to a URL that you will only use to serve this content.
So you can reference in your project like:
<link href="http://mydomain.com/content/stylesheets/package3.css" rel=stylesheet" type="text/css" />
Where mydomain.com is actually your 4th project that only hosts the static content.
You can use the 'Add as link' option.
i have this line in my asp.net-mvc page.
<link rel="icon" type="image/x-icon" href="/content/images/icons/favicon.ico" />
the favicon shows up fine in Firefox but it doesn't show up in IE8 at all.
any suggestions on why this doesn't work in IE8 ?
also, under RegisterRoutes, i have this:
routes.IgnoreRoute("favicon.ico");
i have tried everything on this page and it still doesn't seem to work for IE8
The Wikipedia article about favicon has a pretty good overview on how you specify the favicon and which file formats are supported.
The agreed standards is a bit in conflict with the de-facto standards. For example, the non-standard rel value shortcut icon has wider support than the standard value icon. You might want both a standard and a non-standard link tag to cover more ground.
Most browsers will pick up the favicon if you simply put it in the root folder, so that would be the best place to put it even if you also have a link tag that points to it.
Even if you do everything right, there is still no guarantee that the favicon will show up in any specific browser. Sometimes it simply doesn't work, for some unknown reason.
This seems to be an ASPX pages problem. I have never been able to show a favicon in any page for IE (all others yes Chrome, FF and safari) the only sites that I've seen that are the exeption to that rule are bing.com, msdn.com and others that belong to MS and run on asp.net. There is something that they are not telling us!
Even world-known sites can't show in IE eg: manu.com (most browsed sports team in the world) aspx site and fails to display the favicon on IE. manu.com/favicon.ico does show the icon.
Use "shortcut icon" instead
<link rel="shortcut icon" href="http://mydomain.com/content/images/icons/favicon.ico" />
This wikipedia page lists the compatibility
I would add that ideally for best browser compatibility the icon is best located in the root directory named favicon.ico if you are able to do this as most browsers will look there by default even without the link tag.
Is this locally?
Apparently: IE8 will never display the icon if the file is on your hard disk. It has to be on the internet. Other browers such as firefox will however show the icon even if they are on your hard disk.
EDIT
As this is happening locally and on the web-server - I would suggest saving down the stackoverflow icon to the same place as your icon and change the icon link accordingly. If it then works the problem is possibly with the file type of your icon file.
For IE, the Favicon must be in the root.
e.g
<link rel="icon" type="image/x-icon" href='<%: Url.Content("~/favicon.ico") %>' />
i have hosted my application on IIS 6.0 the view that i wanted to browse is getting fetched in the browser but the css and scripts are not being rendered .
<link href="<%= Url.Content("~/Content/Tree.css")%>" rel="stylesheet" type="text/css" />
in this way i have given the path.
The link tag is properly defined. You are using the Url.Content method with a relative path from the site root which will correctly take into account the virtual directory which could be added when hosting under IIS.
I would recommend you looking at FireBug to see why the path is not found and what response does the server send when the CSS is fetched. Is the file missing? Or is there some other status code returned?