The iPhone and iPad have been out for quite awhile already and you might have noticing requests in your website log for a file called apple-touch-icon.png. If you have congratulations your website is getting traffic from iPhone and iPad users, the bad news is their mobile web browser is looking for a file to create a custom icon on their devices that you don’t have.

The good news is it is an easy fix. The Apple mobile browser is looking for a file called apple-touch-icon.png to create a fancy Apple styled icon on the iPhone or iPad. The easy way to fix it is to create or add a file called apple-touch-icon.png to your root folder of your website. The PNG image should be at least 45 pixels by 45 pixels.

If you can’t save a file to your root folder, perhaps because you are on free hosting or simply do not have access you can point the Apple mobile browser to another location using the following code:

<link rel="apple-touch-icon" href="/folder/iphone-ipad-icon.png" />

Like the favicon code you will need to add the code to the head section of your HTML.

Once you have either have a apple-touch-icon.png or have pointed the browser to another location using the link code your visitors will be able to save your website on their Apple mobile devices with a nifty icon on their iPhone and iPad devices. It will definitely make your website stand out on their machines.

The original post on How to Add Your Favicon to Blogger is the most popular post here on FreeFavicon. It was time I wrote a new post about the topic because Blogger has improved considerably and those instructions are no longer needed.

To add your favicon to your Blogger blog is now a simple three step process.
Step 1: Goto your layout in Blogger.
Step 2: Click Edit on the box that says Favicon. A new window will open.
Step 3: In the new window that opened up select your image for your favicon and click save. Blogger upload your image and use it as your favicon.

Nice to see how Blogger has improved adding your own custom favicon to their sites. No need to edit code anymore.

Dropbox is a fantastic service. I use it regularly to sync files between my desktop and laptop. It does have other uses though, like sharing files with your friends and even hosting a website. While I would not recommend you host your main business website with a Public shared folder using Dropbox, using the service to host some images, like your websites favicon, has some advantages.

If you are using a service such as Blogger and want to add your own custom favicon you have several choices of where to host your favicon. You can upload it and host it on Google’s server, although last time I tried they did not accept the .ico format. That works until you want to change your favicon then you have to do it all over again including updating your code that points to your favicon.

You could host your favicon on an image hosting service, but then they might delete it at anytime. Again if you want to change your favicon you will be redoing all of the code.

Since Dropbox can host files that are publically accessable on the Internet you now have another option. Following the tips and tricks wiki to making your own website you can simple create a folder for your favicon, and copy your favicon into that folder. The advantage of hosting your favicon in your Dropbox public folder means you have more control over it. If you decide to change your favicon all you need to do is simply copy over your existing favicon and it will be replaced on your website. You don’t have to redo the code pointing to it, and you never have to worry about an image hosting service deleting it.

If you have not tried Dropbox, you really should give it a serious look. They offer 2gb of space for free, which is more than enough to share and sync files between computers.

They also have a great favicon if you are looking for some inspiration.

How to Add Your Favicon to Blogger is by far the most popular post on this blog. If you read through the comments you will notice that for some people it works perfectly and for others they seem to have a tough time getting it to work. The reality is that adding a favicon to a Blogger.com blog is a bit of a hack. Hacks sometimes break and do not always work for all web browsers. This is currently the case with adding a favicon to a Blogger.com blog hosted on Blogspot for Internet Explorer.

For those of you wanting desperately to have your favicon to work in Internet Explorer you have to use a .ico file, since it appears that Internet Explorer simply does not want to support the .png or other formats for the favicon. You can’t upload a .ico file to Blogger.com, that means you will need to host your favicon somewhere other that on Blogger.com. An option could be Google Page Creator.

You still need to insert the code just before the closing head tag. You code then would look something like this:

<link href='http://www.example.com/favicon.ico' rel='shortcut icon'/>
</head>

The code is currently installed on the Free Favicon Blogger test blog and it is showing in Internet Explorer 7 on Windows Xp Pro. If it does not work for you leave a comment and we will see if it can be sorted out.

Google/Blogger broke the instructions in the previous post about how to add your own favicon to a blogspot blog by adding some HTML that referenced the Blogger.com favicon instead. Fortunately the fix for this is relatively simple. Here is what has happened.

Blogger.com has added their own HTML to the templates near the top referencing their favicon. It looks like this if you look at the source code.

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

The instructions on How to Add Your Favicon to Blogger in step three says to add your own HTML code referencing your favicon right below the <head> tag. The web browser however will use the last reference so the Blogger.com favicon code was coming later on. The fix for this is to place your favicon code just before the closing <head> tag that looks like this: </head>.

Your code referencing your custom favicon then overrides the Google/Blogger.com code for the favicon and your custom favicon will return.

I tested this on the Free Favicon Blogspot blog and the favicon has returned. Give it a try on your Blogspot blog and let me know if it works.