Chrome extension favicon

Some of you have asked me how to include a favicon in the Chrome Extensions after reading the "how to insert a favicon in blogger".

Chrome Extension MTG Finder favicon

Well, this one is even easier, you only need to put in the chrome manifest file a reference to a 16x16 pixel icon. It doesn't matters if the real image is larger than 16x16 (it can be the same file that you're using in the 128 icon), you only need to insert the following line in the manifest.json file:

<-- start manifest.json -->
{  "name": "MTG Finder",  "version": "1.1.2",  "description": "Displays a popup with the cards found by several mtg websites matching the selected words in the current tab",  "icons": {  "128": "mtg_finder_icon.png",  "48": "mtg_finder_icon.png",  "16": "mtg_finder_icon.png"},
  "options_page": "options.html",  "homepage_url": "http://themunsonsapps.blogspot.com/",  "background_page": "background.html",
<-- more manifest stuff -->
}
<-- end manifest.json -->

Remember that the Chrome Extension will works fine without the bold line, but you won't see the favicon in the pages created by the extension such as the options page.
Continue reading »

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
Continue reading »