How to Add Favicon to WordPress Site 2013 HD
Articles Blog

How to Add Favicon to WordPress Site 2013 HD

August 9, 2019


Craig here and in this video I’m going to be covering favicon’s now if you’re not sure what they are there the small images that appear in the tabs of my browser now by default a wordpress website is going to display a blank favicon so in this video I’m going to show you a simple easy method for adding a favicon to your wordpress self hosted website okay so this is just my test blog and I want to install a favicon now before i show you that I want to point out that some themes do have the options to install fav icons now the theme I currently have on here is called catch themes and under the design settings there is an option to upload a favicon so it’s very straight
forward with this theme but perhaps you have a theme that doesn’t
support this and if that’s the case i’m gonna show
you how to do it so the first thing that were going to do is install a plugin so under plugins add new and search and just enter in favicon and hit search plugins now is going to return a whole bunch of
different plugins i’m pretty sure most of them will work
but it’s up to you perhaps try a different one you may like it better i’m gonna show you what i like to use an
it’s further down on this page and called favicon rotator and i’m going to click install now okay and then once the plugin has been activated were going to go down to appearance and then favicon so on this page we have two options browser icon and touchscreen or
touch icon the touch one is for smart phones tablets
etc and the browser is for desktops and laptops so that when you using a desktop browser like firefox chrome internet explorer this is where we would set the favicon for our browser so i’m gonna show you how to do this but I’m also going to show you something you may not be aware of so if you’re still watching hang on a minute you may learn something so i’m going to click on add icon i haven’t got an image for a fav icon because these are actually sixteen
pixels by sixteen pixels in size but i’m gonna show you how you can use this plugin and how you can use pretty much any image you want so I can select an image or drag one over but to save time and I’m going to head over to
my media library so i have a bunch of test images here and lets just say i wanted to go with this one here untitled 4 so i’m going to click on show and this the demensions of this image are 980 by 330 now thats huge however if i wanted to I could just hit add browser icon it’s automatically going to work and I can hit save changes and now when i go resh my about us page you’ll see that we know have the image there its hard to see because you know
your favicon because it’s a small image but what i want to show you now is something else so i’m going to delete that and then click on add icon and will go back to our media library and let’s say we want to use this one
out so i’m gonna click show well maybe i would like to use a certain section of this image i’m going to click edit image and this is the full size of the actual
image so i said i wanted to just use this head part right here the aspect ratio i want to make this
square so the aspect ratio were going to make this one and one and that will automatically make it square yes that’s fine like that actually let’s make a little bit smaller and now we go to hit safe oh no sorry first we have to hit the crop
button and we’re going to hit save and now basically we’re go to add browser icon and
it’s going to use that cropped square image so i’m going to refresh the page it’s refreshing wait I didn’t press save changes and we’re going to come back and hit
about us again so that is one other little trick and
now i want to quickly show you touch icon now this is a little bit different
because you can’t only use PNG images now i’m going to click on set icon i know i have a couple of PNG images in my media library so I’ll go to my media library and I have four png images so i have a blue arrow and
we’re going to go with this will click show this is uh… one twenty eight by one
twenty eight but again it doesn’t matter about the size because it will be
automatically resized and now all i have to do is click on set
touch icon and were going to click save changes and that’s it so now when i’m on my iphone and visit my website and i want to send this page to my
desktop is going to use this blue arrow as my icon so if you have any questions or comments
feel free to post them below and check out my channel and subscribe to find more how-to tutorial videos

Only registered users can comment.

  1. Hey Craig. Thanks for this easy tutorial. I was wondering if this plug in will allow the favicon to be visible on all web browswers. I had a html code posted in my header for my favicon but it wasn't displaying on IE. After following your tutorial, it still isn't. Any tips for a quick fix? I'm definitely not an expert! Thanks!

  2. Hi, I don't have IE installed on my computer but have spent some time trying to get it to work on my daughters laptop with no luck. I'm going to look into this tomorrow and will find the fix that works and then reply.

  3. great video Craig, thanks to you I'm loving my new favicon and it only took me couple of minutes! I really appreciate all your videos; you make life so much easier 🙂

  4. Hey Craig, wanted to say thank you, I followed your video and now my new website has an awesome looking favicon, thanks dude!

  5. Craig, you are awesome. Huge thanks for the video. It solved my never ending problems with the favicon in seconds. Really appreciate your work here. You made my day.

  6. Thanks for comment.
    I just watched one of your videos "General Lee R/C Car Jumps 5" liked/subed.
    You must break lots of parts doing them jumps.

  7. That's really cool Craig, thanks dude! As far as breaking stuff…I would think the same thing watching one of my vids, but over the course of 5 videos….I've only replaced the body once and broke one minor chassis piece. My attempt to bring this comment full circle is, it's just like your videos, when you do your homework and have a plan, stuff just works, and can even work well 😉 Take care Craig.

  8. I hope you can help me, I am trying to get the favicon for my website to display on my youtube banner such as yours, but I am unable to do so! How did you get you favicon to display on your youtube banner?

  9. VERY HELPFUL!!! I have been trying to do this for hours and was left confused with all other tutorials. THANK YOU!!

  10. Same problem here. There is no "Plug-In" option under appearance. Maybe they changed it since this video has been uploaded? This whole favicon has literally crushed 2 days of my life

  11. Great video! I was trying to figure out how to add one! Loved that I can use any image size and it'll resize it for me! Thanks!

  12. If you can't see any plugin option is because you're using a wordpress(dot)com free site, I personally haven't used one of the free versions, but I'm aware now that you can't install plugin or run any kind of ads. I use self hosted version of wordpress, if you'd like to try a free self hosted version head over to the link I've just added to the video description wainvite(dot)com.

  13. Thank you, i wished i saw your video first b4 i had 2 go to websites and generate codes, download plugins and go to my cpanel blah blah and all the time i have a favicon plugin already available from my theme. very easy 123.

  14. Hi great video.  I followed it exactly and it still didn't work for me.  Does it matter what version of wordpress you are using?

  15. My theme has a favicon set up in place no need. Not to sure though since I have not tried it yet. Hey Craig

  16. thank you very much. I try to my website http://miracles-bd.com as your tutorial. it's work smoothly. thanks again.

  17. did everything the same way, plugin is installed, still showing the square favicon even though I removed it… tried 3 browsers any thoughts?

  18. I think there's something slightly misleading in your tutorial. The most common and most supported graphic format for favicon is .ico – I guess your plugin is doing a conversation when it's uploaded? Same thing with smallscreens, seems like your plugin needs a png file to convert it into a proper format for those devices. Am I right or have I missed out on something here? I know that png and even gif CAN work as a favicon on desktop devices but its kinda pointless cause its not widely supported. I'm not an expert on new standards cause in terms of touch devices or smallscreens they seem to change ever so often, so "standard" is not applicable. Multiple sizes to cater to different resolutions by using different img files etc. Wish they could implement support for SVG or something, or perhaps even @fontface for vector icons. Anyways, I appreciate your tip for a WP plugin that handles these matters Craig. Very cool. I'm getting quite fond of WP:)

  19. can you give a further explanation of the mobile touch icon?  Is this an icon that appears on your mobile phone?  How do you get it there?

  20. Dear Mr Craig Smith,

    Thank you for you help, Could you please tell me wich social media plugins are you using in this website, And about google search do you know how to make our website in the first page of search, thank you for your concering and help. 

    Happy New year,
    RGS,

Leave a Reply

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