Friday, June 28, 2013

Favicon.ico How To Create Your Own Favicons!

What is a Favicon?


A favicon is a tiny bookmark icon that is captured by your browser from a specific file on your website called a favicon.ico which is a16x16 icon. You can usually see it displayed right beside the website address in the URL bar.  However, depending on which type of browser you are using it can be seen a few different ways.  Usually it sits at the top left corner of your browser tab(s).  The favicon is also the icon image (.ico file) that is displayed when you create browser pin tabs and/or bookmark any web page (in your bookmarks folder or toolbar).


Why Have a Favicon.ico On My Website?


A favicon.ico is a great way to help brand your website, and is used specifically for that purpose.  It also helps visitors quickly find your site in future when they’ve bookmarked your webpage and helps your web address (web link) to your web page stand out in their vast see of other bookmarks.


Favicon.ico www.redashes.com

A favicon is a bookmark icon that is capture by your browser to help users visually identify (also brands) your website apart from others.


How Do I Create My Own Favorite Icons = Favicons?


Creating your very own favorite icon is actually quite is easy to do.  Searching for “How to generate a Favicon” in Google will bring up many different websites that offer the tools on how to generate a free favicons directly from your computer.  Most of these auto generating websites out there can produce very poor quality icons, so be sure to try more than just one just to be sure.  At least until you find the one that works best for what you are looking to accomplish in terms of quality.


Personally I like to use www.convertico.com as it is quick and easy to use, and produces high quality .ico files in a variety of different sizes of my choosing.  It also doesn’t have a lot of added options to make it confusing (as some favicon generating sites do), you just upload the file you want to convert as your favicon.ico file, click submit, and download your file in a matter of seconds.  It’s that simple, it’s that quick and yes it’ that easy.


Another added bonus of using www.convertico.com is that it also generates icons that I can utilize as windows desktop icons.


If you are an avid WordPress user you can also download a simple plugin that will automatically create your favicon files for you, as well as have the added ability to create specialty favicon formats necessary for a high quality favicon when people save your website when they use their IPADS and/or other mobile devices. (Part 2 of this article will tap into the more in-depth variety I am currently speaking of).


WordPress users can download this favicon plugin I am referring too by clicking here, it is called the All-In-One-Favicon and works great – I use it for all my WordPress websites.


What Browsers Support Favicons?


Pretty much all modern web browsers out there today (ie: Firefox, Google Chrome, Opera, Safari, Internet Explorer and others) support favicons as a feature. Even mobile browsers support the favicon feature such as iPhones/iPads, Blackberry and Android etc.


favicon.ico generator

Generate your own Favicon


How to Install My Favicon.ico File?


Installing your favicon is fairly simple to do… after you have gone to www.convertico.com and created your own personal favicon.ico file, downloaded it and unzipped it, you need to open your FTP program and navigate to your website root directory (your root directory is where your index file is located) and upload it.


Next you need to open your webpage(s), or your header file and between your <head> and </head> tags enter the following piece of code:


<link rel=”shortcut icon” href=”favicon.ico”>


This tells the browser where your favicon.ico file is located and what to do with it.  If for some reason you don’t see your favicon file right away, you will need to clear out your browser cache files and revisit your website; this will usually correct the issue.


.ico Recap!


A favicon is a bookmark icon that is capture by your browser to help users visually identify (also brands) your website apart from others.  This is especially useful when users have many bookmarks in their browser favorite’s folders.


URL: www.convertico.com:  Easily create your own favicon online.


URL: All-In-One-Plugin: WordPress users download the plugin (All-In-One-Favicon) that will instantly setup your favicon file for you (Download directly from WordPress.org)



Favicon.ico How To Create Your Own Favicons!

Wednesday, June 26, 2013

Lorem Ipsum - A Web Publishers Tool! Part 1

Lorem Ipsum – Say what now?


My clients often ask me… “Why did you put strange Latin text…” on the web design mockup I just sent them?  “Well, Good Question!” I tell them and then I explain that it’s actually a publishing tool that web developers and graphic designers use called Lorem Ipsum.


Lorem Ipsum is used as dummy text (if you will) for filler on a graphic design to visually show where actual content will go eventually in its place – opposed to using “Text Here” or “Content Here” which visually does nothing for the eye.  We all know when first dealing with a new prospective client, you don’t always receive the actual content for a project until a design has been agreed upon.  That’s where Lorem Ipsum comes in handy, because it can be quickly generated to suit any length of text necessary that you may need for any design.


Lorem Ipsum content example generated online www.redashes.com

Bad example of Lorem Ipsum content being used!


Great example of Lorem Ipsum content being used!

Great example of Lorem Ipsum content being used!


Where does Lorem Ipsum come from?


Lorem Ipsum has actually been used as dummy/filler text in the print industry since the 1500s.  Lorem Ipsum may look random, but technically speaking it’s not. My client was on to something when he asked why I wrote “strange Latin” in my mockup and that’s because it has roots in a piece of classical literature written in Latin from around 45 BC.  That would make it 2000+ years old!


Now that’s incredible!


How to Generate Lorem Ipsum text?


There are many Lorem Ipsum generators online that you can find easily if you search the internet. The site I like to use is www.lipsum.com.  On www.lipsum.com you can generate Lorem Ipsum by paragraph, by words, by bytes, or by bullet points/lists. Which is pretty much everything you’ll ever need. However, as an added bonus www.lipsum.com will even allow you to even generate mockups of different Lorem Ipsum banner sizes.  You can choose from 3 different types of colours, ranging in the entire industry standard for banner sizes.  These are perfect for any web project one may have, and generating content this way saves time on your part.  It will also make your design proposals look as they should by visually communicating how a client’s site should look with actual content.  Instead of making your clients guess for themselves where text will be written or banners will be placed.


www.lipsum.com also has quick and easy to use plugins available for a range of other tools.


Download all industry banner sizes from www.lipsum.com.

Lorem Ipsum Banner Black 486×60 Example


Download all industry banner sizes from www.lipsum.com

Lorem Ipsum Banner Grey 486×60 Example


Download all industry banner sizes from www.lipsum.com

Lorem Ipsum Banner White 486×60 Example


Lorem Ipsum Recap!


Utilize the Lorem Ipsum generator as a web tool to quickly place filler text on important graphic design / publishing projects that need to be visually accurate, literary down to a “T”.


URL: www.lipsum.com

(Lorem Ipsum Text Generator, Lorem Ipsum Banner Generator, Lorem Ipsum Browser Plugin / Add-ons)



Lorem Ipsum - A Web Publishers Tool! Part 1

Monday, June 24, 2013

Browser Pin Tabs




Browser Pin Tabs!


I discovered the coolest thing the other day with the new updated versions of Firefox and Chrome. Browser Pin Tabs! It’s amazing how such a little thing makes my day so much better. Being a web developer and continuously having multiple browser tabs open all the time, I have a habit of losing my place from time to time, especially when I have a big project going on and I am doing a lot of back and forth between multiple tabs. Well browser pin tabs have come to save the day.


How Browser Pin Tabs Work?


Easy, all you do is open your browser and create multiple tabs like you would normally do (Unfortunately Internet Explorer does not have this option available, but that comes as no big surprise?). Once you find the pages you want to make permanent tabs of – simply “Right Click” on the tabs, a window will open and then click on the “Pin Tab” option. It will automatically use that websites Favicon (favicon.ico file) to create a little tab icon in the left hand corner of your browser, maintaining its position in front of all your other open tabs. Think about how you can pin and unpin program icons from your desktop computer to your bottom toolbar. It works in the same manner but within your browser. Another way you can think of it is like a specialized bookmark that opens automatically, every time you open your browser.


Why Would You Use Browser Pin Tabs?


The real question is why not? I love this cool little feature because every time I open my browser I always seem to visit the same websites (as do we all) and this makes going to those websites that much quicker. Also not having to type facebook.com twenty times a day in the Google Search bar, just so I can visit my Facebook page? Is definitely something that is going to make my day that much simpler. Know what I mean?


Browser Pin Tabs RedAshes.com

Browser Pin Tabs can be created by using Firefox or Chrome Browsers!


Websites I Have Pinned!


Here are just some of the browser pin tabs I have set for myself on my browser to make my life easier. These are sites I visit easily 10x or more a day. I use both Firefox and Chrome for different reasons, so I set different browser pin tabs for different browsers.


But you can set your browser pin tabs to anything you want. Don’t forget to watch the video I made to see how quickly you can set those browser pin tabs for yourself. Enjoy!



Browser Pin Tabs

Google Doodles

Google Doodles


One of my favorite “cool websites” to go to now and again is Google Doodles. Yes, that’s correct I said “Google Doodles!”  Even the name is awesome; it just rolls off your tongue. I dare you to say it 3 times fast! Google Doodles, Google Doodles, Google Doodles, I love it!


What are Google Doodles?


We’ve all seen Google Doodles and most of us don’t even know it. Google Doodles are found on the Google homepage when you do a search.  They are the design changes made to Google Logos to celebrate holidays, birthdays, anniversaries and/or other special occasions.  Most often than not, they are also created to commemorate the lives of famous people, pioneers, artists, scientists and others,  people who have made an impact or a difference in our lives both past and present.


Google Doodles Webpage


You can actually view all of the Google Doodles ever made since they first began creating them by going to www.google.com/doodles/ .  Google has also setup a Google Doodles Store (I love that word, Google Doodle, lol) where you may purchase your favorite doodles on certain things such as mugs, stamps, tote bags, t-shirts and many more types of different items.  If you are also so inclined you may submit any ideas you have for doodles to Google by emailing them directly at proposals@google.com.  Just remember that their team receives hundreds of requests per day so unless you blow them away with an idea, you probably won’t hear back from them.


Check out the New Google Doodles Store! Enjoy 20% off ALL Doodle Gifts! Use Code: GOOGLEDOODLE


Women's Day as a Google Doodles www.redashes.com

Women’s Day – Google Doodle


Google Doodles Updates


There are a couple of ways you can keep up-to-date with any new Google Doodles that come out. Don’t forget as well that unless you look specifically for any doodles outside of your own country you probably will never see any Google Doodles made for Google Search homepages across other parts of the world. Reason being is that we don’t all celebrate the same holidays / anniversaries / people.  One specific celebration that comes to mind is the Chinese New Year.  Google.cn (CN is for China) is going to have a different doodle than Google.com, which in turn is going to be different from Google.jp (JP is for Japan).


So if you would like to keep up-to-date with all the Google Doodles that come out you can use one or all of these methods listed below…


RSS: http://www.google.com/doodles/doodles.xml

(Using an RSS Reader)


Doodle Tracker: http://www.doodle-tracker.com/en

(By submitting your email and being notified daily of any new doodles)


Twitter: https://twitter.com/doodletrackeren

(Follow Doodle Tracer via Twitter for any new updates)


Who’s Favorite Google Doodle?


The best part of all is that if you like Google Doodles, then you can vote for your favorite! Doodle 4 Google is an annual program that invites artistic students to compete with one another by making them think big and submit their redesigns for a Google homepage for millions of users to see.


This year one talented artist will see their design appear on the Google homepage; they will receive $30,000 scholarship, and will also win a $50,000 technology grant for their school!  Now that is amazing, and you can help choose the winner by visiting http://www.google.com/doodle4google/index.html and cast your vote.


Google Doodle on www.redashes.com - Douglas Adams 61st Birthday

Douglas Adams 61st Birthday – Google Doodle – Click on Image to view animation!


Recap!


URL: www.google.com/doodles

(View all of Google’s modified logos from past to present)


URL: http://www.zazzle.com/googledoodles

(The Google Doodles Store / Gift Shop – Use Code: GOOGLEDOODLE for 20% OFF any purchase!)


URL: http://www.doodle-tracker.com/en

(Stay up-to-date with the latest Doodles from Google)


URL: http://www.google.com/doodles/doodles.xml

(RSS Feed to stay up-to-date with the latest Doodles from Google)


URL: https://twitter.com/doodletrackeren

(@doodletraceren will keep you up-to-date via twitter for any new Doodles)


URL: http://www.google.com/doodle4google/index.html

(Vote for your favorite Google Doodle)


 


 



Google Doodles

Tuesday, June 18, 2013

Test Post from Red Ashes

Test Post from Red Ashes http://www.redashes.com