Favicon HTML

famous favicons

famous favicons

You know how websites put little icons in their tabs? Those are 16 x 16 pixel squares called favicons.Without getting too deep into Saussurean semiotics, these favicons are often more helpful representatives than the text on the tab. We often look to the icons for meaning before the text.

Creating a favicon and coding it into your site is actually really easy. I’ll show you how to do it.

You need to create a 16×16 pixel image that is saved as a .ICO file. Luckily, there are a lot of favicon convertors that turn images into 16×16 pixel .ICO files. Perfect! Here is the site I used: http://www.icoconverter.com/

(Before you make any random image a favicon, consider its the responsibility  — it should be representative of your website’s focus. Sticking within my project theme, I created an eye: eye favicon.)

Download the generated favicon into the root directory for your website. Be sure you are saving it as an .ICO file!

In Dreamweaver, FTP your new .ICO file to your server.

Now in your HTML <head> tag, post the following code and source to your .ICO file:

<link rel=”shortcut icon” href=”YOURFAVICONHERE.ico” type=”image/x-icon” />

favicon html in dreamweaver

favicon html in dreamweaver

Save your work and FTP your saved HTML to the server!

Here is what mine looks like:

– Caily Grube

~ by Caily Grube on September 17, 2012.

One Response to “Favicon HTML”

  1. Yay! So helpful, thanks!

Comments are closed.

%d bloggers like this: