I would like to make a .png alternative favicon image for non-IE browsers to read but I don't know what dimensions it should be. I looked at the .ico file in Photoshop and there are several different several dimensions to choose from. Presumably, I would make it the largest dimension of all the favicons in the file but I don't want to presume anything.
<link rel="icon" type="image/png" href="http://www.mydomain.com/content/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="http://www.mydomain.com/content/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
Using the syntax <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>, as long as you convert your favicon to a .ico format (I prefer to use this site as it also converts 32 bit transparent .PNG files) then all modern browsers should support it.
Some browsers require you to close the browser down before they cache the icon, but they display eventually.
As for size, they're displayed at 16 x 16 pixels, though most converters (such as the one in the link above) will resize them if they're larger.
Hope this helps!
Related
In laravel you can do one of these:
<link rel="stylesheet" href="/css/app.css">
<img src="/storage/img/logo.svg">
<script src="/js/app.js"></script>
<!-- same as the following -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<img src="{{asset('storage/img/logo.svg')}}">
<script src="{{asset('js/app.js')}}"></script>
The first is a relative path (relative to the public dir) and the second generates an absolute path.
Besides that, is there any difference in the results? At least in Chrome, Opera, and Firefox I could not perceive any difference.
Is there any advantage of using one over another? Maybe in performance or compability? Does one loads faster than the other?
There are potentially major differences.
The asset helper is CDN-aware. Setting the app.asset_url config value causes asset() to append that URL to every link it generates, which is very useful if you're using a CDN.
In addition, it'll save you a lot of work if your app winds up hosted in a subdirectory - all you have to do is set app.url, and asset will spit out the right URLs to js/app.js (i.e. /a/sub/folder/js/app.js).
i have in google+ snippet in my website, to sharing my website on google+, my code look like this
<head>
<meta property="og:title" content="title of website" />
<meta property="og:url" content="my website url" />
<meta property="og:image" content="url image" />
<meta property="og:description" content="description of my website" />
</head>
<bod>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></td>
</body>
i have also included facebook like, which rendering all meta tags (title,image,description). But, in case of google+, thumbnail image is not showing.
Need help !!
What are the dimensions of your image? I standardised my thumbnails at 100x67 as they look right on Facebook, but Google+ wasn't showing them. I found that larger images will work with the same code, so I can only assume Google+ ignores little images for some reason.
from google+ docs: https://developers.google.com/+/web/snippet/
Images that are too small or not square enough are not included in the
+Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at
least 120px, and if the width is less than 100px, then the aspect
ratio must be no greater than 3.0.
However i've been experimenting and this does not seem to be exactly right. Does anyone know the correct algorithm?
In some html documents I'm using webfonts for only a couple of words. Performance-wise loading a complete font-file seems wasteful. This is where the unicode-range parameter of the #font-face declaration comes in:
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
With it I supposedly can define what characters of the font-file to load, thus improving performance greatly.
But I just can't get it to work. And the odd thing is that it diplays all the characters in firefox, and it fails to load the font in safari just if I include the unicode-range parameter in my declaration.
Any help would be appreciated, below is the html I was testing it with:
<!doctype html>
<html lang="en">
<head>
<style text="text/css">
#font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}
*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>
You are misunderstanding the purpose of that value. From that page:
This descriptor defines the range of Unicode characters supported by a given font
So this isn't the glyphs (or characters) to download, this is actually telling the browser what characters are in the font so that the browser can determine if its even worth downloading the font in the first place. If the text being styled isn't in the given unicode-range then the font won't be downloaded.
Example XIII on the page you reference shows a great example. Imagine 3 #font-face rules that share the same font-family attribute. The first rule, however, points to a giant 4.5MB TTF file that has every possible glyph needed. The second rule lists a much smaller 1.2MB TTF but says to only use it only if all of the characters fit into the Japanese glyph range. The third rule lists a very small 190KB file that can be download if the text being styling is only roman.
Suppose a site is very configurable, and it has a few orthogonal settings which are all easily controlled with alternate stylesheets. For example, its main menu can be at the top or on the left, and its background colour can be red or blue.
Is there a way to define multiple sets of alternate stylesheets so that we can replace the 'theme' for each set?
I'm looking for something like this:
<link rel="stylesheet" set="background" title="red" />
<link rel="alternate stylesheet" set="background" title="blue" />
<link rel="stylesheet" set="main-menu" title="left" />
<link rel="alternate stylesheet" set="main-menu" title="top" />
No you can't do that. The three ways are:
Have a set of sheets on the server, and serve the correct one
Use inline CSS
Combination of both. Load all unchangable classes in an external CSS, then use an inline style sheet to set the customisable values.
i have a asp.net-mvc site and i have the same image referenced on the site about 1000 times. In all other browsers (ie7+, ff, etc) the pages loads in less than a second.
in IE6, it says . .
(1000 items remaining. . )
(999 items remaining. . )
(998 items remaining. . )
(997 items remaining. . )
etc . .
and linearly does a single countdown to 0.
If ie6 is caching these images and since its the same image, just:
<img src='../../test.png'>
why would it do this countdown. The IE 6 takes about 3 minutes to load, where, as mentioned, other browsers are less than a second.
any suggestions?
EDIT:
i also have the following code for the transparent PNG issue. I am not sure if this is related but wanted to mentioned it, if it was.
<!--[if lte IE 6]>
<link href="../../Content/iefix/Site_ie6.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img, div { behavior: url(../../Content/iefix/iepngfix.htc) }
</style>
<script type="text/javascript" src="../../Scripts/iepngfix_tilebg.js"></script>
<![endif]-->
pngfix is definitely the problem. It has to, one by one, re-render each one of those images after they've loaded. Use with care!
Try removing pngfix and see if your speed increases, or do some profiling - log the time before and after the execution of pngfix.
Yes, IE6 caches locally, provided the HTTP headers are set correctly.
What do your HTTP headers look like? You can see them with a web debugger such as Fiddler.
There are some known bugs in IE6 that relate to the way it caches HTC files (such as the one referenced in the code fragment you posted): they can get loaded twice, even when caching is enabled.