Add A Favicon To Your Website

How to add a favicon to your website

Have you ever noticed a small image on your browser’s tab while visiting a site? This is called a favicon, and adding one to your site is a simple way to make your branding more memorable for visitors and make your link stand out in a list of bookmarks.

WordPress provides a way to specify the favicon. Log into your site and go to Appearance - Customize. Then click on Site Identity and click on the logo area. There, you can specify an image to be your logo. Let's Review: How To Do It, The Easy Way Create a 16x16 image. If you want transparency, use the PNG or GIF format. Convert your image to.ico format using a free service such as favicon.cc. Upload the new icon to. For finer control, use the code above to.

The root directory is where your main index.html, index.php or index.asp page is (you know, the main page you get when you go to your website) as this is where b rowsers look for the favicon. If you are using the meta tags to show where the icon is located, then you can store them wherever you wish - in a folder just for icons, or even on. There are a few things to remember when creating your favicon: Ideal favicon size is 512 x 512 pixels. To do this on Canva, click Create a Design Custom Dimension then type your desired size. Choose colors that match your brand. If you are using more than one letter, make sure that it is big enough to read. You can easily add a Favicon to your website in EverWeb. First select the image that you want to use as your Favicon. This can be in any of the formats mentioned above. It’s best to make the Favicon something that’s easily recognisable – this is especially important in this scenario as the Favicon is very small!

You’ll find the option to upload a favicon for your site on the Website > General Settings page of your dashboard.

Click upload to search your computer for a favicon image you’d like to use, keeping in mind the following guidelines:

  • The image should be square with a pixel size no larger than 64x64.

  • The image must be saved as a .jpg, .png, .gif or .ico file. Other file formats won’t work.

If the upload is a success, you’ll see the favicon on the settings page.

You’ll need to publish to make the favicon live on your site, though there’s a good chance that it won’t show up in your own browser right away upon publish. This is because favicons are cached by browsers, so you may want to clear your browser cache after you publish.

First-time visitors to your site will be able to see your favicon, as will anyone visiting in a browser they haven’t used on a previous visit.

Still not seeing the new favicon on your end? Try viewing your site with something other than your usual browser - you’ll likely be able to see it then, though it may still take some time for the cache to update in your browser of choice.

-->

This topic explains how to add a favicon to your site.

Overview

A favicon is a small graphics file that is shown on a web browser tab, in the Address bar, in the browsing history, and in bookmarks or favorites, among other places. We recommend that you add a favicon to your site, because it represents and reinforces your brand, and helps distinguish your site from other sites that your customers visit.

Although you can add multiple favicons of various sizes and file types to your site, this topic shows how to add a single favicon. However, the same process and location are used to add more favicons.

Upload a favicon to your site's asset collection

To upload a favicon to your site's asset collection, follow these steps.

  1. In the left navigation pane, select Media Library.

  2. On the command bar, select Upload > Upload Media Items.

  3. In the File Explorer window, browse to the favicon image file that you want to upload, select it, and then select Open.

  4. In the Upload Media Item dialog box, enter the required title and alt text.

  5. If you want to publish the image immediately after upload, select the Publish media items after upload check box.

    Note

    If you don't select the Publish media items after upload check box, you must return to Media items page and manually publish the favicon later.

  6. Select OK.

  7. In the property pane on the right, copy the public URL of the favicon. You will use this URL later.

Create the HTML for your favicon

To create the HTML for the favicon, use the following HTML string. For the href attribute, replace Public_URL_for_your_favicon with the public URL that you copied earlier.

<link href='Public_URL_for_your_favicon'>

Create a fragment that contains a metatag for your favicon

Website

To create a fragment that contains a metatag for your favicon, follow these steps.

  1. Go to Fragments, and select New.
  2. In the New fragment dialog box, select Metatags as the module that the fragment is based on.
  3. Enter a name for the fragment, and then select OK.
  4. In the fragment hierarchy tree, select the Default metatags child.
  5. In the right pane, under Meta Tags, select Add, and then enter the HTML string that you created earlier for the favicon.
  6. Select Finish editing, and then select Publish to publish the fragment.

Add the metatag fragment to the HTML head section of your pages

To add the metatag fragment to the HTML head section of your pages, follow these steps.

Add A Favicon To Your Site Html

  1. Go to Templates, open the template for the pages that you want to add your favicon to, and then select Edit.
  2. In the template hierarchy tree, select the ellipsis (...) button to the right of the HTML head container, and then select Add fragment.
  3. In the Select fragment dialog box, select the metatag fragment that you created earlier, and then select OK.
  4. Select Finish editing, and then select Publish to publish the template.

Note

If your site uses more than one template, you must add the metatags fragment to all of them.

When you preview pages that are based on the template that you added the metatags fragment to, you should now see the favicon on the browser tab.

How To Add A Favicon To Your Website Html

Additional resources