How To: Customize Icons

8tracker

As I'm slightly OCD, this has been driving me nuts.



I have attached a screengrab of the kinds of icons I'm getting on a variety of sites.



[attachment=1795:ipassword_login_screen_sample.jpg]



Some sites have a rich icon, some have what seems to be a favicon badged to the 1Password globe, while others are nothing more than the stock globe (American Airlines in the attached example)



Note the "Anna Nimmity" icon. That is from a blog where I put an Apple Touch Icon in the root, so I assume 1Password is pulling icons from a site's root.



What's going on here?



At any rate, I guess I have a feature request: The ability to use my own rich icons or create a user-wide community to upload our rich icons to your image server (this takes a load of work off the AgileBits folks). Maybe even an in-app tool to select from user generated rich icons.

thightower

8Tracker



You are referring to the Mac app in your screen shot. It is entirely possible to customize those icons.



The icons you see are pulled from the site. if they have a favicon its used etc. its been so long since I discussed the specifics I cant recall them all LOL.



In short you can go into edit mode and in the upper right hand corner where you see the image place holder just drag a image or icon you wish to use over it. A green "+" will appear, release it, exit edit mode.

pbGuy

The RI issue, I'm experiencing in 1PW 4 iOS and the eBay RI, has gotten me interested in the icons shown in 1PW MAS. (Sometimes, I find the auto placement of some site's favicon does not result in a nicely focused image; and I'd like to change that image when this happens.)



Regarding your instruction to simply drag (and drop) the image into the image place holder, are you saying to grab and drag the Favicon (from the web site)?



I've tried doing so, when the 1PW login is in edit-mode - and the prior image has been deleted, and I can not get the Favicon to copy to the place holder - the copy + does not appear. ...So, I'm doing something wrong.



...This might be a good topic for a Tutorial since others are also asking about it.

khad

It should be a simple matter of dragging and dropping a custom image. Is this what you are doing? Can you give me some more details if that is what you are doing but still having problem? Here's a screenshot for clarification:





[img]http://cdn.agilebits.com/k/img/1Password-256-20130112-203915.png[/img]

8tracker

Thanks ThighTower.



I guess I already knew this but had forgotten and was intrigued by the auto icon generation once a preview was downloaded.



It looks like I will be embarking on rich icon treasure hunting.



Thanks again.

8tracker

I guess this doesn't work exactly as I had hoped...



Using edit mode to change the icon works except it replaces the site preview on the upper right with the icon as well.



I like the site preview in the information field and the rich icon on the shelf.



Is there anyway to add the icon and preserve the site preview?

thightower

[quote name='8tracker' timestamp='1358100436' post='67212']

Is there anyway to add the icon and preserve the site preview?

[/quote]



Not that I know of. Maybe KHAD knows of something I don't. I honestly don't expect so. But you never know He has pulled a few good ones on me from time to time.

pbGuy

[quote name='khad' timestamp='1358052043' post='67178']

...Is this what you are doing?



[img]http://cdn.agilebits.com/k/img/1Password-256-20130112-203915.png[/img]

[/quote]



I am attempting to drag (and drop) a favicon (after grabbing it in the URL window within Safari - a favicon apparently can't be copy-pasted) into the image place holder w/in 1PW. But, nothing happens. So, I'm incorrectly carrying out the process and am unclear about it.

khad

8tracker, a custom image replaces both the site preview and the icon.







[quote]I am attempting to drag (and drop) a favicon (after grabbing it in the URL window within Safari - a favicon apparently can't be copy-pasted) into the image place holder w/in 1PW. But, nothing happens. So, I'm incorrectly carrying out the process and am unclear about it. [/quote]

If you drag the icon from Safari's address bar, it is not an image that you are dragging but a URL. The image is only a placeholder for the URL in that context. Drag and drop the favicon on your desktop to see it more clearly. It will create a link to that website not an image file. You'll need to drag an image rather than a URL.

pbGuy

[quote name='khad' timestamp='1358223339' post='67265']

... You'll need to drag an image rather than a URL.

[/quote]



I don't understand how to do just that, as when I click on the favicon (in the URL), I'm only able to drag the URL. How do you solely drag the favicon image?



Please provide a picture showing your instruction. Thanks.

khad

You cannot drag the favicon from the address bar to get a copy of the image itself. You'll need to find an image separately via a Google search. You don't want a favicon anyway. They are very low resolution and thus look lousy on the shelf. <img src='http://forum.agilebits.com/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':)' />



I just do a Google image search for "[Login] icon" or "[Login] logo" to find something of higher quality.



If you really just want the low resolution favicon, the default location is in the root of the domain. So try loading [font=courier new,courier,monospace][b]http://[i]example.com[/i]/favicon.ico[/b][/font] in your browser where [i]example.com[/i] is the site for which you are attempting to obtain the favicon.



Again, any image will work so you might as well use a higher resolution image, but here's a screenshot showing how to grab the favicon from Apple's website:



[img]http://cdn.agilebits.com/k/img/favicon.ico_32%C3%9732_pixels-20130115-115107.png[/img]

pbGuy

Following your instructions, I've been able to "dress up" my 1PW MAS login icons.



[attachment=1831:Login Icons.png]



I found that searching out the login logo (through Bing or Google) provided much better results than searching for the favicon.



Although I must mention that some company logins (such as support sites) returned no results for a logo, which wasn't any big deal since this all about cosmetic changes.



I like good icons; so, I found my efforts to be a fun exercise.

khad

Nice! Looks good. <img src='http://forum.agilebits.com/public/style_emoticons/<#EMO_DIR#>/biggrin.png' class='bbc_emoticon' alt=':D' />