wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Add Or Change Favicon WordPress

Tutorials

Add Or Change Favicon WordPress

Last updated on February 18, 2017
Posted on May 25, 2010

How to add a favicon wordpress without plugins or how to change favicon.ico in wordpress if you already have one built in your theme.

Have you ever wondered how to have a small icon or small image in your browser if you open a wordpress blog? That’s called favicon wordpress, it’s like a branding of your site.

Most websites nowadays have this favicon, either html static websites and even wordpress blogs.

In the video we will create a favicon wordpress with GIMP (free source image editing program), upload it and then adding php code to a static html code in our header.php.

If you just want to change your favicon, you don’t need to follow this step, just look where the old favicon, and replace it with the new one.

As usual, backing up a theme is a really nice idea.

favicon wordpress
This blog's favicon.

These are the steps to create favicon wordpress.

skip to the video if you’ve already one.

1. Create a new file in GIMP, size= 16×16 px (pixel)

2. Save the file as favicon.ico

3. Upload the file to /images folder or /img depends on where you have your images are stored in your theme file (wp-content/themes/yourthemes)

4. Add favicon html static code to header.php:

<link REL="SHORTCUT ICON" HREF="http://www.yoursite.com/images/favicon.ico"/>

And then replace this code with wordpress codex, here is the php code:

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

Video Tutorial:


  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Note:

1.If you save favicon.ico, favicon wordpress in different folder, then replace “images” folder with your folder name.

2. If you just change your favicon, then don’t add anything in your header.php file. Just overwrite the old favicon.ico to the new one, it should work fine.

Favicon wordpress is not showing?

So, that’s it. If you are using firefox, the favicon may not appear immediately, clean up your cache and it will show up sooner or later. I notice other browsers display it faster, so you might want to check it in other browser too, in case you can’t wait

3. Want to have flexible theme which enable you upload favicon wordpress from your dashboard? check out Thesis features.

add favicon how Video Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How To Fix Or W3C Validate WordPress
→ “Back to Top” Button WordPress

Comments

  1. Harsh Agrawal says

    May 30, 2010 at 6:59 pm

    Kimi this is useful..Usually what I do is upload the favicon at the root of WordPress installation and that does everything.

    • Kimi says

      May 30, 2010 at 7:07 pm

      Hey Harsh 🙂
      I agree with you, that can be done that way, but it will only work if your theme file already have the code. I notice some themes came with already built-in favicon, however still many people don’t have favicon in their sites 😀

  2. Pham-Pham says

    July 8, 2010 at 4:53 pm

    Great tutorial, as always ! By the way, I found a free website that converts any image format to icon format : http://iconverticons.com/ So if you are working in Adobe Illustrator or Photoshop, you can save your document as 16×16 .PNG and then use the mentioned website to convert to .ICO.

    • Kimi says

      July 9, 2010 at 7:51 am

      @Pham-Pham, Yes, there are lots of favicon generator out there, and they are mostly free.

      Thanks for the quick link.

  3. Louis Marshall says

    November 12, 2010 at 11:25 am

    Favicons are essential in a modern blog design because this could be the key fac tors in making your blog/sites standout from the crowd.This is much pretty good idea.

    • Kimi says

      November 14, 2010 at 6:00 am

      I agree with you, however we should compress favicon before we upload it.

      When i measure my loading speed with Yslow, the most of the time it needs a while to detect my old favicon, that’s why i changed mine to have a smaller size.

      Thanks for commenting Louis:)

  4. Francisco says

    August 2, 2011 at 6:48 pm

    I used this video to help me out with the icon part, but it was long! It is good education though I am thankful for her to make this video because now I know about Notepad++ instead of just using regular notepad like I was doing. hehe

  5. bhengstr says

    August 16, 2011 at 7:20 pm

    thanks for this!
    i’m using a child theme, for twentyten, the video made all the difference!
    my head ached as i read instructions but the video worked wonders!
    KUDOS!
    keep up the good work!

  6. Zac Aldridge says

    October 1, 2011 at 3:25 pm

    Favicon works on all my pages and I i suggest you should get a favicon into your site too. I’m enjoying most of my time with my blogs because of favicon.Thanks!

  7. 2-Xite says

    February 8, 2012 at 1:39 pm

    Many compliments!
    This one only worked for me, also thanks to the video.

    Thanks and keep good work,
    Greets,

    2-Xite

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept