Favicon Sizes

At one time favicon sizes were simple. Create a 16×16 pixel ico image and place it in the root of your web server with the name favicon.ico and the browsers picked it up as the websites favicon. Then came 32×32 pixel sized favicons. That was easy enough but things change and we got Apple touch icons, Android icons and now Windows Metro tile icons. It gets confusing really quickly.

  • 16×16 – Still the default for a favicon. Should be included in the favicon.ico file.
  • 32×32 – The next size up for favicons. Both 16×16 and 32×32 pixel sized icons can be included in the favicon.ico file. This is something our current favicon generator does not actually do. The next generation of our icon creator will provide this.
  • 57×57 – Standard iOS home screen. iPhone, iPod Touch, and Android 2.1+ devices.
  • 72×72 – For first and second generation iPad.
  • 96×96 – GoogleTV icon.
  • 114×114 – For iPhone with high resolution retina displays running iOS 6.
  • 120×120 – For iPhone with high-resolution retina display running iOS 7.
  • 128×128 – Chrome Web Store icon.
  • 144×144 – For iPad with high-resolution retina display running iOS 6. Also IE10 Metro tile for pinned site.
  • 152×152 – For iPad with high-resolution retina display running iOS 7.
  • 195×195 – Opera Speed Dial icon.

As you can see the number of favicons that you could create has grown considerably. If you want to save time we recommend you make at the very least three favicons. A 16×16, 32×32 and a 152×152 icon for use with iOS/Android devices. The larger sized icon will be automatically downscaled by the devices.

Currently our generator will only produce a 16×16 ico file from your image. Our second generation creator that we are testing now will allow you to produce an ico file with both 16×16 and 32×32 pixel icons included as well as png formats for 16×16, 24×24, 32×32, 48×48, 57×57, 64×64, 72×72, 114×114, 120×120, 144×144, and 152×152 sized icons.

Look for our announcement soon about the new icon creator we have been working on and more information of how to add all of the different sizes on your website.

Apple Touch Icon

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.

How to Add Your Favicon to Blogger

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.

Hosting Your Favicon with Dropbox

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.

Dropbox Favicon

Blogger.com Favicon’s in Internet Explorer

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.