LOADING

How to create a Favicon

A favicon can be created using any graphics editing software that allows the saving of .ico files.favicon

The image should be clear and designed to match your site’s content.

To prepare the image to be saved as a favicon:

  1. Make your image square.
  2. Resize the image to 16 by 16 pixels.
  3. Save the file as an.ico.

Installing a Favicon in WordPress

In order for your favicon to show up in older browsers, you will need to edit your page header.

  1. Go to your WordPress Administration Screen.
  2. Click on Appearance.
  3. Click on Theme Editor.
  4. Select the file called header.php.
  5. Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />.
  6. Overwrite it or add the following code below the <head> HTML tag.
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
  7. Save your changes.

How to create a transparent background

The option requires a GIF or a PNG file. One difference in the code is instead of .ico use .png or .gif.

  1. 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 the following code below the <head> HTML tag.
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

You may need to restart your browser.

Advantages of using .ico over .png or .gif

  1. Compatibility – All browsers support .ico format.
  2. Avoid 404 server errors – All modern browsers will always request a .ico so it’s best to always have a .ico file, to avoid an error.
  3. An .ico file can hold more than one icon.

Learn more at www.w-p.tips

Tags:
Social Shares

Related Articles

Leave a Comment

Your email address will not be published. Required fields are marked *