Rx, WEB DEVELOPMENT

[Rx] Create a Favicon for WordPress

A favicon for a website is an icon that shows up on the webpage tabs and bookmarks. Here’s an example:   2015-08-24_143408 Look familiar? Previously for another site, I put my own favicon in the root directory and, by magic, it just worked. For some WordPress sites, it’s a little more complicated.

Ingredients

  • Image (PNG, JPG, BMP, ICO)  – I’ll assume that you already have a small image.
  • WordPress –  You probably guessed you might need this because of the title.   

Instructions

  1. Create .ICO file. If your small image (PNG, JPG, or BMP) isn’t already an .ico,  go to:  http://icoconvert.com/   For the icon format, choose Favicon.
  2. Upload .ICO file. Fire up WordPress . Go to Media  Add New and then drag the myicon.ico  in to the Drop files here .

    myicon.ico should be in the  Media Library . Click on myicon.ico  and look for the URL address for the favicon listed on the right. You’ll need the URL address in the next part. Copy and paste it somewhere or go Old School and write it down on paper.

  3. Add Favicon Code to Theme. You’re going to need to edit header.php  The problem is that every time the theme is updated, you’re going to have to edit the header file again. An option to this would be to use a Child Theme. In my particular case, the child theme exists, but doesn’t contain header.php To take care of this for my child theme, I just copied the header file from the parent folder directly into the child folder.

    Go to Appearance in the WP Dashboard and select Editor .
    To the right, make sure you have the right theme selected and click on Header 
    On the last line between <head> and </head> , add:

    <<link rel="shortcut icon" type="image/x-icon" href="http://www.mysite.com/myWPdirectory/wp-content/uploads/2015/08/myicon.ico">

    The http address is the URL that you got from the media library file.

    Don’t forget to save your changes.
    2015-08-24_165506

  4. Verify Icon. Open your WP site. It should now have the favicon. YIPEE!    End_Sign.12