Blog

Change your Website Favicon, Please!

I have to admit that one of my biggest pet peeves when visiting a website is seeing a default favicon image in the top title of the page, whether it be from your website hosting company or the theme logo.  If you don’t know what a favicon is check out this screenshot:

I don’t really know why that bothers me so much. Perhaps it’s because I feel it is in an important piece of keeping consistent branding on your site.

Most of the time it is fairly easy to change out your favicon image.  You can even just changeout the favicon.ico file in the file directory of your site through FTP.

Did that last sentence just sound Greek to you?  If so read on – there are other ways.

Most modern WordPress themes include an area to upload your favicon image into the admin theme option settings.  If not, there are  free plugins that can help.  The All in one Favicon is my favorite because you can upload a frontend, backend and an iPhone icon.  Yes that is right if someone chooses to save your website shortcut to their iPhone you can control the icon that appears.  Here is how you save a website to your iPhone. (a little tangent for amoment)

  1. Go to the website you like in Safari
  2. Click the Go To button on the bottom of the screen
  3. Then select Add to Home Screen.

    Here is what my logo looks like on my iPhone

Some tips for creating your favicons:

Sizing:

  • Website favicon = 16×16 pixels
  • iPhone favicon = 57X57 pixels

File format:

  • Website icon usually is saved as .ico (ex. favicon.ico) and can be uploaded directly into your file directory through FTP or in the admin area of WordPress using the plugin mentioned above or through theme settings
  • All in One Favicon plugin also allows a .png (which is nice if you want a transparent background) and even an animated .gif – yes that is right you can make your logo move (but please don’t overdo it with the movement – you could scare people away)
  • iPhone logo can be a .png, .jpg, or.gif

How to create this tiny favicon?

  • Carefully!  Remember that this image can be very difficult to see because of its small size so you want to crop your logo carefully.  Most of the time you do not want to include words in your favicon image because it will be unreadable (a couple letters is fine). Crop the most recognizable part of your logo.  Here are some good examples:



Where to create your favicon?

  • Your favorite image editor on your computer
  • Online image editor (www.picmonkey.com is my new favorite)
  • Or Google “favicon generator” and you will find several options, but it is probably best that you crop your logo into a square before using one of these generators.

Let me know if you have any questions or need some help creating your own favicon!

 

Ann Marie on EmailAnn Marie on FacebookAnn Marie on InstagramAnn Marie on LinkedinAnn Marie on Pinterest
Ann Marie
Ann Marie is a genius at making technology simple. Since 2001, she has run the web design and online marketing company, Cascade Valley Designs just outside of Seattle. She specializes in building, customizing and maintaining WordPress websites. If you are a DIYer, she can help you avoid a catastrophe with her DIY Wordpress training program (coming soon) and monthly Website Freedom Plan.

2 Comments

  1. Bob Hambly

    Ann Marie,
    One of my biggest pet peeves when visiting a website is having giant SOCIAL MEDIA LINK ICONS BLOCKING MY VIEW, and CHASING ME WHERE EVER I GO.

    The icons block off the content, appear all the time, you can’t get away from them, and they even get in the way when you are trying to leave a comment as I am doing right now.

    They are completely redundant (these irritating icons are blocking my view, and you have another set right in the title of the blog if I want to use them.)

    You have a great site with lots of great content. But I have to expand the page to full screen, or your social media links BLOCK my seeing YOUR CONTENT.

    Try viewing your site at 1/2 screen (windows key & left arrow) and you will see what I mean. I always have 5 to 10 windows open, and almost never work in full screen.
    I just checked out this blog post on my tablet and the social media icons are not there. (We are running Win 10 with IE 11 at Print and Post. Come down and see what I am experiencing if you like.

    Keep up the good work, and thanks for asking for feedback

    Bob Hambly 203 907 5017

    1. Ann Marie

      Thanks for stopping by Bob. I understand about the social links being right in your face on a site. I don’t like that either. That is why the social icons are lightly colored and I was very careful not to put them in the way I the header. I think what you found was the menu was dropping down in the header when the screen was shrunk. I didn’t optimize for the screen size you mention because it is rarely used. However I thank you for calling my attention to that detail I missed. Try again – should be fixed. Most people do not realize all the minute details that go into making sure certain features, especially header info, work on all sizes of devices. That is why it is very important to create sites in responsive themes these days – however small tweaks (surgery) still needs to be made and that is when special CSS media coding comes in.

Leave a Comment

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

Pin It on Pinterest