Topics

  • WordPress Version iv.three or subsequently
  • Creating a Favicon
  • Installing a Favicon in WordPress
  • How to create a favicon with a transparent background
  • Advantages of using .ico over .png or .gif

A favicon (curt for "favorite icon") is an icon associated with a particular website or web page. It is generally intended to be used when you lot bookmark a spider web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help place a website visually. Favicons are also used every bit application icons on mobile devices.

A favicon is typically a graphic xvi x sixteen pixels square, and is saved as favicon.ico in the root directory of your server. Yous tin utilize a favicon with any WordPress site on a web server that allows access to the root directories.

WordPress Version 4.3 or later

WordPress Version 4.three implemented a Site Icon feature that enables favicons on your web site.

When you use the Site Icon feature, y'all don't need to prepare the favicon.ico file by yourself, or modify your template file. All y'all have to do is navigate to the Customize screen and specify a square image that has a height and width of at least 512 px.

Later paragraphs in this article contain instructions for manually setting up your own favicon. However, it is highly recommended that you use the Site Icon feature (a feature that is congenital-in to WordPress) instead.

Follow the steps below to utilize Site Icon to set a favicon for your site.

  1. Prepare the image file. (It must be foursquare, having a top and width of at least 512 px.)
  2. Navigate to Administration Screen > Appearance > Customize
  3. Click Site Identity
  4. Click Select Image (located under the Site Icon subheading).
  5. Click on the Upload Files tab, and so click Select Files to upload the paradigm file that you prepared in the previous stride.
customizer-siteicon

Top ↑

Creating a Favicon

A favicon can exist created past using whatsoever graphics/image editing software that allows the saving of .ico files. There are besides online services that will allow you lot to create a favicon for complimentary.

The paradigm should be clear and visually highly-seasoned. Ideally it should exist designed to match your site's brand image and/or content.

To set up the image to be saved equally favicon.ico:

  1. Make the paradigm foursquare by cropping or adding space effectually it.
  2. Resize the image to 16 x 16 pixels.
  3. Relieve the file every bit favicon.ico.

If you're using an online service to create your favicon (such as Faviconer.com or Dynamic Drive) follow the instructions provided by the site, and and then download the favicon.ico image to your computer.

Elevation ↑

Installing a Favicon in WordPress

If your theme or your WordPress version does not support the Site Icon option described above, you can use this method to manually add a Favicon.

If there is already an former favicon.ico file in your electric current theme's primary folder, delete it using an FTP Customer.

  1. Employ an FTP Client to upload the new favicon.ico file into your current theme's main binder.
  2. Upload another re-create of your favicon.ico file to the main directory of your site (ex. http://example.com/favicon.ico). This will display the favicon in your subscribers' feed readers.

In club for your favicon to show upwardly in some older browsers, you will demand to edit your folio header. (Think, the best way to edit your theme'south files is via a Kid Theme. As you lot follow along with the following instructions, information technology is highly recommended that you lot create and modify the copy of header.php that is located in your child theme.)

  1. Go to your WordPress Administration Screen.
  2. Click on Appearance.
  3. Click on Theme Editor.
  4. Select the file called Header or header.php to edit the file.
  5. Search for the line of lawmaking that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite information technology, if it exists, or add the following lawmaking below the HTML tag:
                  <link rel="shortcut icon" href="<?php repeat get_stylesheet_directory_uri(); ?>/favicon.ico" />

Save the changes.

Top ↑

How to create a favicon with a transparent background

Before implementing this method, please make certain that your source image already has a transparent background, which ways it should be a GIF or a PNG. The residuum of the steps are as mentioned above. The i difference in the lawmaking is that, instead of using a favicon.ico file, utilise favicon.png or favicon.gif instead.

Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add together the following code below the HTML tag:

                  <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

To see your new favicon, clear your browser'southward cache. Y'all may need to restart your browser in order to see the new favicon.

Top ↑

Advantages of using .ico over .png or .gif

  1. Compatibility – Equally of this writing, most modern browsers–except for iOS Safari and Opera Mini–support the .ico format.
  2. Avoid 404 server errors – Virtually all modern browsers will request a favicon.ico, then it's best to ever have a favicon.ico file, to avoid a "404 not found" error.
  3. An .ico file can agree more than one icon, so there is no demand to include multiple files for 16×16 and 48×48 icons.