i noticed that paypal displays a very different favicon,
one that's not just a simple 16x16 icon and is lengthy?
anyone can teach me?
I think you are refering to the green box that shows the PayPal logo followed by "PayPal, Inc. (US)".
If so, it is not a favicon, but a feature of Firefox 3 to show sites with extended validation (EV). See also http://news.cnet.com/8301-13554_3-9974672-33.html
That is not a favicon, but the type of SSL certificate they use. It's an Extended Validation (EV) certificate, which intends to provide better identity verification.
Its easy. Under the {title} tag, you put this code.
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
Just make sure that the favicon image is less than 100px * 100px. My recommended favicon image size is 50px * 50px.
Related
I've been doing some research on getting a webapp I am working on to display the proper icon / tiles in the correct situation. We have a version of our logo as an .ICO on transparent that we have been using for the icon shown in the browsers tab. No borders from a background, just the logo against the gray of the tab.
Now we want users to be able to add a home screen link to our app. This link's icon should be the logo against a gray background.
For apple this is easy:
<link rel="apple-touch-icon" href="css/touch-icon-iphone.png" />
plus any additional sizes we want to add. The apple-touch prefix makes having a separate file easy.
However, Android is presenting an issue. Currently Android will accept the apple touch icon, but this listed as depreciated and will not work soon. (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) The meta tag given for adding icons to be used for Android (Chrome is the only concern) is listed as:
<link rel="icon" sizes="192x192" href="icon-name-192.png">
<link rel="icon" sizes="128x128" href="icon-name-128.png">
This will apparently overwrite the favicon when the browser sees it. Which means that if I give these images the wanted gray background, then the icons in my browser tabs will show the gray square. And if these are on transparent then when I add to desktop on ANdroid I get the icons without the gray square.
Am I missing something? This seems like a pretty common request, and yet I cant find a solution. I tried looking at the meta data for other sites where the favicon appears to be on transparency but the desktop version shows on gray / another color, but I dont see any extra tags, and so I assume they are using the apple touch version, which as stated is apprently still legal as of now.
Whats the accepted way to deal with this issue?
rel="shortcut icon" is probably what you are looking for
I don't want favicon for my website. Unfortunately my web hosting service imposes one. All my pages shows a favicon with the name of my hosting service.
How can I get rid of the (commmercial) favicon?
I could set a customised favicon but it is a personal website and I don't know what (very little) image could reflect me... And even if I found an idea, I don't have the time or skills to create a beautiful image.
I thought putting the html code without actually sending a image : (favicon.png does not exist)
<link rel="icon" type="image/png" href="img/favicon.png" />
But it's not working (it doesn't block the default favicon).
I could put a white image to override the commercial favicon but the rendering isn't beautiful (white empty favicon on gray browser...)
Here! I made you a favicon :) Use it to your heart's content (if you like it).
<link rel="shortcut icon" href="/favicon.ico">
<link rel="Bookmark" href="/favicon.ico">
I saw it somewhere,but is <link rel="Bookmark".. necessary?
That bookmark link is incorrect. It should be:
<link rel="bookmark" href="http://my.site.com/some/path/permalink.html">
ie a perma-link and not the icon. See 6.12 Link types from the HTML 4.01 specification:
Bookmark Refers to a bookmark. A bookmark is a link to a key entry
point within an extended document. The
title attribute may be used, for
example, to label the bookmark. Note
that several bookmarks may be defined
in each document.
This is the cross-browser way of adding favicons:
<link rel="icon" href="/favicon.ico" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
the icon file itself would preferably be 16x16 pixels and in gif format (IE6 wont use transparent png) and under 500 bytes. Though most modern browsers now accept practically anything, though of course it will be your bandwidth and their waiting.
i googled for a page stating this.
link
as cletus mentions, the Bookmark link is not for favicon and the code you provided is actually wrong.
EDIT: the favicon link does not influence your bookmarking itself, yet it helps the browser store a little icon on the tabs or your browser's bookmarks' menu. StackOverflow uses this icon.
But Is It necessary? If your icon is located at /favicon.ico, no it is not absolutely critical at all. Most browsers check that path by default, but if you like me put your favicon in a directory like /images/favicon.ico you would need to tell the browser to get it from there or your server will build up alot of 404-Not Found errors in its log. Which will slow things down (a bit). Also you might want to have different icons for different directories etc.
This is a crossbrowser way to make sure the browser knows where your favicon is located for both viewing the page and bookmarking the page. Chances are, if you don't know what that code is, you don't have a favicon. The easiest way to make on is to make a 16x16px gif and change its extension to '.ico' - then you'll get your little icon in the corner of the browser bar (depending on your browser).
Duplicate:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
I want to add my logo in the address bar of the browser, whenever it is browsed.
How do I make a favicon?
You need a favicon - this is a 16x16 image in .ico format stored as favicon.ico in the root directory your site. Some browsers do support other formats too.
A newer, more standards based approach is to include something like this in your html head:
<link rel="icon" type="image/png" href="/path/image.png"/>
See also this document from W3C: How to Add a Favicon to your Site
You might also want to refer to these other answers to the question:
Image icon beside the site URL
What is currently the best way to get a favicon to display in all browsers that support Favicons?
Preferred way to use favicons?
That image is called a favicon and here are some links on how to add one or you can just google "how to add a favicon" for more information.
http://www.w3.org/2005/10/howto-favicon
http://www.clickfire.com/favicon-tutorial
http://essentialkeystrokes.com/tutorial-how-to-create-your-own-favicon
See http://en.wikipedia.org/wiki/Favicon
Are you talking about creating a Favicon?
If so, here's a site which will help you make one.
Just use this.
<link rel="icon" type="image/png" href="/path/image.png"/>
I hope it works for you.
How do I write code where a company icon appears on the left side next to the URL address in the browser's address bar?
You are looking for a Favicon.
it loads www.whateveryouron.com/favicon.ico
if your domain is robermyers.com, just put a favicon.ico 16px icon thats accessible, and you're in like flint.
just try this googles or stackoverflows
You need to create a favicon. The favicon uses a standard (in Windows, at least) .ico file. If you have a logo, you can convert it at sites like http://www.favicongenerator.com/
In the <head> of your html page, use the <link> tag to define the location of the favicon like this:
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
You may need to refresh the page for the icon to display.
load a file on the webserver called favicon.ico
In modern browsers other fileformats than .ico works aswell. You can even put animated gif's in there!
DynamicDrive has an easy favicon maker too.
Different pages/directories can also call a different .ico with code similar to y0mbo's example (this is what Mint uses):
<link href="sc/ph645.43/images/icons/mint.ico" rel="icon" type="text/x-icon" />
This is a good article on favicons in detail.
I suspect animated favicons have the potential to go the way of the blink tag. Mint is using theirs to match their overall design, if you visit in FF3, you'll see that it matches the green color that FF uses to designate a recognized SSL cert.