Jump to content
xisto Community

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

Recommended Posts

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 Xisto.Any information at all would be appreciated :D

Share this post

Link to post
Share on other sites

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:

<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.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.