These small icons (16px x 16px) are associated with a website and used as a graphical representation of the browser. It's like easy branding.
It's also an easy way to save space on a site, browser, or favorites bar since they don't take up that much space.
Favicon formats have .ico, .gif, .png and .jpg extensions so they can be supported by typical photo editing software whether it be opensource like paint.net or Photoshop. However, if using something other than a Favicon-html kit then you have to be sure to save your file formats with the .ico extension or using type="image/ico" so that all browsers will recognize your favicon as you want.
Most mobile sites don't have favicons or aren't supported. Usually you simply end up with some sort of short cut or thumbnail and these aren't always pretty. However, touch icons are those "pretty" icons that show up on your iOS products like iPhone and iPad that look similar to a favicon but are bigger.
Once you've created a favicon, you simply add the icon to your head elements via <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ > and the browser should render it appropriately.
I'd love to try this out if I have time in one of our upcoming projects. Fingers crossed!!!!
No comments:
Post a Comment