As web designers, our eyes are always drawn to the top of our web browser’s window when viewing a website. What can you find there? More often than not, the favicon.
A favicon can say a lot about a website before you even look at the site itself. Adao* always make custom favicons for every website we build, as it’s the little touches like this that set us apart.
So how can you add a favicon to your site? There are two simple ways to do this. But first, you need to create it.
Start by creating a 16px x 16px or 32px x 32px image in your image editing software, such as Photoshop. If you don’t have one, then we recommend using the great online tool http://pixlr.com/editor/.
This will become your favicon, so design away. In our case, we have the Adao* star.
You can then save this as a jpg or a transparent png (if you have bits you want to keep see-through, as we do).
Then, go to https://realfavicongenerator.net/ and upload your favicon image and select the size you made it. Click generate and sit in awe as your little tiny square of delights is created.
You can then download the favicon in its proper .ico format. Name it favicon.ico.
Now you have it, let’s add it to your site!
The first and easiest way is to simply upload your new favicon.ico into your website’s public root folder. This would look like the following after uploading it (using an FTP client, in this case, FileZilla):
This will just work. Which is great! But what if you have access to your site only and don’t have your FTP details? For instance, if you have access to your WordPress blog?
There is another way. You still need to upload your favicon file though. Once you have done this, take a note of the address/destination of it.
Then, add the following snippet of code in the head of your pages:
<link rel="shortcut icon" href="http://www.example.com/yourpath/favicon.ico" />
You will now have a lovely new favicon on your website!
As experienced and passionate web designers, Adao* are the perfect company for your web development needs. Why not contact us to see what we can do for you?