froggo logo ® Creating a favicon with a transparent background

"There is something delicious about writing the first words of a story.
You never quite know where they`ll take you." ― Beatrix Potter

Creating a favicon with a transparent background

In this weeks video tutorial I show you how to create Favicons with a transparent background. Firstly I explain what a Favicon is, why they are used and give a quick example of a non-transparent favicon and compare it to the transparent icon that we'll be creating in this video tutorial.

I then go on to explain the steps you need to take in order to create your Favicon using Adobe Photoshop and upload it to your website.

  1. Open a new project in Adobe Photoshop
  2. Label the new project "favicon" and put the width as 48px and the height as 48px, keep the resolution at 72 pixels/inch and leave the color mode as the default RGB.
  3. Design your favicon using the tools provided in Adobe Photoshop.
  4. When you're happy with the way the favicon looks, simply remove the background layer.
  5. Save the project - select 'File' --> 'Save for web and devices' and save the favicon as a PNG-24 ensuring that you label the file 'favicon.png'.
  6. After you've saved the file as a PNG you'll want to locate it in the folder which you saved it in and change the last three letters '.png' to '.ico'.  You'll then get a message asking whether you want to keep the file as .png file or take on the new .ico, and all you have to do is select change to .ico.
  7. Uploading the Favicon - Your Favicon is now ready to upload to your website.  Open up your FTP to drag and drop the 'favicon.ico' file to your main website directory.  This will now display the Favicon on all pages within your website.

Read Our Latest News

Just how good can your online marketing be?

Work out what is going wrong and why.

Which means you can laser target your spending decisions…

…in less than 5 minutes!

Digital strategy builder