How To Create A Website Icon – A Favicon

Add a touch of stylistic panache to your website and make your presence stand out amongst the big players on the web by creating your own iconic yet inviting icon resembling your business.

How To Create A Website Icon

My Favicon for my Blog

How to create a website icon or the proper term – A Favicon, has never been so straightforward now that WordPress has yet again evolved to make their user experience so simple to accomplish, generating your own professional iconic stance.

I created my own favicon for another website not that long ago but had to register my image with a Favicon website, upload a plugin to enable the image to appear, a process that took some undertaking. Not anymore, the process can now be generated from within your WordPress back office in a fraction of the time. This took me approximately 10 minutes, although 4 hours to write this post.

Thanks to Kathy at Wealthy Affiliate who told members of WordPress’s new updates I thought I’d create my own live as I write this post to show how easy the process is.

Did you know: Not creating a Favicon is amongst the 25 most common mistakes bloggers fail to accomplish.

What is a Favicon?

A Favicon simply gives your website an identity in the form of an icon or tiny graphic. The image appears when you have a tab open, the more tabs you have opened the more dominant your graphic becomes. When you save a website to your bookmarks and favourites your image creates your presence.

Your Favicon Creates Your Presence

Your Favicon Creates Your Presence

Although small within the tabs and favourites bar your presence stands out yet on a tablet and mobile home screen or as a shortcut on a desktop your favicon can represent your website to a greater degree with a potent stance creating your own iconic identity. The image is quite powerful when saved in bookmarks and favourites.

When people save your website to either their Mobile / Tablet home screen or as a shortcut on your desktop, your Favicon graphic is used as the symbol to click on.

Notice how all the major websites have created theirs, without one you are presented automatically with a blank sheet of paper for the icon of your website making you look bland as the image shows below:

Also, take a look below how bookmarks stand out below the tabs. Google, BT, Amazon, Argos, Ebay, Gumtree and YouTube presented here stand out from the crowd. You instantly know it’s them through their iconic logo they have created in the form of their Favicon:

Making a professional Identity

Let’s create an iconic symbol

The rule of the thumb is to create a transparent image with a true square of minimum dimensions: 512 x 512 pixels in the format of either jpeg, gif or png. Although images can be created, transparent images are the bees knees with the option of filling in the background with the colour of your choice.

The first thing to do is choose an image that represents your niche website. I’m into blogging and wish to represent my website with either a picture of a laptop, money or tablet, etc but I have opted to look for a cup of coffee as this represents blogging to a tee.

So, a cup of coffee is my decision. Now I need to search for something iconic, something square and something colourful, that will stand out from the crowd to make my potent stance.

To search for my image, I will use pixabay as they allow you to use pictures from their collection of free stock photos without charge. Their collection includes photos, vector graphics and illustrations. Vector graphics is the requirement for creating a Favicon as these are transparent images.

A picture editing suite is also recommended to make your graphic completely square, so Photoshop, Gimp or any other services can be used but I thought I’d use PIXLR Photo Editor as this is free and is commonly used and appreciated by Wealthy Affiliate members.

Let’s search for an iconic transparent image:

Head of over to pixabay:  You will have to create a free account by clicking the Sign Up button at the top right of the screen.

Type in your thoughts as I have done with coffee cup, choose Vector Graphics and search:

Pixabay

Searching through the graphics I have come across a bright red cup of coffee which will represent my website to perfection making an iconic yet vivid stance. I’m trying to make my presence stand out whilst searching for something that looks pretty square as I will have to make this graphic perfectly square in the next step.

Searching for a vivid presence

Searching for a vivid icon

This red cup of coffee will represent my blog with style and make my presence stand out.

Making the graphic perfectly square

Click on your chosen graphic to enter the download page. Click on Free Download and a dimensions box will appear.

The protocol for a WordPress Favicon is to make the dimensions square having a minimum of 512 x 512 pixels. This graphic is not far from square and can be resized perfectly square in PIXLR without altering it’s dimensions too much. Rule of thumb is to choose a graphic as square as possible.

My graphics small size is 640 x 563 pixels. The smaller figure is still greater than 512 pixels, so I choose the small image. Rule of thumb is to choose a size representing over 512 pixels for both figures.

Pixels greater than 512 for both figures

Pixels greater than 512 for both figures

Choose the size and select download

Choose the size and select download

Whenever I download an image it is saved in my download folder. Remember where your graphic is stored as you will need it in the next step.

Let’s resize the image perfectly square

Head over to pixlr.com: Here you will have to create a free account by clicking the SIGN UP FREE box at the top right of the homepage.

Scroll down the homepage and choose to LAUNCH WEB APP on the PIXLR EDITOR as shown below:

PIXLR Editing Suite

PIXLR Editing Suite

Here you want to OPEN IMAGE FROM COMPUTER

Open Image From Computer

Open Image From Computer

Go into your download folder or where you saved your image and select the saved graphic.

This will open the image in the PIXLR Editor. Click on Image in the menu-bar above the graphic and select Canvas Size as shown below:

PIXLR sometimes encounters a problem not showing the menu-bar when you are using Google Chrome. I haven’t had this issue but if you do encounter this problem check what PIXLR recommends here:

Select Canvas Size

Select Canvas Size

You are presented with the dimensions of the image:

Canvas Size

Canvas Size

In my situation I have to alter the height to make the graphic square. I alter the 563 pixel height to 640 to match the width producing a perfectly square graphic. Select OK when you’re done.

Perfectly Square Graphic

Perfectly Square Graphic

I have decided to put the initials of Wealthy Affiliate on this image – WA and the blow them up to make them readable – Bit of flash! ha!

All you do is select the A in the left hand toolbar and create the box on the graphic. Create your own style with fonts and sizes.

Placing Initials on the Cup

Placing Initials on the Cup

I have chosen my font, made it black & bold and blown it up to the maximum size to make it stand out, as shown here:

Finished Cup of Coffee

Finished Cup of Coffee

Important to note: If you wish to create your image as an icon app graphic on a mobile or tablet home-screen, choose a colour for the background. Notice the bottom left toolbar, I have chosen black for the background colour. Black works well against the red cup.

There is a Pointer Tool in this toolbar where you can drag the favicon onto the center of the canvas. On the righthand side of the page is where you see the colour of your background and where the Favicon is centered.

You have the option of saving your graphic as a Favicon or Site Icon, explained further down the page.

Save the image by choosing File, then Save:

Save the Image

Save the Image

Here you are presented with this box. Give your image a name and save as a PNG file in the folder of your choice:

Saving the Image

Saving the Image

Let’s install the Favicon Image into WordPress

Upload your newly created image into the Media Library as you would for posts and pages.

Select ‘Media’ and ‘Add New’ (highlighted in blue) to upload your image or graphic.

Mine never appears when I do this but it is there. Hop out of the Media Library and enter back in and you will see your uploaded graphic.

Upload Your Graphic

Upload Your Graphic

All what’s required now is to head into the ‘Customize’ section within the ‘Appearance’ menu, then into ‘Branding’ and select the newly created image to use as the website’s Favicon or Site Icon:

'Appearance' then 'Customize' highlighted in blue

‘Appearance’ then ‘Customize’ highlighted in blue

Select Branding as shown below:

Select 'Branding'

Select ‘Branding’

You have 2 choices:

Select your uploaded graphic in the Favicon section for appearing in tabs, bookmarks, favourites and short-cuts on desktops,

Or by saving as a Site Icon will do all of the above plus will represent your Favicon just like an app icon on a tablet or mobile home-screen. This is my preferred choice:

Either save as a Favicon Image or Site Icon

Either save as a Favicon Image or Site Icon

Click Save & Publish when you’re done:

Click Save and Publish

Saving as a Favicon

Saving as a Site Icon

Saving as a Site Icon

My Favicon as a Site Icon

My Favicon as a Site Icon

Notice my Favicon with the black background, this is how it is represented on a mobile or tablet home-screen. It really does look fab on mine and blends in so professionally amongst all the famous app icons yet when opened in tabs, saved as favourites and bookmarks or as a desktop shortcut the Favicon is represented without the background colour, as shown below:

Congratulations, you have created a powerful iconic graphic unique to your website.

Here’s what my red beacon of a coffee cup looks like on my Favourites bar and tabs:

My Favicon - My Blog

My Favicon – My Blog

Blending in quite nicely among the big companies. The cup represents my job, blogging away with a cuppa besides me with the iconic initials of Wealthy Affiliate.

Your Favicon will be displayed when saved to bookmarks & favourites, a shortcut on a desktop and in tabs instead of showing a blank piece of paper.

If you opt to save your Favicon as a Site Icon your graphic will show up with an appearance of an app icon when saved to a mobile or tablet home-screen surrounded by the background colour you chose, the reason the graphic has to be perfectly square.

Here’s what my Favicon looks like as a shortcut on my desktop amongst the well known companies:

My Blog - My Favicon

My Blog – My Favicon

A professional stance establishing your website’s identity takes your presence into the same league as the big players and the most successful bloggers.

Both mine look fab on a mobile and tablet because I chose to save as a Site Icon, I’m seriously impressed with the look, hope you are too.

Try my Favicon out by saving my website as a shortcut to your desktop to see what this Favicon looks like to give you an idea.

I’m on Google Chrome. The process is as follows in the diagram below:

Saving to Desktop on Google Chrome

Saving to Desktop on Google Chrome

The beauty of Wealthy Affiliate

Wealthy Affiliate update members with all the latest news regarding anything blogging related for running your own business online.

Here’s what I found under their training library for creating your own Favicon:

Creating your own Favicon

A new post relating to WordPress’s latest news that a plugin is no longer required for creating your website’s Favicon.

Click on these menus and you are presented with training for how to accomplish a task. Underneath all the training modules are QA’s where you can post a question whenever you are stuck or unsure and help will come your way.

Watch the Video

Wealthy Affiliate training – Creating a Favicon:

If a pop-up appears, just click away to watch the video.

How To Create A Website Icon

How To Create A Website Icon

The most powerful blogging platform in the world – Wealthy Affiliate University. Learn how to create your online income by virtue of Affiliate Marketing.

If you would like to get involved, no matter how inexperienced you are: Learn to create your own website around your passion and earn money online. Wealthy Affiliate uncover all the blogging secrets when you become a member and show you exactly how it’s done.

I joined as a complete newbie and have never learnt so much in such a short space of time:  My destination – To become a Wealthy Affiliate

Here’s my #1 recommendation:

Join the other 800,000+ members below and accomplishing your dreams.

100% Legit    98% Positive Review Rate

Free starter membership

Join the Wealthy Affiliate Program


SimonThanks for reading.

If you have any questions regarding Favicons, please drop them in the comment section below. I’m always happy to help,

Thanks again,

Simon.


 

16 Comments

  1. Hi Simon,
    What a great article on Favicons. Initially I thought it would be hard to design one.
    The way you have explained every step of the process makes it look really easy.
    I will definitely be starting mine as soon as I can. Thanks for the great article.

    • Hi Anthony,
      Thanks for calling in and leaving a message.

      I too thought the design would cause complications but mine was designed very quick. It just took ages to write the post – ha!

      You will find it very straightforward if you follow the steps, maybe watch the video as this is the same procedure.

      The only problem some have is when they are on Google Chrome but that wasn’t the case for me as I use Google Chrome. They suggest instead of inserting images stored in Google you download them to your desktop and also don’t use full screen which I never do.

      If you do have any troubles click the link in the post as PIXLR know about Google Chrome and have identified solutions.

      Good luck with yours – Make a fab iconic image,
      Simon.

  2. Simon,
    This is such a great post! At first I thought I have no favicon but then I realized that I created one by using the image I chose to be my site’s feature image lol
    I am so happy to have this done! 🙂
    But it’s very good to know for those applications you are using for creating perfectly sized images.

    Thanks for sharing, one more outstanding page from you!

    Best,
    Sunny

    • Hi Sunny,
      Thanks for stopping by.

      Yeah, I wanted to create a site icon because when I saved my website to my homescreen on my tablet it just creates a tiny screenshot of your web page and doesn’t look that professional in among all the app icons.

      I thought I’d investigate in the Wealthy Affiliate library regarding training on Favicons and came across a boat load. The video is from Marion, a Wealthy Affiliate member. I thought I would create a post, share the video as I made mine live.

      I’m really impressed with it too. Looks fab on my tablet and professional too.

      Thanks again Sunny,
      Simon.

  3. Hello and thanks fro sharing, this is the first time that I have heard of something like this, this sounds very interesting. I would like to learn more about this, all the best to you, great job. Have a good day.

    • Hi Norman,
      Thanks for stopping by and messaging.

      I too wanted to learn how to develope a favicon especially a site icon as this is what puts your icon on a tablet and mobile home-screen. I found the training in the Wealthy Affiliate library and thought I’d do a post live as I implement it after learning the ropes.

      I’m really impressed with mine. It looks fab in bookmarks, favourites, tabs and as a desktop shortcut but I have to say I really am impressed with how the icon displays on my tablet. Much better than a screenshot of your website.

      A few have had problems with PIXLR not working with Google Chrome but I have had no issues. They have written QA’s regarding problems as I’ve placed the link for further up the post:

      Good luck with your creation Norman and thanks again,
      Simon.

  4. Hi Simon!

    You’ve really went thoroughly through the steps to add a favicon to a website. I love it having one for my site too! 🙂 That’s great Wealthy Affiliate has the instructions there too. They are so awesome for training!!

    Thanks for a great post!
    Grace

    • Hi Grace,
      Thanks for calling in and leaving a message.

      I’ve tried to make a thorough step by step tutorial how to add a favicon to a website and don’t they look great.

      I am impressed with mine. As I say, I decided to save mine as a Site Icon then when someone saves your website as a home-screen icon on a mobile and tablet your favicon shows up instead of a snippet of your webpage. Looks spectacular in among the well known companies.

      Yeah, everything blogging related is on the Wealthy Affiliate platform, this is just something I have learnt from them and now showing others how to do the same.

      Thanks again Grace and all the best,
      Simon.

  5. Nam

    Hi Simon,

    Thank you for sharing. I have been searching for this guide. I will implementing this to my site too.

    Very easy step by step explaination. You left nothing out and I’m grateful for that.

    All the best,

    Nam

    • Hi Nam,
      Thanks for your interest and I hope you accomplish your own Favicon.

      You have 2 choices:
      1: Save as your graphic as a Favicon and this will show your graphic on tabs, bookmarks, favourites and desktop shortcuts.

      2: Save your graphic as a Site Icon which I have opted for as it does all of the above plus creates your graphic as an Icon App when you save your website to a mobile or tablet home-screen instead of showing a tiny image of your website.

      Good luck with your creation Nam,
      Simon.

  6. Antilena

    Excellent article Simon, thank you for the instructions. I am now going to go and create my own Favicon so my website will stand out too.

    Thanks again, very much appreciated.

    To Your Success!

    Antilena

    • Hi Antilena,
      Thanks for stopping by and reading.
      I’m glad I have inspired you too to create your own favicon, I’m delighted with mine.

      This is one of the to 25 mistakes bloggers fail to undertake according to WordPress and you do question the importance before you start. Once you have created your own you realise why WordPress value the importance of having such a shining beacon.

      Thanks again Antilena,
      Simon.

  7. Will

    Simon,
    This is great information about something I have been curious about. Creating a simple icon can be extremely powerful.
    Thanks for the information and all the best with your website,
    – Will

    • Hi Will,
      Thanks for calling in and reading.

      Yes, I was curious too as I wanted something more powerful than just a blank piece of white paper representing my website so I took the training from the Wealthy Affiliate members and though I’d write this tutorial as I set my own up.

      I prefer to save as a site logo as this created the favicon to look like an app icon when saved to a mobile or tablet home-screen.

      They certainly make your website stand out from the crowd, only small but powerful.

      Thanks again Will,
      Simon.

  8. Hi SImon,
    Thanks so much for all the great information on favicons. I had been looking for a good tutorial on how to make and use them and you nailed it! Great presentation and fun to read. I’m adding this to my “Essential Training” folder!
    Thanks again!
    – Joe
    P.S. I definitely recommend WA to your visitors, one look at what’s available there and it was a no-brainer to join immediately 🙂

    • Hi Joe,
      Thanks for reading how to create your own favicon.

      I’m glad you found the tutorial fun and able to follow. They are are powerful icon when you see them on a tablet home-screen. I’m delighted with how mine looks but you have to save the graphic as site logo for this to represent your website just like an app icon otherwise your website will show a small image of your web post, this is if you choose to save as a favicon.

      Wealthy Affiliate is up to date with all the latest news regarding anything blogging related with training thrown in and QA’s. Who could wish for any more. Very enjoyable.

      Thanks again Joe,
      Simon.

Leave a Reply

Your email address will not be published. Required fields are marked *