How can we help?

Tell us a little about yourself:











    Chat With Us

    Questions? Call Us

    "Justin at Alchemy Marketing is a marketing mastermind. He has worked with our company on every aspect of marketing including PPC, graphic design, mobile website optimization, media buying, billboard procurement and design and mass mail outs to name a few. Justin is very data driven and has a knack for pulling out insights that help our business optimize our advertising budget. I would recommend Alchemy to anybody looking to grow their online presence and drive more traffic to their website."

    Tom Tilaro, owner
    leatherfurnitureexpo.com

    "Justin has been a pleasure to work with. His expertise, creativity, and promptness keep us happy customers. 90% of our customers come see us because of how well our google ad words campaign is managed. We wouldn't be here if it wasn't for his website development and ability to utilize online marketing. Thanks Justin!"

    David Anderson, owner
    flooringhq.com

    "Justin and his crew at Alchemy Marketing are the bomb-diggity! Everything I need, and everything I envision, comes to life quickly and effectively through their expertise. When I'm not sure what I want or need, Justin's suggestions always point in the right direction!"

    Karen Pelot, owner
    pelotandassociates.com
    Alchemy Marketing
    2708 Hazelhurst Ave Orlando, FL 32804
    (407) 809-4090

    Privacy Policy
    Disclaimer
    Sitemap
    Accessibility

    How and Why to Install a Favicon

    A favicon (pronounced like your “favorite icon”) is the small, square image that appears on the left side of your website’s tab and on the bookmark bar.

    We’ve all seen them, but are they really that important? Well, I would (and will) argue yes.

    The many different favicons of the web

    Image created by Rehan Saeed.

    In this article we’ll be discussing the roles of favicons and how to get one showing on your site, no graphic design required.

    Three different favicons in a browser

    Three different favicons on Chrome.

    The Benefits of Installing a Favicon

    Even though it may look like they’re just for show, favicons play some important roles.

    Professionalism & Branding

    Showing users that you have your shi-… stuff… together is the combined effort of a lot of small details. This may not be the case for everyone, but I know that I notice almost every detail that has been overlooked on a website. It’s just human nature to focus on what’s missing or incorrect.

    Your website is an extension of your company, so you want everything looking perfect. Having the small “I didn’t add a favicon” icon in your tab bar isn’t doing you any favors.

    No favicon icon

    Here’s what you get if you don’t install a favicon.

    Also, you probably spent a lot of time and/or money on your logo. Make the most of that. You might as well throw that beautiful image everywhere that you can. (But probably don’t get a tattoo of it.)

    Differentiation

    Do me a favor and look up at your tabs right now. If you’re anything like me, you have at least five open. Whether or not you need all of them open is beside the point (I’m looking at you, Facebook).

    The point is that favicons are the easiest way for users to tell their tabs apart.

    Having a nice looking, noticeable favicon can cause your user to tab back to your site, giving you one extra chance to convert them. And when it comes to conversions, we should take every chance that we get.

    How to Create a .ico Image File

    Unfortunately, favicons have to be a .ico file type to be uploaded to your root directory. Also, unfortunately, you can’t export photoshop files as .ico files.

    We recommend using one of two ways to create your very own .ico file.

    Option 1: Use a Favicon Generator

    Once you have your logo or image ready to go, you can use https://realfavicongenerator.net/ to create your favicon file.

    Just make sure that your image is perfectly square and preferably larger than 260×260. Then, simply follow the prompts on the site and move on with this tutorial.

    Option 2: Change the File Type in the FTP Client

    FileZilla, which you’ll be using in the next section, allows for you to simply retype the file type of an image and use it as your favicon. So, use a photo editing software to make sure that your image is perfectly square, upload it to your root directory, delete the extension (.png, .jpg), and type in .ico in its place. Easy enough.

    How to Install a Favicon using FTP

    Installing a favicon is as easy as adding the favicon.ico image file to your root directory. In other words, you would upload the file so that it is located at http://example.com/favicon.ico.

    To do this, I recommend using an FTP client, like FileZilla. An FTP client will allow you to drag and drop files from your computer to your website’s server simply and quickly.

    Transfering a favicon from your local computer to a server using FileZilla FTP client

    The left panel of an FTP represents your local computer where all files on your computer are located. The right panel represents your website, all of the files living on your server. To move files, like a favicon, from your computer to your server, simply drag and drop the file from the left panel to the right.

    How to Install a Favicon on Your WordPress Site

    Creating and installing a favicon on your WordPress site is rather simple and doesn’t require a .ico filetype.

    Step 1: Create Your Favicon

    Favicons typically require a special .ico filetype, but, in the WordPress option that we’re going to use, a .png type will work just fine. Favicons typically look better with transparent backgrounds, so I would recommend doing that unless you want to ensure that the background stays consistent.

    So, use Photoshop or any other image editor to create your favicon in a 512×512 size. It’s important that the image is exactly square for this process.

    Step 2: Install the Favicon

    Using the left sidebar in WordPress, navigate to Appearance > Customize > General Settings

    For most themes, the option you’re looking for is called Site Identity.

    Under Site Icon, upload the .png file that you just created and click Save & Publish.

    That’s it. You’re officially a favicon owner. Go bask in the glory of your new browser icon.