Learn Dreamweaver

Favicon HTML Code

by monstertutor

Branding plays a vital role in web design. Using favicon helps to established a good feel and brand of your website.

What is favicon?

html code to create favicon

A favicon literally means favorite icon. This icon is saved on your computer when you add websites to your favorites or bookmark. Nowadays, this also serves as the identity of a website in the smallest version.

Where can I get a favicon?

There are various favicon generator out there. I use www.html-kit.com/favicon/. It works perfectly by uploading an image or a graphic.

HTML Code for Favicon

Place the HTML code inside the <head></head> tag.

.ico favicon

<link rel="shortcut icon" href="favicon.ico" />

.gif favicon

<link rel="icon" type="image/gif" href="animated_favicon1.gif">

combination of .ico and .gif

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

Common Problems

  • The URL of the .ico or .gif is wrong
  • The favicon have different file name
  • They are working on a wrong page
  • They do not refresh/clear cache the web page

Note: Favicon don’t work on IE 6. It works when you bookmark the site.

Related posts:

How to show form input values onblur and hide onfocus
How to Center an Image in CSS
Create Post Template by Category
How to enable HTML5 tags for Internet Explorer

Recommended Web Design Books!


Category: HTML
Tags: coding, favicon, tools


Special Offer! $8.99 .COMs or .Nets now at GoDaddy!