Wednesday, March 16, 2011

Blogging tips: add favicon and open links on new tab by default

Maybe you have noticed the new icon displayed on the The Munson's Apps tab. This icon is named favicon. If you want to replace the blogger-favicon that everyone has, continue reading this lines.

The Munson's Apps favicon
Adding this to your website or blogger page is so easy (source). You only need to include this code lines in your head tag replacing ICON_URL with the location of your image (it will be displayed as 16x16, if it's greater, it will be auto-resized).


<-- start favicon -->
<link href='ICON_URL.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='ICON_URL.png' rel='icon' type='image/png'/>
<-- end favicon -->



In blogger, you can do this by going to Dashboard -> Template -> Edit HTML and insert it before the </head> tag (search it with Ctrl+F). Remember to save always a backup of the HTML before change it.

One problem that you can find is the .ico file. Maybe you can't create it or simply you don't have where to host it (blogger don't allows to upload .ico files). There are several sites with this purpose. Here I recommend one that I've used: iconj. Iconj is free, you only need to register. It hosts and generates your favicons for you and give you the source code ready to paste in your website's head.

Note that the ico file is only for Internet explorer, so if you don't include the first line, you will be able to see the favicon on Chrome or Firefox, but not in IE.


Other feature recently added to The Munson's Apps is to open all links in a new page. Maybe you know that inserting the target="_blank" attribute on any "a" tag, you will get this result, but doing it for every link is annoying. There is a simple solution to it, copy and paste the following code in the head tag of your blog like you did before with the favicon:


<!-- Open all links on new page -->
<base target='_blank'/>


With those lines, all of your links will be opened with the target='_blank' attribute by default without specifying it.

Updated 23/04/2011: to open all external links in a new window, read Blogging tips: Open all external links in a new page

2 comments::

sajarov said...

Moooola! Ahora stoy con el movil pero cdo coja el teclado lo meto en mi blog! Gracias!

Ivan said...

Enhorabuena! El primer comentario :-D

Sustituir el icono de blogger es algo que cuesta muy poco y se nota bastante. Tener la B esa naranja por todas partes es horrible y poco personal. Ya me contarás si te funciona.

Post a Comment