Nov 21, 2009

How To Create Icon Next To Address Bar? - The little picture next to the address bar has always interested me.

free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Designing > Web Design and HTML

How To Create Icon Next To Address Bar? - The little picture next to the address bar has always interested me.

outlawguy89
I am the webmaster for my School's Marching and Concert Band and I would like to change the little icon (don't know the technical term) that is next to the address bar with our mascot. What I need to know is:
What the name actuall term for the picture!?!?
What script or snippet would I need to change it?
What picture type would I need (png, jpg, ico)
What is the demensions?

If you don't know what I'm talking about, it's the little blue and white v that's here on astahost.

Any information at all would be appreciated biggrin.gif

Comment/Reply (w/o sign-up)

yordan
have a look here : http://en.wikipedia.org/wiki/Favicon for the definition of a favicon.
And then have a look at the astahost tutorial here : http://www.astahost.com/Add-Favicon-Site-t...&hl=favicon
More generally, use the "search" button in our forum and look for "favicon", this is a rather popular topic here.

Comment/Reply (w/o sign-up)

takerraj
Mostly the image type of favicon is ,ico and the size may be 16x16 or 32x32 pixels. If you give more information on what type of website it is (HTML, wordpress, Joomla), then youŽll get more precise answer.

Comment/Reply (w/o sign-up)

mastercomputers
Nice to see an old post of mine being linked to.

The picture is known as a favorite icon or favicon.

As long as you place the picture in the root of your domain. Upper most level for serving webpages, sometimes no html markup is necessary, however it is best to do as much as you can to make your favicon show up.

Here's an example of how to add the favicon part to your webpages which goes inside the head section:

CODE
<head>
  <!-- Note:  if you use HTML and not XHTML then remove the slash / -->
  <link rel="shortcut icon" src="favicon.ico" type="image/x-icon" />
  <link rel="icon" src="favicon.png" type="image/png" />
  <!-- Note: all these images can be moved to where you like, however you should keep favicon.ico in the root of your domain -->
</head>


You should use at least one type of picture type, and that should be an .ico format using rel="shortcut icon", however using an additional format is ok too, but should be used as in the code above, you can use png, jpg, gif and possibly more formats. I'd stick to using png or gif as they are smaller in file size compared to jpg and they both support transparency. They sometimes also come out smaller than .ico files and usually get used by the browsers instead. You can also create animated favicons using animated images or on-the-fly creation through server side languages such as PHP using GD but maybe you will discover how to do that later and may implement it if you want to.

The most widely supported dimensions is 16 pixels by 16 pixels with 16 colors, which is quite limiting, however most modern browsers support 256 colors and more. If the size is larger than 16 x 16 then it is resized by the browser and may be treated differently across various browsers so don't expect the same resized icon to look the same in other browsers. This would be due to their scaling and color algorithm used.

As takerraj has mentioned, if you are using some form of Content Management System, Forum, Blog etc, then they can have the code required to change the favicon hidden deep in some file, should be a configuration file, but if you do provide that information you can get even a more specific answer to help you.


Cheers,


MC

 

 

 


Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)


See Also,

*SIMILAR VIDEOS*
Searching Video's for How, To, Create, Icon, Next, To, Address, Bar?
advertisement



How To Create Icon Next To Address Bar? - The little picture next to the address bar has always interested me.

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com