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 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.
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:
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:
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.
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.
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:
Here you want to 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:
You are presented with the dimensions of the image:
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.
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.
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:
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:
Here you are presented with this box. Give your image a name and save as a PNG file in the folder of your choice:
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.
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:
Select Branding as shown below:
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:
Click Save & Publish when you’re done:
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:
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:
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:
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:
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.
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
Join the other 800,000+ members below and accomplishing your dreams.
100% Legit 98% Positive Review Rate
Thanks for reading.
If you have any questions regarding Favicons, please drop them in the comment section below. I’m always happy to help,