Adding A Favicon

I am going to add a ‘favicon’ which is a small icon that goes before the website address in the box, like this one for WordPress:favicon, dreamweaver, design, add, code,

A favicon will be 16×16 pixels big once in place on a browser. I am going to design mine in Photoshop at 64×64 pixels at 72dpi. I have tried using the first letter of my name from my logo, but this doesn’t work as a favicon as the logo font I have used on my website is very slim and there fore unreadable when viewed at 16×16, it looked like this:

favicon, dreamweaver, design, add, code,But as it is unreadable when viewed at 100%, I have  chosen to use the font that I used for the rest of my website as part of the branding, which is much clearer to read when viewed small, it looks like this:favicon, dreamweaver, design, add, code,I have made it a transparancy and then go to File>Save for web>PNG 24, with as highest resolution possible, then ‘save’.

Now that I have my image saved as a .png I go to the website http://tools.dynamicdrive.com/favicon and upload my favicon, this website will then generate it and I then download it as the file name favicon.ico and this will save it into my website folder, but NOT the ‘image’ folder, just save it loose.

Now I go to Dreamweaver into my ‘index’ page and go to code, then in the code I put in a link at the end of the ‘head’ (there are two, one is the beginning of the head, and the second is the end of the head), add this code to below the end of the head:

<link rel=”icon” href=”http://www.yourwebsite.co.uk/favicon.ico” type=”image/x-icon” />

<link rel=”shortcut icon” href=”http://www.yourwebsite.co.uk/favicon.ico” type=”image/x-icon” />

Then ‘Save’, now it looks like this in my web address bar:adding, favicon, website

So it works!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s