Favicon Icon For Your Website

How is favicon formed? Favicons are icons to brand your websites. This video tutorial shows how to make them for Internet Explorer, Mozilla Firefox, Chrome, Opera, Android, Apple IOS, and Windows 8 Start Screen. Although, technically those last two aren't favicons. They are still important when it comes to branding your website.

According to the standard these images may be GIF, BMP, or ICO. If you drop a favicon.ico in the root folder of your website, browsers will often detect it and use it. The standard dictates that you specify it in the head.
http://www.w3.org/2005/10/howto-favicon
link rel="icon" type="image/png" href="/favicon.png"

Microsoft requires a special ICO file for which there are free tools available
http://www.xiconeditor.com/
http://www.favicon.cc/
http://msdn.microsoft.com/en-us/libra...

Apple requires special tags for IOS icons to save your site to the home screen on iPad, iPod, or iPhone. The rel="apple-touch-icon" uses a default style, apple-touch-icon-precomposed uses your image without the gradient or gloss.
link rel="apple-touch-icon-precomposed" href="/squinty.jpg"
or more specifically,
link rel="apple-touch-icon" href="touch-icon-iphone.png" /
link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /
link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /
link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" /
the default size for icons is 57x57
http://developer.apple.com/library/io...

Finally, for the Windows 8 start screen
Define the image to use on the tile when pinned to start screen
meta name="msapplication-TileImage" content= "/squinty.png"/
define color for the Microsoft Windows tile.
meta name="msapplication-TileColor" content ="#0000ff"/

http://www.technoblogical.com/web-des...

Providing training since last Tuesday
http://www.technoblogical.com/
Thanks for watching!