Tutorial: adding a favicon to your website or livejournal
A favicon is a little icon that shows up in the browser address bar, next to your url. They're cute!
They also show up on tabs, so they're not just cute, they're very handy as a method of quickly distinguishing one tab from another.
This is meant as an idiot-proof guide, so while there'll be alternatives to the methods I've described, I've tried to make this as easy as possible for anyone to follow.
TO MAKE YOUR ICON
The mini icon needs to be a 16 x 16 px image, and so that it will be visible in any browser (IE, Firefox etc) it should be a .ico file.
Here are two alternate options for creating a favicon.
1. (a) If you have suitable software (Paint Shop or Photoshop or the like) create and save a 16 x 16 pixel .bmp image. Make it something simple, as there's not much room in a space that small.
(b) You will then need to use different software to convert it to a .ico image, (most software won't allow you to save as a .ico, and you can't simply change the extension name). I use Irfanview - it's free, and you can download it here. Open Irfanview. Click on File, then Open, browse to the file you want to convert and open it. [Screenshot] Then click on File, Save As, and in the drop down box at the bottom, chose ICO - windows icon. [Screenshot] Then press Save, and it's done.
2. Alternately, if you want a quick and easy method, but one that won't generally give such good quality results, use an online favicon generator, such as Dynamic Drive. Favicon Generator creates quite nice little text favicons.
TO ADD A FAVICON TO A WEBSITE
1. Upload the favicon to your website.
2. In the header of the html code for your webpage, between and , add this line:
For example:
3. To see that in action, click here.
Alternately, you can call your favicon favicon.ico, load it to the root directory of your website, and it will automatically load for all your pages. This works in most browsers.
TO ADD YOUR FAVICON TO YOUR LIVEJOURNAL PAGES
This option isn't available for free or plus LJ accounts. This tutorial is designed for the S2 style system.
1. Upload your favicon. If you don't have a personal website, you can upload it to free sites such as FileAve.com or 110MB.com, or you can email me and I'll upload it to my site for you. Note: livejournal scrapbook, Imageshack and Photobucket won't work for this type of file.
2. On the Journal Display page you will see your layout name (mine is Flexible Squares), and below that, your Theme name, if you're using one (mine is modele). [Screenshot] If you haven't customised your journal much, it may either say layout default or the name of a livejournal premade layout under theme. Make a note of it.
3. Go to Your Layers. If you have your own theme, click on the edit button next to it. If you don't, look for your layout name (e.g. Flexible Squares, Boxer, Unearthed etc), and click on the edit button after it says user. [Screenshot]
4. You will now see a box where you can enter text. [Screenshot] There is almost certainly some code already in the box, so scroll right down to the bottom, and enter the following code, changing the text in red so that it is the url for your own personal favicon.
function Page::print_custom_head()
{
"""
http://yourwebsite/favicon.ico"/>
http://yourwebsite/favicon.ico"/>
""";
}
5. Now press Save & Compile (at the top of the page). And you're done! You can close that page, and check out your journal. The favicon should also show up on your Friends' Page and Calendar view.
(Credit: theme layer code from s2howto. Tutorial road-tested by dolimir_k. Additions suggested by isiscolo)
And in case you wanted to use a favicon, but don't want the bother of making one, I've made a little batch of them, 44 in total.
[ zip file ]
They also show up on tabs, so they're not just cute, they're very handy as a method of quickly distinguishing one tab from another.
This is meant as an idiot-proof guide, so while there'll be alternatives to the methods I've described, I've tried to make this as easy as possible for anyone to follow.
TO MAKE YOUR ICON
The mini icon needs to be a 16 x 16 px image, and so that it will be visible in any browser (IE, Firefox etc) it should be a .ico file.
Here are two alternate options for creating a favicon.
1. (a) If you have suitable software (Paint Shop or Photoshop or the like) create and save a 16 x 16 pixel .bmp image. Make it something simple, as there's not much room in a space that small.
(b) You will then need to use different software to convert it to a .ico image, (most software won't allow you to save as a .ico, and you can't simply change the extension name). I use Irfanview - it's free, and you can download it here. Open Irfanview. Click on File, then Open, browse to the file you want to convert and open it. [Screenshot] Then click on File, Save As, and in the drop down box at the bottom, chose ICO - windows icon. [Screenshot] Then press Save, and it's done.
2. Alternately, if you want a quick and easy method, but one that won't generally give such good quality results, use an online favicon generator, such as Dynamic Drive. Favicon Generator creates quite nice little text favicons.
TO ADD A FAVICON TO A WEBSITE
1. Upload the favicon to your website.
2. In the header of the html code for your webpage, between and , add this line:
For example:
3. To see that in action, click here.
Alternately, you can call your favicon favicon.ico, load it to the root directory of your website, and it will automatically load for all your pages. This works in most browsers.
TO ADD YOUR FAVICON TO YOUR LIVEJOURNAL PAGES
This option isn't available for free or plus LJ accounts. This tutorial is designed for the S2 style system.
1. Upload your favicon. If you don't have a personal website, you can upload it to free sites such as FileAve.com or 110MB.com, or you can email me and I'll upload it to my site for you. Note: livejournal scrapbook, Imageshack and Photobucket won't work for this type of file.
2. On the Journal Display page you will see your layout name (mine is Flexible Squares), and below that, your Theme name, if you're using one (mine is modele). [Screenshot] If you haven't customised your journal much, it may either say layout default or the name of a livejournal premade layout under theme. Make a note of it.
3. Go to Your Layers. If you have your own theme, click on the edit button next to it. If you don't, look for your layout name (e.g. Flexible Squares, Boxer, Unearthed etc), and click on the edit button after it says user. [Screenshot]
4. You will now see a box where you can enter text. [Screenshot] There is almost certainly some code already in the box, so scroll right down to the bottom, and enter the following code, changing the text in red so that it is the url for your own personal favicon.
function Page::print_custom_head()
{
"""
http://yourwebsite/favicon.ico"/>
http://yourwebsite/favicon.ico"/>
""";
}
5. Now press Save & Compile (at the top of the page). And you're done! You can close that page, and check out your journal. The favicon should also show up on your Friends' Page and Calendar view.
(Credit: theme layer code from s2howto. Tutorial road-tested by dolimir_k. Additions suggested by isiscolo)
And in case you wanted to use a favicon, but don't want the bother of making one, I've made a little batch of them, 44 in total.
[ zip file ]