• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings
Home » WordPress » Create or Change a Favicon in WordPress

Create or Change a Favicon in WordPress

By Ehi Kioya 5 Comments

A favicon (favorites icon) is a small image (usually a 16 x 16 icon) that sits besides the title of your webpage as shown in a browser tab. Favicons are a must for any proper and complete website because they are used by browsers in lots of places (like tabs and bookmarks) and they help your returning users to easily identify your website visually.

The use of favicons has become a part of business branding.

Here’s how to get your’s:

  1. Create a unique 16 x 16 image that represents your site.
  2. Save this image as an icon (extension is .ico).

    You can use any graphic editing tool that allows saving images in .ico format. Last time I tried, PhotoShop does not allow this. You may want to check out GIMP instead.

    As an alternative to using GIMP or other graphic editing tools, you may simply save your image as a JPEG and and use one of the popular free online services for converting JPEGs to ICOs. I’ve tried this one. It’s pretty good.

  3. Make sure you name this file favicon.ico
  4. Using FTP, save the favicon.ico file in your themes main folder. Delete or?overwrite?any existing file with the same name.
  5. Using FTP, save another copy of the favicon.ico file in the root directory of your site. Delete or overwrite any existing file with the same name.
  6. Modify the header.php file within your current theme.?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?html head tag:

    <link rel="shortcut icon" href="<l?php bloginfo('stylesheet_directory');??>/favicon.ico" />

    This is required in order for the favicon to show up in some older browsers.

Refresh or restart your browser. Your favicon should now be displayed!

Note: Although you are also allowed to use transparent images in either .gif or .png formats, .ico format is preferred because it is compatible across all browsers and therefore prevents 404 errors that could occur on old browsers when attempting to retrieve a .png or .gif favicon.

Found this article valuable? Want to show your appreciation? Here are some options:

  1. Spread the word! Use these buttons to share this link on your favorite social media sites.
  2. Help me share this on . . .

    • Facebook
    • Twitter
    • LinkedIn
    • Reddit
    • Tumblr
    • Pinterest
    • Pocket
    • Telegram
    • WhatsApp
    • Skype
  3. Sign up to join my audience and receive email notifications when I publish new content.
  4. Contribute by adding a comment using the comments section below.
  5. Follow me on Twitter, LinkedIn, and Facebook.

Related

Filed Under: News, WordPress Tagged With: Favicon, WordPress

About Ehi Kioya

I am a Toronto-based Software Engineer. I run this website as part hobby and part business.

To share your thoughts or get help with any of my posts, please drop a comment at the appropriate link.

You can contact me using the form on this page. I'm also on Twitter, LinkedIn, and Facebook.

Reader Interactions

Comments

  1. Chinoms says

    February 25, 2013 at 12:34 pm

    I tried it, but it didn’t work for me. Perhaps I got something wrong somewhere.

    Reply
  2. Chinomnso Ugwuanya says

    February 25, 2013 at 2:18 pm

    It worked! Thanks.

    Reply
    • Ehi Kioya says

      February 26, 2013 at 7:00 pm

      Hey Chinomnso. Good to know it worked for you. I can see your footprints on the moon 🙂

      Reply
  3. Philippe says

    July 11, 2014 at 4:41 am

    RealFaviconGenerator and its WordPress plugin (http://wordpress.org/plugins/favicon-by-realfavicongenerator/) do just that on auto-pilot. And more: it generates all icons you need to support classic desktop browsers, iOS, Android and Windows 8.

    Reply
    • Ehi Kioya says

      July 11, 2014 at 4:52 am

      Thanks for the info Philippe.

      I never tried that plugin before but I notice it does have positive reviews on the WordPress plugin repository. I’ll have a look someday.

      Reply

Leave a Reply Cancel reply

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

Primary Sidebar

23,736
Followers
Follow
30,000
Connections
Connect
14,568
Page Fans
Like
  • Recently   Popular   Posts   &   Pages
  • Actual Size Online Ruler Actual Size Online Ruler
    I created this page to measure your screen resolution and produce an online ruler of actual size. It's powered with JavaScript and HTML5.
  • WordPress Password Hash Generator WordPress Password Hash Generator
    With this WordPress Password Hash Generator, you can convert a password to its hash, and then set a new password directly in the database.
  • How To Change A SharePoint List Or Library URL How To Change A SharePoint List Or Library URL
    All versions of the SharePoint user interface provide an option to change the title (or display name) of a list or library. Changing SharePoint library URL (or internal name), however, is not exactly very intuitive. We will discuss the process in this article.
  • About
  • Contact

© 2022   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy