What is a Favicon and how do I update it?

What is a Favicon?

Letting people know what site they are on and giving the user a bit of extra eye-candy is essentially why Favicons exist.  That’s probably not the official definition, but that’s the truth.

I’m sure you’ve visited a website before and seen the little icon appear in the tab of your browser = that’s a Favicon.

Here is a screenshot of my Chrome browser tabs right now

Some of these might look familiar to you, some might be new.  Starting from left to right:

  • My Gmail (pinned)
  • Brightwater (a new Dynamik skin I’m working on) (pinned)
  • A Wikipedia article I was just reading (pinned)
  • I had to create an invoice in PayPal
  • Of course the biggest time-suck on the Internet, Reddit

That’s why favicons are great, I get to know exactly where my Gmail is all the time by that little red envelope.

Adding a favicon to your site is simple, keep reading.

 


 

How do I update a Favicon?

Using Dynamik Website Builder, it’s easy to update the Favicon on your site.  All you’ve gotta do is follow these 3 steps…

STEP ONE: Create a transparent image in Photoshop that is 32 X 32, like this

STEP TWO: Save your image and name it favicon.png (this is super-duper important)

STEP THREE: Upload it to Genesis > Dynamik Design > Images

upload-a-favicon

That’s all!  It magically shows up in the browser tab, like this:

new-favicon

 


 

What if I suck at Photoshop?

Then get better at Photoshop.  🙂

Actually there are places where you can download Favicons to use on your site, here are a few resources (of course you can always use any favicon from the designs on BestDynamikSkins.com):

  • Favicon.cc – you can create and download a favicon online and even see favicons that other people have created
  • Favicon-Generator.com – this will do the resizing for you (note it will give you a .ico file, that will work too just name it ‘favicon.ico’)
  • Favicon.co.uk – There are 56 pages of favicons that you can get inspired by