Tuesday, May 21, 2013

Favicons are Fun!

Have you ever noticed the cool little icon in the browser bar when you visit a website? Those are called favicons and they show up when browsing a website or adding the site as a bookmark in your browser. They give a website a more legitimate and secure feeling, as well as adding a small branding element to the website.

Any website can have a favicon and they're pretty simple to create. You don't even need editing software to create one! There are bunches of websites out there that will generate the file for you. All you need to do is upload an image.

Favicons are images that are created with an .ico file extension. You place this file in the root of your website, add some small code and it will show up in the browser.

If you use Photoshop, you can download and install the plugin Create your image in a square canvas. When it is complete, resize the image to 16x16 pixels. When it looks the way you like (remember, when it's small, simple is better), go ahead and save it as a .ico file. It's a good idea to save it with transparency so that you don't have an image with a white block around it in the address bar.

If you don't have Photoshop and want to create a favicon, you can find a website that will create one for you. Favicon Generator is an easy website that will create one for you. Here is another Favicon Generator that will create one for you.

Once you have your favicon file, place it in the root of your website. Add the following code to the header of your homepage and you're all set!

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"></link>
<link href="/favicon.ico" rel="icon" type="image/x-icon"></link>

1 comment:

  1. Again, great information! AYSO has really stepped up it's social media and web information, and I'm grateful for it. Thanks Guys!