Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Safari icon #9958

Merged
merged 4 commits into from Dec 6, 2023
Merged

Update Safari icon #9958

merged 4 commits into from Dec 6, 2023

Conversation

PeterShaggyNoble
Copy link
Member

@PeterShaggyNoble PeterShaggyNoble commented Nov 29, 2023 •
edited

Safari

Issue: resolves #6125

Similarweb rank: n/a

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

Is black really the right colour for us to be using here? I would have always associated Safari with blue.
Found a few sources indicating that Safari's shade of blue is called "Brandeis Blue" and providing the hex #006CFF, so I've run with that.

@PeterShaggyNoble PeterShaggyNoble added the update icon/data Issues or pull requests regarding icons that are outdated, this can be the SVG or color or both label Nov 29, 2023
@service-paradis
Copy link
Member

service-paradis commented Nov 29, 2023 •
edited

I agree with you about the color. Safari is blue to me too!
For the icon, I'm not sure if the Wikimedia source I gave in #6125 is still correct... If I take a look at the icon from https://support.apple.com/fr-ca/guide/safari/welcome/mac and https://apps.apple.com/us/app/safari/id1146562112, it looks different.
I think the latter would look better since there are no partial overlap on the ticks. Unfortunately, I'm not sure I can find a vector version of this one.

@PeterShaggyNoble
Copy link
Member Author

PeterShaggyNoble commented Nov 29, 2023 •
edited

🤔 Interesting. I went in through their Wikipedia entry before starting work on this one to make sure I was using the latest version. I wonder is this a recent change, then?

Should we update to the version in this PR anyway, so we're at least providing the correct version of the old icon while we work on sourcing a vector of the new one, or recreating it ourselves?

UPDATE 1: Also, according to this, at our native size we shouldn't be including the ticks on the compass.

UPDATE 2: According to Logopedia, the square version @service-paradis found is use for macOS Safari, while the circle version in this PR is used for iOS Safari. Do we need to add them both, then, with both using the title "Safari", and one or both of them having a custom slug?

Why is nothing ever easy with Apple?!

@PeterShaggyNoble PeterShaggyNoble added the in discussion There is an ongoing discussion that should be finished before we can continue label Nov 29, 2023
@PeterShaggyNoble
Copy link
Member Author

Curiouser & curiouser: The "background" of this version isn't actually part of the image, it's applied by a CSS pseudo-element.

@service-paradis
Copy link
Member

🤔 Interesting. I went in through their Wikipedia entry before starting work on this one to make sure I was using the latest version. I wonder is this a recent change, then?

Should we update to the version in this PR anyway, so we're at least providing the correct version of the old icon while we work on sourcing a vector of the new one, or recreating it ourselves?

UPDATE 1: Also, according to this, at our native size we shouldn't be including the ticks on the compass.

UPDATE 2: According to Logopedia, the square version @service-paradis found is use for macOS Safari, while the circle version in this PR is used for iOS Safari. Do we need to add them both, then, with both using the title "Safari", and one or both of them having a custom slug?

They both looks similar if we ignore the square background. I think it would be better to keep a single entry without the square since we're mostly use at smaller sizes.

Why is nothing ever easy with Apple?!

It is incredible! I'm confused every time we have to work with something from Apple!!

On another note, I gave a shot at vectorizing the icon (without optimization). It might be a good starting point:
____safari

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 460"><path fill="#fff" d="M0 0h460v460H0V0Z"/><path fill="#1d92f5" d="M429.6 230.01A199.6 199.6 0 0 1 230 429.61a199.6 199.6 0 0 1-199.6-199.6A199.6 199.6 0 0 1 230 30.41a199.6 199.6 0 0 1 199.6 199.6Z"/><rect width="3.88" height="34.42" x="228.05" y="46.25" fill="#fff" rx="1.9"/><rect width="3.86" height="19.04" x="-1.93" y="-9.52" fill="#fff" rx="1.85" transform="rotate(-4.9 767.195 -2482.133)"/><rect width="3.86" height="19.08" x="-1.93" y="-9.54" fill="#fff" rx="1.87" transform="rotate(4.9 -537.078 2893.371)"/><rect width="3.86" height="34.4" x="-1.93" y="-17.2" fill="#fff" rx="1.84" transform="rotate(-10 477.617 -1116.187)"/><rect width="3.86" height="34.38" x="-1.93" y="-17.19" fill="#fff" rx="1.87" transform="rotate(10 -247.617 1512.725)"/><rect width="3.84" height="19.14" x="-1.92" y="-9.57" fill="#fff" rx="1.87" transform="rotate(-15 326.86 -671.405)"/><rect width="3.84" height="19.12" x="-1.92" y="-9.56" fill="#fff" rx="1.87" transform="rotate(15 -96.903 1075.585)"/><rect width="3.84" height="34.42" x="-1.92" y="-17.21" fill="#fff" rx="1.81" transform="rotate(-20 294.883 -453.94)"/><rect width="3.84" height="34.4" x="-1.92" y="-17.2" fill="#fff" rx="1.82" transform="rotate(20 -64.911 850.46)"/><rect width="3.84" height="19.1" x="-1.92" y="-9.55" fill="#fff" rx="1.85" transform="rotate(-25.1 240.15 -315.164)"/><rect width="3.82" height="19.12" x="-1.91" y="-9.56" fill="#fff" rx="1.86" transform="rotate(25 -10.829 720.803)"/><rect width="3.84" height="34.44" x="-1.92" y="-17.22" fill="#fff" rx="1.88" transform="rotate(-30 233.372 -230.908)"/><rect width="3.84" height="34.46" x="-1.92" y="-17.23" fill="#fff" rx="1.89" transform="rotate(30.1 -2.839 625.416)"/><rect width="3.84" height="19.08" x="-1.92" y="-9.54" fill="#fff" rx="1.87" transform="rotate(-35.2 202.663 -161.393)"/><rect width="3.84" height="19.1" x="-1.92" y="-9.55" fill="#fff" rx="1.87" transform="rotate(35.1 26.92 565.238)"/><rect width="3.84" height="34.4" x="-1.92" y="-17.2" fill="#fff" rx="1.87" transform="rotate(-40 202.173 -117.691)"/><rect width="3.84" height="34.4" x="-1.92" y="-17.2" fill="#fff" rx="1.85" transform="rotate(40 27.832 514.242)"/><rect width="19.1" height="3.84" x="-9.55" y="-1.92" fill="#fff" rx="1.8" transform="rotate(45 -75.531 182.324)"/><rect width="19.14" height="3.82" x="-9.57" y="-1.91" fill="#fff" rx="1.82" transform="rotate(-45 305.514 -372.938)"/><path fill="#ff3b30" d="m245.01 248-30.23-36.17q76.95-50.49 153.63-100.64c1.3-.84 2.8-1.38 3.5.46a1.87 1.86 56.4 0 1-.39 1.95L245.01 248Z"/><rect width="34.4" height="3.82" x="-17.2" y="-1.91" fill="#fff" rx="1.84" transform="rotate(40 -117.677 202.168)"/><rect width="19.06" height="3.82" x="-9.53" y="-1.91" fill="#fff" rx="1.82" transform="rotate(35 -162.63 203.48)"/><rect width="19.08" height="3.84" x="-9.54" y="-1.92" fill="#fff" rx="1.87" transform="rotate(-35.1 391.995 -524.162)"/><rect width="34.4" height="3.82" x="-17.2" y="-1.91" fill="#fff" rx="1.86" transform="rotate(30.1 -229.95 232.834)"/><rect width="34.46" height="3.82" x="-17.23" y="-1.91" fill="#fff" rx="1.88" transform="rotate(-30.1 459.95 -622.552)"/><rect width="19.06" height="3.84" x="-9.53" y="-1.92" fill="#fff" rx="1.83" transform="rotate(25.1 -315.169 240.127)"/><rect width="19.06" height="3.82" x="-9.53" y="-1.91" fill="#fff" rx="1.84" transform="rotate(-25.1 545.181 -793.018)"/><rect width="34.4" height="3.84" x="-17.2" y="-1.92" fill="#fff" rx="1.87" transform="rotate(20 -453.906 294.906)"/><rect width="34.42" height="3.84" x="-17.21" y="-1.92" fill="#fff" rx="1.88" transform="rotate(-20 683.93 -1009.455)"/><rect width="19.1" height="3.84" x="-9.55" y="-1.92" fill="#fff" rx="1.86" transform="rotate(15 -671.4 326.898)"/><rect width="19.1" height="3.84" x="-9.55" y="-1.92" fill="#fff" rx="1.87" transform="rotate(-15 901.428 -1420.045)"/><rect width="34.4" height="3.84" x="-17.2" y="-1.92" fill="#fff" rx="1.88" transform="rotate(10.1 -1104.756 473.808)"/><rect width="34.4" height="3.84" x="-17.2" y="-1.92" fill="#fff" rx="1.88" transform="rotate(-10 1346.182 -2151.237)"/><path fill="#fff" d="M214.78 211.83 245.01 248q.06.26-.11.38-77.36 50.7-153.69 100.68c-1.02.67-2.16.74-2.92-.35a1.81 1.81 0 0 1 .16-2.27l126.33-134.61Z"/><rect width="19.1" height="3.84" x="-9.55" y="-1.92" fill="#fff" rx="1.85" transform="rotate(5.1 -2383.574 741.065)"/><rect width="19.1" height="3.84" x="-9.55" y="-1.92" fill="#fff" rx="1.86" transform="rotate(-5 2661.863 -4513.883)"/><rect width="34.38" height="3.84" x="46.25" y="228.05" fill="#fff" rx="1.85"/><rect width="34.42" height="3.84" x="-17.21" y="-1.92" fill="#fff" rx="1.88" transform="rotate(-.1 131967.065 -227079.907)"/><rect width="19.1" height="3.82" x="-9.55" y="-1.91" fill="#fff" rx="1.86" transform="rotate(-4.9 2893.361 -536.845)"/><rect width="19.1" height="3.82" x="-9.55" y="-1.91" fill="#fff" rx="1.85" transform="rotate(4.9 -2663.376 4838.313)"/><rect width="34.36" height="3.84" x="-17.18" y="-1.92" fill="#fff" rx="1.88" transform="rotate(-10 1512.72 -247.56)"/><rect width="34.42" height="3.82" x="-17.21" y="-1.91" fill="#fff" rx="1.87" transform="rotate(10 -1282.73 2381.237)"/><rect width="19.06" height="3.82" x="-9.53" y="-1.91" fill="#fff" rx="1.86" transform="rotate(-15 1075.618 -96.86)"/><rect width="19.1" height="3.8" x="-9.55" y="-1.9" fill="#fff" rx="1.85" transform="rotate(15 -845.59 1650.083)"/><rect width="34.4" height="3.82" x="-17.2" y="-1.91" fill="#fff" rx="1.87" transform="rotate(-20 850.46 -64.911)"/><rect width="34.38" height="3.82" x="-17.19" y="-1.91" fill="#fff" rx="1.85" transform="rotate(20 -620.47 1239.427)"/><rect width="19.04" height="3.82" x="-9.52" y="-1.91" fill="#fff" rx="1.83" transform="rotate(-25 720.843 -10.796)"/><rect width="19.1" height="3.8" x="-9.55" y="-1.9" fill="#fff" rx="1.86" transform="rotate(25 -490.848 1026.644)"/><rect width="34.38" height="3.82" x="-17.19" y="-1.91" fill="#fff" rx="1.87" transform="rotate(-30 627.463 -3.372)"/><rect width="34.42" height="3.8" x="-17.21" y="-1.9" fill="#fff" rx="1.87" transform="rotate(30 -397.468 854.981)"/><rect width="19.06" height="3.8" x="-9.53" y="-1.9" fill="#fff" rx="1.83" transform="rotate(35.2 -333.659 752.389)"/><rect width="19.04" height="3.8" x="-9.52" y="-1.9" fill="#fff" rx="1.83" transform="rotate(-35.1 565.244 26.956)"/><rect width="34.4" height="3.8" x="-17.2" y="-1.9" fill="#fff" rx="1.85" transform="rotate(40 -284.229 659.746)"/><rect width="3.82" height="34.34" x="-1.91" y="-17.17" fill="#fff" rx="1.82" transform="rotate(40 -429.751 347.677)"/><rect width="3.82" height="34.38" x="-1.91" y="-17.19" fill="#fff" rx="1.88" transform="rotate(-40 659.751 -284.242)"/><rect width="19.06" height="3.78" x="-9.53" y="-1.89" fill="#fff" rx="1.75" transform="rotate(-45 479.743 47.664)"/><rect width="3.8" height="19.08" x="-1.9" y="-9.54" fill="#fff" rx="1.77" transform="rotate(-44.9 603.983 -250.785)"/><rect width="3.8" height="34.36" x="-1.9" y="-17.18" fill="#fff" rx="1.84" transform="rotate(30 -624.981 460.903)"/><rect width="3.8" height="34.4" x="-1.9" y="-17.2" fill="#fff" rx="1.87" transform="rotate(-30.1 852.57 -395.43)"/><rect width="3.8" height="19.08" x="-1.9" y="-9.54" fill="#fff" rx="1.86" transform="rotate(35 -525.97 392.626)"/><rect width="3.8" height="19.08" x="-1.9" y="-9.54" fill="#fff" rx="1.86" transform="rotate(-35 755.987 -336.836)"/><rect width="3.8" height="34.36" x="-1.9" y="-17.18" fill="#fff" rx="1.79" transform="rotate(20 -1009.489 683.906)"/><rect width="3.82" height="34.34" x="-1.91" y="-17.17" fill="#fff" rx="1.78" transform="rotate(-20 1239.455 -620.466)"/><rect width="3.82" height="34.34" x="-1.91" y="-17.17" fill="#fff" rx="1.87" transform="rotate(10 -2151.18 1346.177)"/><rect width="3.82" height="34.36" x="-1.91" y="-17.18" fill="#fff" rx="1.87" transform="rotate(-10 2381.295 -1282.725)"/><rect width="3.8" height="19.06" x="-1.9" y="-9.53" fill="#fff" rx="1.86" transform="rotate(25.1 -793.023 545.159)"/><rect width="3.82" height="19.06" x="-1.91" y="-9.53" fill="#fff" rx="1.84" transform="rotate(-25 1026.64 -490.826)"/><rect width="3.88" height="34.36" x="-1.94" y="-17.18" fill="#fff" rx="1.89" transform="rotate(-.1 227315.621 -131576.26)"/><rect width="3.8" height="19.06" x="-1.9" y="-9.53" fill="#fff" rx="1.85" transform="rotate(15.1 -1409.955 896.69)"/><rect width="3.82" height="19.06" x="-1.91" y="-9.53" fill="#fff" rx="1.86" transform="rotate(-15.1 1639.993 -838.624)"/><rect width="3.82" height="19.08" x="-1.91" y="-9.54" fill="#fff" rx="1.85" transform="rotate(5 -4514.112 2661.873)"/><rect width="3.82" height="19.12" x="-1.91" y="-9.56" fill="#fff" rx="1.85" transform="rotate(-4.9 4838.542 -2663.25)"/></svg>

@PeterShaggyNoble
Copy link
Member Author

Double checked the Wikimedia version and it was manually vectorised from an unofficial source.

@service-paradis, are you suggesting we run with no background shape, or with the circle background? I think we should keep the circle.

Also, do you think we should omit the ticks per their own design guidelines? I think that, without colours and, potentially, without a background shape, removing the ticks would make it less regonisable as the Safari icon. And they specifically mention 1616 as the size the ticks should be omitted, whereas we're working at 2424.

@service-paradis
Copy link
Member

I think we should keep it circular. I'm wondering if we should do a circular outline as your initial proposal or a filled circle with transparent ticks. Something like this (would need to do something with the needle):
___safari

I think I would also keep the ticks. I dont really remember seeing this logo without ticks.

@PeterShaggyNoble
Copy link
Member Author

I think the version most people are familiar with is the "iOS" one, with an outer and an inner circle and that it's more recognisable that way in monochrome, so I'd say an outlined circle as in my original version.

Do you want to run with this one, seeing as you've already done most of the work on it?

@service-paradis
Copy link
Member

I think the version most people are familiar with is the "iOS" one, with an outer and an inner circle and that it's more recognisable that way in monochrome, so I'd say an outlined circle as in my original version.

I'm still not sure about the outline version 😅 If I look at https://logos.fandom.com/wiki/Safari_(iOS), I see a single filled blue circle for their current icon.

Do you want to run with this one, seeing as you've already done most of the work on it?

I have a hard time finding time right now for icon creation. Hope it changes soon! Feel free to take it a shot if you want to :)

@PeterShaggyNoble
Copy link
Member Author

This is what staring at icons all day, trying to pick out hairline imperfections does to you: you go blind! 😆 I could have sworn I saw an outer circle on Logopedia's iOS version!

I'll pick up where you left off on Monday, so.

@service-paradis
Copy link
Member

I was searching everywhere to find that outline, looking at various iPad screenshot I could find 😆

I'll pick up where you left off on Monday, so.

Great to have you back, thank you!

@PeterShaggyNoble
Copy link
Member Author

Getting back onto this one now, @service-paradis, is this the image you based your version off?

@PeterShaggyNoble PeterShaggyNoble marked this pull request as draft December 5, 2023 10:48
@PeterShaggyNoble PeterShaggyNoble added vector unavailable Issues and Pull Requests where no official SVG is available. and removed in discussion There is an ongoing discussion that should be finished before we can continue labels Dec 5, 2023
@service-paradis
Copy link
Member

Getting back onto this one now, @service-paradis, is this the image you based your version off?

Good question, I should have noted that!

@PeterShaggyNoble PeterShaggyNoble marked this pull request as ready for review December 5, 2023 13:21
@adamrusted adamrusted merged commit ebe90d7 into simple-icons:develop Dec 6, 2023
3 checks passed
@github-actions github-actions bot mentioned this pull request Dec 10, 2023
Merged
mondeja added a commit that referenced this pull request Dec 10, 2023
@mondeja
Release 23 new icons and 15 updated icons (v10.2.0)
c29d286 
# New Icons

- Bakal&#225;&#345;i (#10031)
- Bricks (#10022)
- DeepL (#9464)
- Dunzo (#10028)
- Educative (#10036)
- Google Cloud Storage (#9467)
- GrapheneOS (#9281)
- Graphite (#10027)
- Great Learning (#10035)
- Hepsiemlak (#9705)
- Moodle (#10030)
- NETGEAR (#8250)
- Niantic (#9988)
- oclif (#9965)
- Packt (#10038)
- Piapro (#9737)
- Picxy (#9719)
- Resend (#9448)
- Skaffold (#10004)
- Softpedia (#10032)
- Tinkercad (#10033)
- Viblo (#10003)
- Xendit (#9981)

# Updated Icons

- Dassault Systèmes (#8471)
- F-Droid (#10010)
- F-Secure (#10010)
- Flattr (#10010)
- Guangzhou Metro (#10010)
- Lemmy (#10010)
- Lenovo (#10010)
- Monero (#10010)
- MoneyGram (#10010)
- PeerTube (#10010)
- Pegasus Airlines (#10010)
- Pleroma (#10010)
- Reddit (#9964)
- Safari (#9958)
- Write.as (#9884)
@PeterShaggyNoble PeterShaggyNoble deleted the update/safari branch December 14, 2023 20:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamrusted adamrusted adamrusted approved these changes

@service-paradis service-paradis Awaiting requested review from service-paradis

Assignees
No one assigned
Labels
update icon/data Issues or pull requests regarding icons that are outdated, this can be the SVG or color or both vector unavailable Issues and Pull Requests where no official SVG is available.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Update Safari icon
3 participants
@PeterShaggyNoble @service-paradis @adamrusted