What is a Favicon and how do I implement one?

So what is a Favicon?

Examples of Favicon

The above screenshot shows the browser tab bar in Apple Safari. The little icon to the left of the website name is the Favicon. These little icons help users quickly spot your website amoungst all their open browser tabs.

Favicon are also used in the books marks that you can save of your frequently used sites.

How do you create a Favicon?

A few years back when these first came out it was a simple job of creating a PNG file which was 128 x 128 and changing the extension to .ICO. Now it’s much more complex, but the good news is there are tools to help you handle this compexity.

Favicon Template File

You can right click and save the PNG below. This is a useful template file for a Favicon. It’s 512×512 and was what I used to design the Favicons for this site.

Favicon template file
Downloadable Favicon Template File.

Once you have edited the Favicon template file so that it represents your website or brand you can use it to generate icons of all the various sizes needed for different platforms and devices.

You can do this manually but there’s a great website I use these days called https://realfavicongenerator.net you upload your edited Favicon template and use the generate option. This will then give you a zip file containing all the different versions of your icon and the HTML code you need to install.

You can unzip the file on your computer and copy the icon files into the root directory of your website.

You then need to add the HTML code that Realfavicongenerator generates for you before the </head> line in your HTML.

Don’t Make Me Think: A Common Sense Approach to Web Usability – new edition published.

Don’t Make Me Think: A Common Sense Approach to Web Usability – new edition published.

By Steve Krug published by New Riders

I bought this book when it first came out in 2000, since then, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug’s guide to help them understand the principles of intuitive navigation and information design.
On the back of the book the publisher says “Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject. Now Steve returns with fresh perspective to reexamine the principles that made Don’t Make Me Think a classic–with updated examples and a new chapter on mobile usability. And it’s still short, profusely illustrated…and best of all–fun to read. If you’ve read it before, you’ll rediscover what made Don’t Make Me Think so essential to Web designers and developers around the world. If you’ve never read it, you’ll see why so many people have said it should be required reading for anyone working on Web sites.
STEVE KRUG managed to labor happily in near-total obscurity as a highly respected usability consultant until the publication of the first edition of Don” t Make Me Think. Ten years later, he finally gathered enough energy to write another book: the usability testing handbook Rocket Surgery Made Easy: The Do-ItYourself Guide to Finding and Fixing Usability Problems. The books were based on the 2o+ years he’s spent as a usability consultant for a wide variety of clients like Apple, Bloomberg.com, I.exus.com, NPR, the International Monetary Fund, and many others. His consulting firm, Advanced  Common Sense, is based in Chestnut Hill, MA. Steve currently spends most of his time teaching usability workshops, consulting, and watching black-and-white movies from the ‘3os and ‘4os.  “
I haven’t had a chance to look at the new edition yet but on the basis that the original became a classic I would highly recommend this for any web developers, mobile app developers or others involved in User Experience design (UX).

Click here to view this on Amazon.co.uk
Price: £18.19

How to insert a table / row into a WordPress page.

How to insert a table / row into a WordPress page.

Wordpress missing insert table row editor function

 

These days we try to avoid using HTML tables for layout purposes but there are times when a table is absolutely the right answer, for example when laying out a set of data points, pricing information or other structured data.  Yesterday I was helping my son with a blog post using WordPress and told him to insert a table only to find that by default these days the WordPress editor doesn’t actually have an Insert > Table or Insert > Table > Row function. We were in a hurry at the time and we needed to get the job done so I just popped into the HTML view and entered the code. I’m happy to do this as I’ve been writing HTML and the like since the dawn of time… but it’s not acceptable or a great experience for people starting out or those who just don’t want to get into that detail.

Wordpress editor without insert table

This picture shows the default WordPress editor without an Insert Table button

Today I’ve had a bit more time to research this and I’ve found that the WordPress Insert Table and WordPress Insert Table Row editor functions can easily be added back via a very popular plugin.

Wordpress Table Editor Plugin

This graphic shows how to locate the WordPress Table Editor plugin.

 

To add the WordPress Table editor function, click on Plugin’s on the left hand navigation menu. Then in the keyword search box in the top right enter “MCE Table Buttons”.  You should then see a plugin called “MCE Table Buttons” (shown here top right). As you can see it’s very popular with over 100,000 active installations.  Just click the Install Now button and then activate the plugin.

Wordpress Editor with Insert Table function enabled.

This graphic shows the WordPress editor after we have enabled the Table Editor functions that allow you to add tables, columns and rows to your HTML tables in WordPress.

Once you have installed the MCE Table Buttons plugin you will then find the missing Table Editor button in the WordPress Editor.

If you have any questions about HTML tables or using the Table Function in the WordPress Editor just leave a question in a comment below and I’ll try and get straight back to you.

Teach yourself to code (or teach your kids to code).

Teach yourself to code (or teach your kids to code).

From time to time I share interesting infographics that I spot on social media. I spotted this one earlier and though it was quite good. I’d certainly endorse the idea of learning Python, Javascript, Ruby and Java. I’d also recommend trying Scratch if you are brand new to development. It’s aimed at kids in primary school but I’ve used in to train staff in the basics of algorithms and software development in the workplace.  You might also want to look at Swift on the Apple devices and .Net C# on Windows, both have free development environments to get you started.

teach yourself coding info-graphic

 

If you are interested in how to get started in software development or have any suggestions do get in touch or leave a comment below. I’ll write some follow-up blogs if there is any demand for articles on this subject.

Help Elsa and Anna inspire the next generation of IT professionals.

Help Elsa and Anna inspire the next generation of IT professionals.

Learn to code with Elsa and Anna from Frozen

If you work in IT in the UK you will know how hard it is to recruit good junior IT staff. The schools and universities were switching youngsters off to IT until very recently.

I was therefore very pleased to receive a press release from the Government Education Department promoting the new Hour of Code and the uk.code.org website.

If you’ve got school aged children the site is a great way to get them into coding BUT perhaps more importantly it’s a great way for parents to learn a little bit of coding so that they can help their children.

I think it’s a really great tool for anyone who wants to learn a little bit about software / application development. I’m often asked what people can do to get into IT and I’d say studying this site would be a great stepping stone in that direction.  From this you should then be able to get into basic app creation or web site development.  Certainly enough to put together a small portfolio to show agencies and future employers…. IT is still any industry where ability and experience count for more than formal qualifications.

I loved the simple Elsa development studio, which reminded me of LOGO back in the 1980’s but brought right up to date with characters from Frozen.  My children who are technically still too young for this were immediately captivated by being able to move Elsa around the screen with some simple instructions…. little did they know they’d written their first lines of code.

I’ve pasted in some text from the official government press release below because I think it’s useful.

Secretary of State Nicky Morgan is asking parents to consider trying Coding for the first time in 2016 having recently taken her own first coding lesson.

Coding for many will seem a far removed and unnecessary skill to learn in later life but the reality is the more parents can support the skills their children are learning in the classroom the more likely we are to ensure a generation of digital natives progress into adulthood.

Getting an introduction is easier than you might with the Hour of Code website offering a wide range of introductory tutorials aimed at young and old.

After years of switching children off to computing with boring ICT lessons that just taught them how to use Powerpoint the government has done something to help develop the next generation of IT professionals. The new computing curriculum, introduced in the UK during September 2014, has a greater focus on how computers work. Transform children from passive users to active creators of technology, it includes teaching children how to code and create their own programmes.

Demand for high-level skills in computing is set to grow, with the UK’s long-term economic future dependent on high-level technology skills.

The Government has a vision for a secure cyberspace, contributing to economic prosperity, national security and a strong society. That’s why the government is encouraging a new generation of pupils with the digital skills and confidence needed to meet this challenge.

I’d encourage you to give this excellent site a go and recommend people who want to understand IT / Computing.

Social Media Image Sizes Cheat Sheet and templates

Social Media Image Sizes Cheat Sheet Infographic

I spotted this really useful Social Media Image Sizes infographic earlier on twitter. It has all the image dimensions and file size restrictions for all the major social media platforms. I thought I’d post it to the blog, if only so I know where to find it when I need it, but I think you’ll find it useful.
Social Media Image Sizes

Facebook

Profile image: 180x180px but note that Facebook will also generate a 32 x 32 version as a thumbnail which will be used throughout Facebook.

Cover Photo: 851 x 315px – if you make it any smaller then it will be scaled to this size. For best results upload an RGB JPG file less than 100kb. Images with a logo or text may be best as a PNG file.

Uploaded / Shared Images: The recommended size is 1,200 x 630 px. These will appear in feed at a max width of 470 px and will scale to this size if you upload a smaller image.

Linked In

Profile Image: 400 x 400px – Recommend between 400×400 and 20,000 x 20,000px with a max file size of 10mb

YouTube

Channel Cover Photo: 2560×1440

There are a lot of different platforms and devices that users can stream YouTube on so it’s important that your brand has a photo optimised for each one.

Display Sizes:

Tab!et displays: 1855 x 423 –

TV display’. 2560 x 1440

Mobile display: 1546 x 423

Desktop: 2560 x 423

(1546 x 423 – pixels are always visible).

Twitter

Header Photo: 1500×500

Profile Photo: 400×400 but is displayed at 200×200

In-Stream Photo: 400×250

 

UPDATE 2018: MakeAWebsitehub.com have been in touch to say that they have published an updated Social Media Image and Video Sizes Guide for 2018.  Click here for the latest version.