Quick, basic HTML5 template

Here's a quick, basic HTML5 template with CSS and Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Markup for single favicon (.ico, .png or .gif)

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />	

Markup for Multiple icons

<!-- Opera Speed Dial Favicon -->
  <link rel="icon" type="image/png" href="/speeddial-160px.png" />
			
<!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- For iPhone 4 Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">

<!-- For iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

<!-- For iPhone: -->
  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

Notes

  • If you've only got a favicon.ico in the root of your site, you don't need to use any of this markup. However, its still good practice to link to it
  • Linking to the apple-touch-icons allows other apps and platforms to use the icon (such as Android)
  • Place the Opera Speed Dial image first in the list, to avoid it appearing as the favicon

 

Visit sunny St. George, Utah, USA

Get In Touch

We would love to hear from you.

Please enter your email address.
Please enter a valid email address.
Please enter the verification number.
You have entered a wrong verification number.
Please enter a message.
Please check your message for any errors.
Your message has been sent successfully.
Sorry, error occured this time sending your message.
* required