How to prepare html → Auto load icon in 1password

adamjosefus · October 2019

Each entry in 1password has its own icon (avatar). Sometimes the icon will load automatically based on the URL.

How do I edit my html so that 1password can find the icon?

My html icons not work.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta property="og:image" content="http://example.com/image.png?salt=123">

    <link rel='icon' type='image/png' href='http://example.com/icons/icon16.png?salt=123' sizes='16x16'>
    <link rel='icon' type='image/png' href='http://example.com/icons/icon32.png?salt=123' sizes='32x32'>
    <link rel='icon' type='image/png' href='http://example.com/icons/icon76.png?salt=123' sizes='76x76'>
    <link rel='icon' type='image/png' href='http://example.com/icons/icon120.png?salt=123' sizes='120x120'>
    <link rel='icon' type='image/png' href='http://example.com/icons/icon152.png?salt=123' sizes='152x152'>
    <link rel='icon' type='image/png' href='http://example.com/icons/icon192.png?salt=123' sizes='192x192'>

    <link rel="mask-icon" href="http://example.com/icons/pinned-tab-icon.svg?salt=123" color="#7d7d7d">

    <link rel='apple-touch-icon-precomposed' href='http://example.com/icons/icon76.png?salt=123' sizes='76x76'>
    <link rel='apple-touch-icon-precomposed' href='http://example.com/icons/icon120.png?salt=123' sizes='120x120'>
    <link rel='apple-touch-icon-precomposed' href='http://example.com/icons/icon152.png?salt=123' sizes='152x152'>
    <link rel='apple-touch-icon-precomposed' href='http://example.com/icons/icon192.png?salt=123' sizes='192x192'>

    <link rel='msapplication-square76x76logo' href='http://example.com/icons/icon76.png?salt=123' sizes='76x76'>
    <link rel='msapplication-square120x120logo' href='http://example.com/icons/icon120.png?salt=123' sizes='120x120'>
    <link rel='msapplication-square152x152logo' href='http://example.com/icons/icon152.png?salt=123' sizes='152x152'>
    <link rel='msapplication-square192x192logo' href='http://example.com/icons/icon192.png?salt=123' sizes='192x192'>

</head>

<body>
...
</body>
</html>

Please help

1Password Version: 7.3.2
Extension Version: 4.7.5.90
OS Version: macOS 10.15
Sync Type: Not Provided

Lars · November 2019

Welcome to the forum, @adamjosefus! Thanks for the question. If you're referring to website icons, you don't. Those are loaded from a server we maintain, and while we have thousands of high-resolution icons for virtually all of the highest-traffic websites and many other less-well-traveled sites, we don't have an icon for every site on the internet.

However, you're able to edit any Login record and add any image to replace the default image generated by 1Password if we don't have a Rich Icon for that site. Just click the "Edit" button on the item in 1Password for Mac, then double-click the icon itself. That will bring up the image picker, and you can select or just drag/drop any image you like.

You can also ask us to add Rich Icons for any sites you'd like them for, though that will be slower than adding them yourself in 1Password for Mac. If you want to go that route, please post the URLs of the sites you are looking for Rich Icons for, along with high quality images that represent each one. Preferred size is 512x512, with 180x180 the minimum. Thanks! :)

How to prepare html → Auto load icon in 1password

Comments