Icons

steve.n

<div class="IPBDescription">Where do they come from?</div>Greetings,



I'm a new user and wondering where the icons in both websites and software items come from? I posted a question [url="http://forum.agile.ws/index.php?/topic/2175-1passwordagent-1passwordthumbs-and-littlesnitch/"]in another thread[/url] about the website icons, for example why IBM and Evernote have nice big icons.



I've just noticed similar behaviour with Software. For example when entering the software license for VMWare, it shows a nice big VMWare Fusion icon, however when entering the software asset data for MS Office 2008, it uses the typical Mac 'application icon'.



How are these set? Whilst a small thing, it does make a big difference from a 'look & feel' perspective.



Regards,

- SteveN

[Deleted User]

[quote name='steve.n' timestamp='1286773848' post='13024']

Greetings,



I'm a new user and wondering where the icons in both websites and software items come from? I posted a question [url="http://forum.agile.ws/index.php?/topic/2175-1passwordagent-1passwordthumbs-and-littlesnitch/"]in another thread[/url] about the website icons, for example why IBM and Evernote have nice big icons.[/quote]



Hi Steve,



Thanks for the post, you're question is one that's come up quite a few times before and I'll do my best to explain exactly how 1Password generates the icons for your saved logins, particularly in the 'Shelves' view.



The 'nice big icons' you see for sites like Evernote, IBM and others such as Facebook are what's known as 'Apple Touch Icons' and came about when the iPhone was first launched, where the only means of getting 'Apps' onto your device was to save these to your home-screen. Apple published a spec to make it possible for web site developers to create iPhone sized icons that would be downloaded and used to represent their site when saved to an iPhone's homescreen.



It turns out that these are the perfect size to use for a nice big preview icon within 1Password, so if a site has such an icon setup 1Password will automatically download and use this, if not then we place the site's very small 16x16 pixel 'Favicon' at the bottom right of the generic globe icon to at least give an idea of which site the login belongs to.



[quote]I've just noticed similar behaviour with Software. For example when entering the software license for VMWare, it shows a nice big VMWare Fusion icon, however when entering the software asset data for MS Office 2008, it uses the typical Mac 'application icon'.[/quote]



The software licenses work on a similar principal, when you create a new 'Software' item within 1Password we look to see if you have an app with that name in your Applications folder and if so we'll use the icon provided by the developers.



This works great in the majority of cases, except of course if you don't have the app installed at the moment, or in the case of MS Office the license relates to a suite of applications rather than a single app, for example if you created an item for Microsoft Word you'll find that the Word icon is properly imported. You can add your own icons to software licenses by clicking 'Edit' on the item and dragging your custom icon to the top-right of the item where you see the 'Drop-zone' type area.



[quote]How are these set? Whilst a small thing, it does make a big difference from a 'look & feel' perspective.



Regards,

- SteveN

[/quote]



Thanks Steve, we completely agree and this is why we went to the effort of adding these features, unfortunately not all websites have Apple Touch icons, which is a shame considering it's such a simple thing to add.



Hope that all makes sense,

steve.n

Interesting, and ironic that Apple's developer site doesn't have such an icon! At least not on the login page that I have.



Are these icons supposed to be 45x45 or 57x57? Both sizes are referred to in articles on how to create apple touch icons.



Cheers,



- SteveN

steve.n

One more question: is it possible to apply a custom apple touch icon and retain the preview of the site in the upper right corner? It seems that by adding the custom icon (either 45x45 or 57x57) that the preview is replaced. Since the preview is substantially larger than 57x57, this results in a grainy photo.



Cheers,

- SteveN

khad

Good questions, SteveN.



[quote]Interesting, and ironic that Apple's developer site doesn't have such an icon! At least not on the login page that I have.[/quote]

It seems a bit funny at first, but how many people are adding it to their home screen on iOS devices? <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_bigsmile.png' class='bbc_emoticon' alt=':-D' />



[quote]Are these icons supposed to be 45x45 or 57x57? Both sizes are referred to in articles on how to create apple touch icons.[/quote]

I am getting a bit tired, but offhand I believe the 45×45 images were originally used for iPhone home screens and later — you guessed it — the 57×57 icons were used for iPad home screens. There is much debate over all of this which takes into account resizing algorithms and much more. Apple's own [url="http://www.apple.com/apple-touch-icon.png"]apple-touch-icon[/url] is 129×129!?



[quote]One more question: is it possible to apply a custom apple touch icon and retain the preview of the site in the upper right corner? It seems that by adding the custom icon (either 45x45 or 57x57) that the preview is replaced. Since the preview is substantially larger than 57x57, this results in a grainy photo.[/quote]

If you specify a custom image, the thumbnail preview is replaced with your image. There is not currently a way to have a custom icon [i]and[/i] thumbnail preview. Your best bet is to use a square image of the largest size you can. (Although 512x512 should be more than enough. Beyond that you are just wasting space in your data file since the images are never displayed any larger than that. That does happen to be the size of some high-quality icons, though, which you can also use by dragging an app onto the image drop target.) [url="http://forum.agile.ws/index.php?/topic/2090-how-do-site-icons-get-generated/page__view__findpost__p__12400"]As I mentioned in another thread[/url], many sites have some nice logos you can drag and drop from Wikipedia or simply do a Google Image Search for "[company] icon" or "[company] logo."



I hope that helps! Good luck! <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_wink.png' class='bbc_emoticon' alt=';-)' />

Soloo

Hi,



I love 1 Password and use it on my Mac, on my iPhone and on Windows. One thing i would like is to have the software license icons changeable. If an application is installed it recognizes the icon automatically but this doesn't work with applications i installed on my Windows machine. So i would to get the possibility to add my own icon files (that i can extract from the applications) within 1 Password.



Did i miss this feature and is it already implemented? If not, is it possible to have something like that in the near future?



Thank you.

khad

Hi Soloo,



I merged your post with the appropriate thread, please read [url="http://forum.agile.ws/index.php?/topic/2213-icons/page__view__findpost__p__13049"]Stu's post above[/url]. The short answer is that you can drag an app right onto the icon while editing. Other images work fine, too. <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_smile.png' class='bbc_emoticon' alt=':-)' />



I hope that helps. Please let me know.



Cheers!

Hohlen

Where do you get the beautiful icons show on most of the 1Password screenshots? I have some that came with 1Password, but now when I add a new website that's widely known (e.g. Yahoo!, Bank Of America, etc), I get the standard blue earth icon with a thumbnail of the website in the lower right corner? I'm sure it obvious, but I've looked every where for the answer to this question.



Thanks!

khad

Welcome to the forums, Hohlen! Sorry for the late reply. We have been a bit busier than usual lately.



I merged your post with the appropriate thread. Please see above and let me know if you have any further questions. <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_bigsmile.png' class='bbc_emoticon' alt=':-D' />

rf57

This thread is helpful in explaining how 1Password uses Apple Touch Icons but it still doesn't answer my original question about how to get the Bank of America Apple Touch Icon bank into my 1Password login shelf. I know there was such an icon when I first downloaded the application but now it's gone. I suspect the png file is still somewhere on my computer but I have no idea where. I did do a web search on "Bank of America" icon/logo but didn't uncover the location of an Apple Touch icon for B of A. I think the Agile Web Solutions company could probably "short-circuit" this whole conversation by keeping an up-to-date library of the most popular icons on their site that users could download to their computer and drag-and-drop onto their Logins shelf. From an end-user perspective, it kind of diminishes the product experience when my 1Password application's screen doesn't look as nice as the examples I see on the company website. Just my $.02.

khad

rf57,



As previously mentioned, the icons are provided by the websites themselves. They are beyond our control. <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_worried.png' class='bbc_emoticon' alt=':S' />



If Bank of America ever had an [font="Menlo"]apple-touch-icon.png[/font] on their server, they do not currently. Both subdomains that Bank of America uses for their login process omit such an icon:



[code]https://www.bankofamerica.com/apple-touch-icon.png[/code]

[code]https://sitekey.bankofamerica.com/apple-touch-icon.png[/code]

Those URLs return 404 (not found) errors.



If a website does not provide such an image, someone else would need to create one. If that someone was an Agile employee, we would have to have our designer creating these images nearly full time in order to keep up with the demand. <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_sadsmile.png' class='bbc_emoticon' alt=':-(' />



I'm sorry I don't have a better answer for you, but it is the equivalent of asking Apple to provide album artwork for iTunes albums that you and your friends record. The artwork has to be provided [b]to[/b] iTunes before it can be provided [b]by[/b] iTunes. The icons for which you are looking are not provided to 1Password by the site, thus 1Password cannot display what does not exist. I have been a Bank of America customer for years and do not recall them ever providing such an icon.



The good news is that, as I mentioned in my post above and in [url="http://forum.agile.ws/index.php?/topic/2090-how-do-site-icons-get-generated/page__view__findpost__p__12400"]another thread on the same subject[/url], you can drag and drop any image you wish into the item details.



I was able to find the icon that Bank of America uses on their [i]mobile[/i] site (by accessing the URL from my iPhone, copying the URL to my Mac, and then viewing the source code). You can [url="https://www.bankofamerica.com/www/en_US/images/mobile/iui/webclipping-icon.png"]download it here[/url] and drop it into your Bank of America login in 1Password.



Additionally, I found some images doing a Google Image Search for "[url="http://www.google.com/images?q=bank+of+america+icon"]bank of america icon[/url]" which you might find more suitable to your tastes.



I hope that helps clarify the situation. Please let me know if I can be of further assistance! <img src='http://forum.agile.ws/public/style_emoticons/<#EMO_DIR#>/skype_smile.png' class='bbc_emoticon' alt=':-)' />

RoryK

I use 1Password on the mac. I like the icon/preview functionality as a way to easily browse my list of passwords. However it's inconsistent in capturing these: when I log onto a new site and "save" the login credentials to 1password using safari, sometimes I get (1) a full size icon (what I want), (2) the generic globe with a miniature, barely legible thumbnail of the icon on the bottom right of the globe or (3) just the globe (no icon or thumbnail of the icon). It strikes me that if it's grabbing a thumbnail I should also grab the full size icon. Sometimes it's just inconsistent e.g., I logged onto Hulu with my credentials and it captured the full sized icon. I did it again using my mother's credentials and it just captured the thumbnail. Same site, same process. Different result. Any advice how to convert these thumbnails to full size? Am I doing something wrong?

[Deleted User]

[quote name='RoryK' timestamp='1306355891' post='27763']

I use 1Password on the mac. I like the icon/preview functionality as a way to easily browse my list of passwords. However it's inconsistent in capturing these: when I log onto a new site and "save" the login credentials to 1password using safari, sometimes I get (1) a full size icon (what I want), (2) the generic globe with a miniature, barely legible thumbnail of the icon on the bottom right of the globe or (3) just the globe (no icon or thumbnail of the icon). It strikes me that if it's grabbing a thumbnail I should also grab the full size icon. Sometimes it's just inconsistent e.g., I logged onto Hulu with my credentials and it captured the full sized icon. I did it again using my mother's credentials and it just captured the thumbnail. Same site, same process. Different result. Any advice how to convert these thumbnails to full size? Am I doing something wrong?

[/quote]



[size=4][color=#1C2837]Hello RoryK and welcome to the Forums![/color][/size]



[size=4][color=#1C2837]1Password downloads the icons from the websites you visit [i][b]IF[/b][/i] the website provides an icon. Please see the following post discussing the issue:[/color] [/size][url="http://forum.agile.ws/index.php?/topic/4175-preview-and-favicon-not-downloading/page__view__findpost__p__24988"]Preview and favicon not downloaded[/url].



When I first started using IP, I had the same complaint that you do. After reading the explanation, I started doing Google searches for Images using "apple-touch-icon" + the company/product/item name. In order to find good candidates, I restrict image size to 150x150.



Once you find an icon that you would like to use, select the saved login in question, click "Edit" and then drag and drop the icon onto the preview image (in the Mac version, it is in the upper right corner with a paperclip). Click "Save", and you should see a full icon on your bookshelf or in whichever view you use.



If you are interested, I will be happy to provide some good websites for downloading apple-touch-icons.



Please let me know if this method works for you.



Cheers!



Brandt



P.S. If you would like to test this method, try it using [url="http://agilebits.com/home/press"]1P's icon[/url]

RoryK

Thank you for the fast and comprehensive reply. Will try your advice his w/end and post how I get on fir interest of others. Thanks again

[Deleted User]

[quote name='RoryK' timestamp='1306419494' post='27795']

Thank you for the fast and comprehensive reply. Will try your advice his w/end and post how I get on fir interest of others. Thanks again

[/quote]



You are very welcome! I look forward to hearing how it works for you.