Tags Posts tagged with "Icons"

Icons

4
Waffle App Icon

Seeing app icons has essentially become part of our daily lives. With this comes the struggle for designers to create icons that will stand out from all other app icons. There are a lot of designers who have managed to make this task look incredibly easy, designing some stunning and creative app icons (see our past article: 25 Clever Mobile App Icons).

After following some of the designers that create these amazing app icons, I began to notice a trend, a lot of these icons are food related. I began stumbling across more and more icons that looked so tasty that I wanted to take a bite out of my computer screen. So I decided to create an article showcasing some of these food related app icons that are sure to get your mouth watering.

1. Waffle by Eddie Lobanovskiy

Waffle App Icon by Eddie Lobanovskiy

2. Steak by Eddie Lobanovskiy

Steak App Icon by Eddie Lobanovskiy

3. Bacon by Eddie Lobanovskiy

Bacon App Icon by Eddie Lobanovskiy

4. Cinnamon Roll by CreativeDash

Cinnamon Roll App Icon by CreativeDash

5. Donut by CreativeDash

Donut App Icon by CreativeDash

6. Pancakes by CreativeDash

Pancakes App Icon by CreativeDash

7. Burger Bun by CreativeDash

Burger Bun App Icon by CreativeDash

8. Sushi by CreativeDash

Sushi App Icon by CreativeDash

9. Fried Egg by CreativeDash

Fried Egg App Icon by CreativeDash

10. Chuck by Marc Clancy

Beef Chuck App Icon by Marc Clancy

11. Sandwich by Ryan Ford

Sandwich App Icon by Ryan Ford

12. Fries by Ryan Ford

Fries App Icon by Ryan Ford

13. Oreo by Julian Burford

Oreo App Icon by Julian Burford

14. Burger by Julian Burford

Burger App Icon by Julian Burford

15. Donut by Konstantin Datz

Donut App Icon by Konstantin Datz

16. Jelly Cake by Erfan Nuriyev

Jelly Cake App Icon by Erfan Nuriyev

17. Hamburger by Erfan Nuriyev

Hamburger App Icon by Erfan Nuriyev

18. Candy by Ramotion

Candy App Icon by Ramotion

1
Free Long Shadow Social Icons by Pierre Borodin

Good day all, you know the usual spiel, it’s freebie Friday once again. Today’s freebie is a set of long shadow social icons brought to you by Pierre Borodin. Pierre is a UI/UX Designer living in Prague. This set of icons go with current trends well, being flat and including long shadows, this download comes in PSD format. You can keep up with Pierre on Dribbble and Twitter.

Long Shadow Social Icons by Pierre Borodin

Free Long Shadow Social Icons by Pierre Borodin

**Click the title link or the image to direct to the download page**

0
Free Flat Icon Set by Buatoom

It’s Freebie Friday once again and today’s freebie is a set of flat icons from buatoom. The icon set is a bit random but will work great with any “flat” style project or UI you may be working on. Some notables included in this set are a calender, magnifying glass, play and pause buttons, notepad, envelope, camera and more. The icons come in EPS and PSD formats. You can give thanks and follow buatoom on dribbble, Creative Market, and Twitter.

Flat Icon Set by buatoom

Free Flat Icon Set by buatoom

**Click the title link or the image to direct to the download page**

0
80 Flat Social Media Icons

I thought I would share this great deal with everyone on these 80 flat social media icons for just $7 from graphicriver. This download comes with 40 round flat social media icons and 40 square flat social media icons all in an infinite scalable vector format. Each icon also comes in 8 different sizes from 24×24 to 512×512. The great thing about this download is that it comes with easy to modify PSD files to help you create your own custom icon!

80 Flat Social Media Icons by Alphabit

80 Flat Social Media Icons

**Click the title link or the image to direct to the purchase and download page**

2
Free Round Social Media Icons by Stafie Anatolie

Freebie Friday this week brings us these round free social media icons created by Stafie Anatolie, co-founder of EpicCoders. There is no such thing as having too many social media icons, so with that said, here you go. This set comes with all the main players like Twitter, Facebook, and Google+ along with some different ones like WordPress, Digg, Amazon, and Stumbleupon.

Round Social Media Icons by Stafie Anatolie

Free Round Social Media Icons by Stafie Anatolie

**Click the title link or the image to direct to the download page**

2
How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines – Custom Icon and Image Creation Guidelines

2
Free Flat Long Shadow Social Icons by Pixeden

As most of us know by now, flat design is the new trend that is taking the design world by the balls. The more recent trend to compliment flat design now, more so for icons, is long shadow. Long shadow is the process of creating a flat design and adding a shadow to it that extends off of the icon or graphic object to make the “flatness” of it “pop” (kind of counter intuitive isn’t it?).

If you’re interested in implementing this technique but don’t know where to start, you can check out this long shadow maker that makes it super easy to add long shadows to your designs.

It’s a different trend and, if done properly, can look very cool. Fortunately for us, the people at Pixeden know how to do it right and they’ve provided us with these flat long shadow social media icons for free. Included in this downloadable PSD are 16 icons including Facebook, Twitter, RSS, Google+, LinkedIn, YouTube, Dribbble, Behance, Vimeo, Blogger, Last FM, Skype, Pinterest, Flickr, Tumblr, and MySpace.

Flat Long Shadow Social Icons by Pixeden

Flat Long Shadow Social Icons by Pixeden

**Click the title link or the image to direct to the download page**

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods

Free eBook: How to Create a Million Dollar Website

Many people dream of becoming an internet millionaire. Don't be a dreamer download this eBook, join my newsletter and start taking action today.

  • How to Find a Profitable Niche
  • How to Market Products Online
  • How to Build a Profitable Email List
  • How to Beat the Competition
  • Free Weekly Internet Money Making Methods