Does anyone have a database of User icons

PhotoGolf
PhotoGolf
Community Member
edited May 2021 in Lounge

Hey guys

I am new to 1Password (liking it a lot so far).

I understand that you have Rich icons for many sites - great feature. However we also have many sites with no icons, and I would like to edit them. I know that to do that I need to have files with the right size etc and how to edit them. However it looks like a lot of work to create new ones for every individual site, and I was thinking of just having some standard ones (eg one for shopping, one for computers, one for TV etc).

I am a bit lazy and don't want to re-invent the wheel.

I wonder has anyone got a good library of such icons that I could use that they would be willing to share, or does anyone know of some sites where I can easily get them. Hopefully already re-sized to the 1Password default sizes.

I know there are lots of professional sites out there, but it looks like I would have to download them from those sites and then resize which sounds like a lot of work.

Thanks


1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided

Comments

  • ag_ana
    ag_ana
    1Password Alumni

    Hi @PhotoGolf!

    I am new to 1Password (liking it a lot so far).

    That's nice to hear, and welcome aboard :)

    I know there are lots of professional sites out there, but it looks like I would have to download them from those sites and then resize which sounds like a lot of work.

    How many categories were you thinking of using? You mentioned shopping, computers and TV: if there are not many more, perhaps it won't take long to resize just a few icons, if you found some that you really like.

  • DenalB
    DenalB
    Community Member

    Hi @PhotoGolf !

    I searched for new icons for my nearly 400 entries. It took a lot of time but now I'm happy. ;)

    Here are a lot of free icon collections. Maybe you can find some matching icons for your needs?
    https://www.iconfinder.com/icon-sets/popular

  • I've gotten a lot of my icons for various personal projects from iconfinder over the years.

  • PhotoGolf
    PhotoGolf
    Community Member
    edited May 2021

    Hi Guys

    I have downloaded some icons from IconFinder. Some loaded fine, whilst others did not. In all cases, I am using the 512x512 .png files.

    For example this one appeared initially to load perfectly:

    but once I saved it, the Icon went all black in 1Password, as shown in the attached screenshot from 1Password:

    whereas this one loaded perfectly fine:


    (Sourced from https://www.iconfinder.com/iconsets/logos-brands-3)

    The only difference I can see is that one is a black icon on a white background whilst the other is a coloured icon. I prefer the simple line drawing type icons such as the first one above.

    What are the rules as to the type of icon files you can use.

    Thanks in advance for any advice

    1Password version 7.8.1

  • DenalB
    DenalB
    Community Member

    I have downloaded some icons

    Great! Have fun customizing 1Password. ;)

  • ag_ana
    ag_ana
    1Password Alumni

    @DenalB:

    What are the rules as to the type of icon files you can use.

    I am not aware of any specific rules. Are both icons using the same file extension?

  • DenalB
    DenalB
    Community Member
    edited May 2021

    @ag_ana:
    It looks like the answer was modified from @PhotoGolf after I wrote my answer. I only saw the first picture, and it sounded like everything was fine so far. Sorry...

    I downloaded the first image from the post... In the browser it was a PNG-file but when downloading to my computer it was a WEBP-file. I added this image into my test entry in the Windows desktop app, and it looks fine.

    Also, this icon looks good in the iOS app and in 1Password.com.

    I'm not aware of any rules for image files. :blush:

  • ag_ana
    ag_ana
    1Password Alumni

    Thank you for testing!

    @PhotoGolf: the icon should indeed work as expected. Can you confirm what version of 1Password you are running?

  • DenalB
    DenalB
    Community Member

    @ag_ana
    He wrote that he is using 1Password 7.8.1.

    1Password version 7.8.1

    Should be the stable Mac version, right?

  • ag_ana
    ag_ana
    1Password Alumni

    In 1Password for Mac version 7.8.1 I was able to reproduce this behavior with that specific icon. I will ask the developers if they know why this could be happening.

  • PhotoGolf
    PhotoGolf
    Community Member

    Thanks Ana. Yes I was using Mac Version 7.8.11 - also applies with Beta Version 7.8.2Beta-0 which I have since installed.

    Applies to many icons I have tried which all have the same look of black icon on white background - entire box goes all black. All files are .png. Colour icons seem to work fine.

    I didn't think to look at my iPad version -since checked - icon appears perfectly in the iPad version, so it looks like it is a Mac specific issue.

  • ag_ana
    ag_ana
    1Password Alumni

    Indeed, I see the same thing here on my devices @PhotoGolf :+1:

  • DenalB
    DenalB
    Community Member

    I think that the Mac version of 1Password is not supporting transparent background of PNG files, and it will be switched into a black background. So, if you are using a black icon with a transparent background the whole icon gets black.

    That's what I mean. Here you can see that the PNG file has a transparent background.

    @PhotoGolf
    I converted your PNG file into a JPG file. Here you can see that the background color switched into white.

    Could you please try this icon in your entry?

    Maybe the devs can check if this is the problem, and maybe they can fix this behavior? ;)

  • PhotoGolf
    PhotoGolf
    Community Member

    @DenalB:

    Thanks - your .jpg file works perfectly in my Mac version.

    Solves the problem for me (I know how to convert, but would be good if it were fixed :)

  • DenalB
    DenalB
    Community Member

    @PhotoGolf

    Solves the problem for me (I know how to convert, but would be good if it were fixed :)

    Good to know. I'm not using a Mac. So I could not test this by myself. But it really looks like the Mac version is not supporting transparent background of PNG files.

    Hopefully the devs will investigate here. ;)

  • ag_ana
    ag_ana
    1Password Alumni

    Thank you both for the feedback. I have let our developers know about your thoughts for future consideration :+1:

    ref: dev/projects/customer-feature-requests#300

  • DenalB
    DenalB
    Community Member

    Thanks @ag_ana ! :+1:

  • ag_ana
    ag_ana
    1Password Alumni

    :+1: :)

  • Tertius3
    Tertius3
    Community Member

    My approach of getting icons is perhaps a bit technical and out of reach for some, but I would like to share it here.

    Most websites have an icon definition somewhere in their html web page. It's the icon modern browsers show on the tab where this site is loaded or what is saved as icon if you add this site to your favorites.

    The first one is the favicon. Often very tiny and with low quality, but almost every site has it. It has a fixed name: /favicon.ico. Use the website address and append /favicon.ico to it, for example: https://www.microsoft.com/favicon.ico

    The second one is an icon declaration within the website code.
    I use Chrome as browser, and with Chrome I see the website html code by pressing CTRL-U. Somewhere the first perhaps 50 lines, look for .png or .icon file declarations and click on the corresponding link in the source code. Especially if it has a name or property part with "favicon" or "apple-touch-icon" (the last is some very useful magic name on many websites to get an identifying icon).
    Usually, this gets high quality icons, often better than the favicon.ico.

    Last resort is to continue browse the source code and click on any other *.png or *.jpg that's included - often some of these can be extracted and cut to some nice icon with your favorite picture editor.

  • williakz
    williakz
    Community Member

    @Tertius3: Very useful info. I was recently looking for such a high-quality icon, and it was quite a chore for me to root it out. You've made future spelunking that much easier. Thanks.

  • XIII
    XIII
    Community Member

    "apple-touch-icon" (the last is some very useful magic name on many websites to get an identifying icon).

    It's not "magic", but a standard:

    To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

    Source: Apple

  • DenalB
    DenalB
    Community Member

    Not every website is having such an apple-icon. Yes, it is a standard, but there are a lot of old websites out there which don't have such a good / big icon.

    You can also try this grabber to get favicons of websites:
    https://favicongrabber.com

    But as I already wrote there are some websites which still are using 16x16 or 32x32 favicons. ;)

    Here is also a way to get icons:
    https://1password.community/discussion/comment/595743/#Comment_595743

This discussion has been closed.