You don’t need to have a favicon for your website, though I think it’s an important part of the branding and promoting your site. Also, it only takes 2 minutes to add one to your site so I you really have no excuse!! In this WordPress tutorial, we will show you how to add your company logo as a favicon that will appear on the search bar when a user opens any pages on your website..
What is a favicon?
Favicons are those little 16×16 icons that you see at the top of your browser. They also appear in other places such as bookmarks and RSS readers.
It is an icon that is connected to a particular website and is frequently seen in the address bar of a browser used to access the website or beside the site name in a person’s collection of bookmarks.
Why should one have a favicon?
Making it simple for consumers to find and navigate your website saves them time and increases the likelihood that they will interact with it. Another way consumers can find your website is by recognizing the authors of the page.
If you have enough pages about different topics, consumers will want to learn more from you as a brand and the knowledge you have.
You can also watch our full YouTube Tutorial and save some time on installing your first favicon
How To Add a Favicon to your WordPress site
Step 1: Appearance > Customize
Go on to WordPress, scroll down the sidebar till you reach” Appearance” and click on “Customise”
Step 2: Site Identity > Site Icon
Under “Site Identity”
Click on the “Site icon”
Step 3: Upload image
Upload the file you want if you do not have it in your media library. Make sure your image size is square size.
Step 4: Crop File
Once you have selected the file you want to use,
You will get the option to crop your image the way you want
Step 5: Publish
Once you have done that, click on the “ publish” button
And you are all set!
Those were the 4 easy steps on how to add a Favicon on your WordPress Site, we hoped this was easy for you and that you found it useful.
How To Create A Favicon?
16 by 16 pixels isn’t a lot of space to play around with, therefore most people use their websites icon as their favicon (FavIcon is short for Favourites Icon after all!).
The first thing you need to do is crop your websites logo or icon in a graphics program such as the widely used commercial program Photoshop or the popular open source script Gimp. You can also use these programs to create an icon from scratch if it isn’t suitable to crop your logo.
Favicon File Should Be jpg. or png.
You can save your cropped image as a gif, jpg or png file. I would encourage you to use png as it allows transparency. For example, saving the file as a jpg image will add in a white background too, which isn’t usually what you want (though is sometimes used to highlight the top layer of graphic or text).
It’s important to make sure your cropped image has square dimensions. I also think it’s very important to save the favicon in a larger resolution as you can always reduce the image size later, but you cannot increase it. 64×64 pixels should be sufficient but the higher the better in my opinion (as you will see).
The favicon has a file extension of ico, which is what windows uses for icons. The favicon.ico is usually uploaded to the root of a website and this is where many browsers look for it.
A quick way of creating a Favicon
The quickest and easiest way to create a favicon is to upload an image to Dynamic Drive’s fantastic favicon generator. You can upload an image in gif, jpg, png or bmp. The image can be up to 150kb in size; any higher and you will need to reduce the image size yourself using your graphics program. Of course, if you search for ‘Favicon Generator’ online you will find lots of programs like this (e.g. the FavIcon from Pics service by Chami), though I have always found the one from Dynamic Drive to be the easiest to use and the most reliable.
Although this great tool lets you create 48×48 and 32×32 desktop icons for Windows, it only allows favicon icons which are 16×16 pixels in size. This is perfect for most users, though if you want a higher resolution you may need to create it yourself.
Creating the Favicon manually
What many webmasters don’t know is that it is possible to save favicons in larger sizes than 16×16 pixels. Favicons which are 16 by 16 pixels look fine in browsers but when the site is saved as a favourite on a desktop it will look really poor.
Thankfully, you can save the favicon as a larger file. 32×32, 48×48 and 64×64 are becoming more common; I’ve heard some people saying that they prefer to save the favicon as a 128×128 pixel image. Obviously, the larger the image file, the longer it will take to load up in someones browser, so bear this in mind when creating your favicon. That being said, I think it’s worth saving your favicon in a larger format so that it looks better small and large.
To create a favicon manually you need to simply save your cropped favicon source image as an ico file. If you are using Photoshop you will need to download the ICO Plugin from Telegraphics in order to do this. This plugin is free and is available for both Mac and PC.
Gimp users will be pleased to know that the default version of the script can save ico files already.
Adding your Favicon to your WordPress blog
The first thing you need to do is upload your new favicon.ico file to the root directory of your website. Some browsers will look for the favicon there and will display it in browsers automatically, though many don’t so you need to tell them exactly where it is.
You need to enter the code below in the head section of your website design (i.e. between the <head> and </head> tags):
Sometimes your favicon will not display right away because of browser cache issues. If this occurs, simply visit www.yoursite.com/favicon.ico directly and refresh the page. You should see your new favicon. Then go back to your website and it will be now showing in the browser tab.
