Add a Favicon to your Website

So what’s a favicon or people ask? what’s that image you put on the top of your website and it shows up on the corner of the web browser? The most common format for the Favicon is the .png and it’s easy to make with photoshop. You can also use those free program online to make a simple one. I know a lot of people use the ico file extension and the png as a combo deal for old browsers but I’m lazy sometimes and just make a quick transparent png. Name it whatever you want, I call mine favicon.png. Then place it in your folder of images or /icon/images of the public_html folder and then boom-   there it is. I generally recommend 16px by 16 pixels but I’ve done 32px by 32px and it works. here is the code:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>

<link rel="icon" type="image/png" href="http://example.com/myicon.png">

[… All that Crazy code stuff]

</head>
[…All the good contents about ninjas, food, Seattle, video games, photos, funny cat you tube videos, pretty girls that know how to code, industrial music etc.]
</html>

Or the icon or shortcut ico way is the traditional method

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="icon" href="images/favicon.ico" type="image/x-icon">

[… All that Crazy code stuff]

</head>
[…All the good contents about ninjas, food, Seattle, video games, photos, funny cat you tube videos, pretty girls that know how to code, holy shit batman etc.]
</html>

One thought on “Add a Favicon to your Website

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.