Add haveibeenpwned icon (#2516)

[phatbhoy67]

Issue: #2516

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

Description

Manual vector based on favicon.

Hex value chosen is #191919from the website.

[ericcornelissen]

@phatbhoy67 may I ask why you went with a manual vectorization instead of using Calibri to type "';--" into a whatever software you use and convert it to a path from that? I saw that the favicon is slightly different (possibly because it is a rasterized image), but if that is the only reason I think using the icon in the header of the website as a source is better 🤔

[phatbhoy67]

Hey @ericcornelissen I did start out with typing the text in Calibri, converting it to path and then used the bottom part of the semicolon (inverted and reversed) to replace the ' to match the design of the favicon. I also used the favicon as a basis to adjust the character spacing.

That's why I described it as "Manual vector based on favicon."

My thinking is that the favicon is a deliberate design, whereas the icon in the header is dependent on CSS rules (including fallback fonts), which means it might not be rendered exactly the same for everyone.

The og:image (https://haveibeenpwned.com/Content/Images/SocialLogo.png) 👇 for the front page also uses a similar version to the favicon.

[ericcornelissen]

Thanks for the clarification @phatbhoy67 👌 In that case I approve of this but will leave it to a second pair of eyes to confirm the colour (@simple-icons/maintainers)

[runxel]

Yeah I am not too sure about the color either.
Why not some of the blue tones? Would have expected that... 🤔

[phatbhoy67]

Why not some of the blue tones?

I found a lot of blue/shades of blue, but none seem to be favoured over the other and buttons/highlights/CTAs etc all use different colours.

Do you have a favourite from the blue options I found @runxel? 👇

#2A6379is the calculated midpoint of gradient #0F1932 to #45ACBF front page.

Other blues include #3a9ac4, #2e82a7, #2b5766, #337ab7, #2e6da4, #1a8cff.

I chose #191919 because it is used consistently across the site as the background colour and is similar to the favicon colour.

[runxel]

True, no easy decision overall! :)
But since there is so much blue I'd still tend to use one. I like the gradient midpoint!

[runxel]

Thanks for the good work! 👍

[PeterShaggyNoble]

I would have suggested going with the boxed version here as they also have one surrounding the full "logo", underneath the main header.

[ericcornelissen]

That is a decent argument in favor of the border, I initially didn't think it mattered one way or the other but that is definitely an argument in favor of the border 🤔 Good point @PeterShaggyNoble, any other opinions @simple-icons/maintainers?

[wolframroesler]

Great work, and super fast, thanks! (on behalf of KeePassXC where we're going to use it, cf. keepassxreboot/keepassxc#1083)