• Facebook Icon Link
    • Instagram Icon Link

    The 2020 Ultimate Guide to Favicons.

    the ultimate guide to favicons

    Tutorial Overview.

    In this tutorial I will explain what favicons are, why they are important, things to consider when designing a favicon and how to put a favicon on a WordPress website.


    What is a Favicon?

    A favicon (‘favorite-icon’) is a 16 by 16-pixel icon used by web browsers to provide a visual cue and additional branding for a website. They are usually found in browser tabs, browser history lists, bookmarks, and RSS feeds.

    browser tabs

    Why is a Favicon Important?

    Favicons are used in all modern browsers and are important for improving the user experience, building brand awareness, and establishing credibility. Favicons help website visitors easily identify and locate your links and tabs when multiple tabs are open. They help improve online branding, reinforce the legitimacy, and improve trust from website visitors. If you are not using a favicon, you will see a generic icon instead.

    generic favicon

    If you are not using a favicon on your website there is a good possibility your visitors may not take you as seriously as you would like. Favicons are the finishing touch on a website that says you pay attention to the details and are serious about what you do.

    How to Design a Good Favicon.

    Well-designed favicons are styled to match your brand or logo. Your website visitors should be able to take one look at your favicon and associate it with your website. Due to their small size, favicons are a unique design component and take some consideration to do effectively. Using your logo as your favicon is ideal but not always possible. Favicons should be made with simple shapes and vivid colors and many logos are too detailed to make an effective favicon.

    How to Add a Favicon to a WordPress Website.

    WordPress recommends uploading an image that is 512 by 512 pixels. That image is then automagically resized to be 16 by 16 pixels and used as the favicon.

    Adobe Photoshop Banner

    1. Create an image that is 512 by 512 pixels. This can easily be done with Photoshop.
    2. Login to the admin area of the WordPress website.
    3. In the Admin Sidebar, go to Appearance > Customize.

    appearance customize

    1. Click on Site Identity.

    site identity

    1. Click on Select Site Icon.

    select site icon

    1. Upload the image.

    site icon

    1. At the top of the screen, click Publish.
    2. You will now see your favicon in the browser tab of your website.


    Additional Posts.

    Pin It on Pinterest

    Share This