I want to display an image and some text on the URL bar of browser.
I am able to display an image by using tag <link type="image/x-icon" href="../../images/iconFav.bmp" rel="shortcut icon" /> but could not show text beside the image.
What actually I wanted to do is just like stackoverflow shows an image on URL bar, I would like to show an image and few text :)
Otehr example would be to have a look at https://developers.facebook.com/docs/reference/fql/ which displays an image and facebook.com beside that image on URL bar
That text (displayed next to the favicon.ico) is the HTML title element:
<html><head><title>Your text here</title></head></html>
That favicon isn't displaying because BMP is not a supported favicon file format. For the best support use an ICO file. See: http://en.wikipedia.org/wiki/Favicon#File_format_support
You can use Favicon.co.uk to convert your image to ICO format if you like
Then link to it like this:
<link href="/location/of/favicon.ico" rel="shortcut icon" />
Then for the title use <title>Your Title</title> inside the <head> tag
You need to read up on favicons. Also ensure your using the right doctype with the right fav icon link. You need to convert your favicon to a ico file with a converter: I prefer this one: http://www.prodraw.net/favicon/index.php
I think what you're referring to is the SSL extended validartion information. Modern browsers display sites running under HTTPS with the domain in blue or green (depending on the type of SSL certificate purchased).
More details about extended validation are available at http://en.wikipedia.org/wiki/Extended_Validation_Certificate but effectively it's not possible to control the text - it's either the domain of your site e.g. facebook.com or the name of your organisation e.g. "PayPal Inc." and requires an SSL certificate to be purchased and is only shown on your website when browsed using SSL.
It can't be done. On https sites, some browsers will put things beside the image (the site name) to show that you are visiting the site in a secured way, but there is no way that a programmer can control this, it's built into the browser. You can control the favicon image, that's all.
I think that text appears if the site is secure and verified by some organisation. But I was able to display the image on location bar by using <link type="image/x-icon" href="../../images/iconFav.bmp" rel="shortcut icon"/>
Related
enter image description herePeople say that you can make an icon for a website tab simply with <link rel="shortcut icon" type="image/x-icon" href="img/bookIcon.ico"> but whenever I do that it doesn't show anything up in the tab, just the default earth symbol (I'm using chrome, that may be it) and the title.
ok, I figured it out: the file wasn't in the "img" folder. oof.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
I have a Favicon and in my page I have something like:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
This works fine. But inspired by the book "Ultra Fast asp" I am trying to remove all the small bits that are not necessary. I read a lot about browsers looking for favicon.ico anyway. (People complaining about 404 errors if they do not have a favicon).
So I was wondering: what is the use of the link if the browser looks for it anyway. It is "dead wood" -> so can I just remove this link completely or am I missing something.
thanks for your ideas,
Pleun
Using the explicit link syntax allows you to use different icons on different pages, and to have icon support on the browsers that do not automatically download the favicon.ico that is in the root of the site.
If you only ever use one icon on a website and don't care about browsers that do not automatically download the root icon, the links are not needed.
As long as your favicon is in the root of your website (ie. /favicon.ico), then yes you can drop this link. The link allows you to change where you want to store your favicon.
The standard specified by W3C uses the link tag rather than automagically look for the file in the root, but all major browsers will support both ways.
The Wikipedia article about favicon is a good overview of the possibilities and the browser support.
I'm working on a calendar app site for internal use here. It's basically a wrapper for a google calendar page, but there will be some extra stuff at the top with the calendar down below. One kind of "fun" thing I'd like to do with this is change up the favicon for the page each day - I'm using a kind of calendar image and I'd like it to show the image for the current day. Is this possible?
I'm using asp.net webforms, but I'm really asking the question at a lower level - is it possible to make this work or will browsers cache it too aggressively?
In theory, you can. In practice, browsers indeed cache it very agressively. Your best bet is to place the favicon file outside the root folder (to prevent automatic lookup) and manually define it in <head> along with a daily changing timestamp in the query string of the favicon URL. E.g.
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?3213256">
Oh, the HTML page itself should also have less or more the same cache control settings, else the browser will request the page itself from the cache and thus never refresh the favicon.
You should be able to control how the favicon is cached by setting the expires header. Alternatively, just change the URL to the favicon daily and set it using the link header.
<link href='http://example.com/favicon-20100827.ico' rel='shortcut icon'/
How can I place my icon before URL?
Assuming you want a favicon, here is a wonderful link about how to create one.
CSharpCorner Favicon Tutorial
This icon is called Favicon you can get more help on this at following location.
http://www.thesitewizard.com/archive/favicon.shtml
If you want to display an icon before/after all links (not a favicon as others have assumed (fair assumtion however) ) then do it in CSS.
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
Edit: updated due to first comment that this is not an answer.
Your question is rather unclear, but I presume you mean you want your website to display a picture in a browser just before the actual url text. This is called a favicon.
Wikipedia explains it well.
use code below to put image.png before the url
<link rel="shortcut icon" href="image.png" />