Favicon Tutorial

Step One. 
Make your stupid icon.

Step two.
Rename the stupid .png to .ico

Step Three. 
Link it.
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

Step Four.
There is no step four, it’s that easy.

To all the people who made long elaborate tutorials on how to make a favicon. You suck. Next time lead with “there is no fancy export function, you just rename the file, with your keyboard.”  HOURS of my time wasted.

22 Jul 5short url

CSS NINJA: Turning background images to links

I am still trying to wrap my head around web design, but I just figured out a little trick that made my life SO much easier. There is this neat little function called *visibility*. Watch this magic as I turn a background image to a link. 

The mark up

<div id=”tumblr”>

<a href=”http://megrobichaud.tumblr.com”>

<span>

<h5>tumblr</h5>

</span>

</a>

</div>

The CSS

#tumblr {

position:absolute;

background-image: url(images/tumblr.png);

background-repeat: no-repeat;

}

#tumblr a span{

position:absolute;

height: 150px;

width: 150px;

}

h5{

visibility:hidden;

}

To use it:

HTML sticks the link in, the ID sticks the image in, span lets you bump the text around so that it is centered on the image, and h5 styles the text so that it is invisible. EASY PEASY. 

disclaimer: I do A LOT of things wrong in building websites, so this might be a bad thing to do, but it worked so well for me that I had to share. 

16 Jun 3short url