SlideShare a Scribd company logo
1 – © 2015, 2020 copyright Liquidity Lighthouse, LLC.
Toolbar Button Graphics Recommendations
(Firefox, Chrome, Safari, Internet Explorer)
Firefox Buttons
.png format
Bolded numbers below are the minimum suggested list of Icon sizes that should be included.
These can contain transparent attributes.
- 16x16 – used for legacy default toolbar button size.
- 18x18 – used for Toolbar Icon non-HiDPI.
The toolbar area has space 18x18 pixels for each button icon.
- 24x24 – used for customize toolbar area, if Toolbar button is hidden by dragging it into the customize
toolbar box. The Toolbar button will then appear using the 24x24 graphic size.
- 32x32 – used for menu panel Icon non-HiDPI. (For the Add-on extension list, where all installed
extensions are displayed.
The menu panel area has space for 32x32 pixels per icon.
- 36x36 – used for Toolbar Icon HiDPI.
- 64x64 – used for menu panel icon HiDPI. (Also for Add-on extension list. For legacy versions of Firefox,
this will be reduced to 48x48 for use on the extension list.
Reference: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-
Level_APIs/ui_button_action#ActionButton(options)
Chrome Buttons
According to the Google website – “Icons should generally be in PNG format, because PNG has the best
support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO,
and JPEG.” (https://developer.chrome.com/apps/manifest/icons)
“You may provide icons of any other size you wish, and Chrome will attempt to use the best size where
appropriate. For example, Windows often requires 32-pixel icons, and if the app includes a 32-pixel icon,
Chrome will choose that instead of shrinking a 48-pixel icon down. However, you should ensure that all of your
icons are square, or unexpected behavior may result.”
The following Icon sizes are recommended:
- 16x16 – extension’s favicon
- 19x19 – default Toolbar Button Icon size.
- 32x32 – for Windows purposes. If a shortcut is added to the desktop for a webpage, then the 32x32
size will be used. If not available, Chrome will reformat another icon size to 32x32.
- 38x38 – large default toolbar button icon
- 48x48 – used by the Extensions Management Page (chrome://extensions), to display logo next to the
Extension Name.
- 64x64 – optional
- 128x128 – used by the Chrome Browser Installation and Removal prompts, and the Chrome Web
Store.
2 – © 2015, 2020 copyright Liquidity Lighthouse, LLC.
Safari Buttons
.png format
- 16x16 – for toolbar button. Most of the icon will be transparent. The pixels for the center part of the
logo that should be displayed, can be drawn with either 256 or 16 colors.
- 24x24 – for toolbar button, if a large font size is being used. Same characteristics as 16x16.
- 32x32 – for the Extensions panel. Since colors can be used for this graphic, there is no need for
transparency. 256 colors work well.
Apple explained the Icon color formatting in further detail at:
https://web.archive.org/web/20160114072049/https://developer.apple.com/library/safari/documentation/Tools/Conc
eptual/SafariExtensionGuide/AddingButtonstotheMainSafariToolbar/AddingButtonstotheMainSafariToolbar.html
3 – © 2015, 2020 copyright Liquidity Lighthouse, LLC.
Internet Explorer
.ico format
256 or 16 colors are recommended, depending on planned backward browser compatibiity.
16x16 – Small Toolbar/Commandbar button size
24x24 – Large Toolbar/Commandbar button size
The FirstButton for Internet Explorer Installer documentation suggests additional Icon sizes (20x20, 32x32, and
48x48) in its collection – these are used for additional Windows purposes.
(Windows includes the numbers as part of the string designating the location of the icon for Internet Explorer).
All of the below .ico files contain multiple icons, sized at 16x16, 20x20, 24x24, 32x32, and 48x48.
1 For IE7, IE8, IE9, IE10, IE11 (desktop mode), this value is used for HotIcon and Icon sources
For IE6, on Windows XP, this is used for Icon value for ToolbarButton (256 colors)
(contains icon sizes 16x16, 20x20, 24x24, 32x32, 48x48)
2 For IE6, on Windows XP, this is used for HotIcon value for ToolbarButton (256 colors, but grey toned)
(contains icon sizes 16x16, 20x20, 24x24, 32x32, 48x48)
3 For Windows 2000, IE 5.5 or 6, this is used for Icon (256 colors, suitable to IE6)
(contains icon sizes 16x16, 20x20, 24x24, 32x32)
4 For Windows 2000, IE 5.5 or 6, this is used for HotIcon [Mouse is over ToolbarButton]
(256 colors, but grey toned)
(contains icon sizes 16x16, 20x20, 24x24, 32x32)
5 For Windows 98, Me, or NT, this is used for Icon value for ToolbarButton (16 colors)
(contains icon sizes 16x16, 20x20, 24x24, 32x32)
6 For Windows 98, Me, or NT, this is used for HotIcon [Mouse is overToolbarButton]
(16 colors, but grey toned)
(contains icon sizes 16x16, 20x20, 24x24, 32x32)
4 - © 2016, 2018-2020 copyright Liquidity Lighthouse, LLC.
Please send questions or concerns regarding this document to documents@liquiditylighthouse.com.
NO WARRANTIES. Liquidity Lighthouse, LLC expressly disclaims any warranty for the SOFTWARE PRODUCT , THE
SOFTWARE PRODUCT AND ANY RELATED DOCUMENTATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NONINFRINGEMENT.
Limitation of Liability
To the maximum extent permitted by applicable law, in no event shall Liquidity Lighthouse , LLC or its suppliers be liable for
any special,incidental, indirect, or consequential damages whatsoever(including, without limitation, damages forloss of
business profits, business interruption, loss of business information, or any other pecuniary lo ss) arising out of the use of or
inability to use the SOFTWARE PRODUCT or the provisionof or failure to provide Support Services.
By using the Installation Software, you agree not to assertany intellectual property rights, including but not limited to, claims
of trademark infringement, against Liquidity Lighthouse, LLC or its suppliers, now or in the future.
Liquidity Lighthouse, LLC
PO Box 211091
Bedford, TX 76095
FirstButton and Liquidity Lighthouse are trademarks of Liquidity Lighthouse, LLC.

More Related Content

Similar to Button Graphics

Browser sizes - November 2000
Browser sizes - November 2000Browser sizes - November 2000
Browser sizes - November 2000William Cookson
 
What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...Unity Technologies
 
Smart Notebook 11.2 User Guide
Smart Notebook 11.2 User GuideSmart Notebook 11.2 User Guide
Smart Notebook 11.2 User GuideHarold Johanson
 
AstroPrint Pitch Deck 05.04.2018
AstroPrint Pitch Deck 05.04.2018AstroPrint Pitch Deck 05.04.2018
AstroPrint Pitch Deck 05.04.2018Drew Taylor
 
Technology of ant group
Technology of ant groupTechnology of ant group
Technology of ant groupToan Le Viet
 
Exciting features of windows 10 operating system
Exciting features of windows 10 operating systemExciting features of windows 10 operating system
Exciting features of windows 10 operating systemPriceJugaad
 
run 32 bit programs on 64 bit windows
run 32 bit programs on 64 bit windowsrun 32 bit programs on 64 bit windows
run 32 bit programs on 64 bit windowsssuser1eca7d
 
Applying NLP to product comparison at visual meta
Applying NLP to product comparison at visual metaApplying NLP to product comparison at visual meta
Applying NLP to product comparison at visual metaRoss Turner
 
Fireworks Notes
Fireworks NotesFireworks Notes
Fireworks Notessmasi27
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read mecarolserrato
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read melinelle08
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read meangelpagatpat
 
Basic Computer skill-P2.pptx
Basic Computer skill-P2.pptxBasic Computer skill-P2.pptx
Basic Computer skill-P2.pptxMastewal5
 
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chou
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike ChouWorkshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chou
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chouux singapore
 
Creating a prezi handout
Creating a prezi handoutCreating a prezi handout
Creating a prezi handoutabeldridge
 
A Complete guide of Windows 8 with its application
A Complete guide of Windows 8 with its applicationA Complete guide of Windows 8 with its application
A Complete guide of Windows 8 with its applicationalva christi
 

Similar to Button Graphics (20)

Browser sizes - November 2000
Browser sizes - November 2000Browser sizes - November 2000
Browser sizes - November 2000
 
What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...What's next for unity in automotive, transportation and manufacturing – Unite...
What's next for unity in automotive, transportation and manufacturing – Unite...
 
Smart Notebook 11.2 User Guide
Smart Notebook 11.2 User GuideSmart Notebook 11.2 User Guide
Smart Notebook 11.2 User Guide
 
AstroPrint Pitch Deck 05.04.2018
AstroPrint Pitch Deck 05.04.2018AstroPrint Pitch Deck 05.04.2018
AstroPrint Pitch Deck 05.04.2018
 
Technology of ant group
Technology of ant groupTechnology of ant group
Technology of ant group
 
Exciting features of windows 10 operating system
Exciting features of windows 10 operating systemExciting features of windows 10 operating system
Exciting features of windows 10 operating system
 
run 32 bit programs on 64 bit windows
run 32 bit programs on 64 bit windowsrun 32 bit programs on 64 bit windows
run 32 bit programs on 64 bit windows
 
Applying NLP to product comparison at visual meta
Applying NLP to product comparison at visual metaApplying NLP to product comparison at visual meta
Applying NLP to product comparison at visual meta
 
Fireworks Notes
Fireworks NotesFireworks Notes
Fireworks Notes
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read me
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read me
 
fotos
fotosfotos
fotos
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read me
 
Photoshop cs5 read me
Photoshop cs5 read mePhotoshop cs5 read me
Photoshop cs5 read me
 
Basic Computer skill-P2.pptx
Basic Computer skill-P2.pptxBasic Computer skill-P2.pptx
Basic Computer skill-P2.pptx
 
What is-32-bit-and-64-bit
What is-32-bit-and-64-bitWhat is-32-bit-and-64-bit
What is-32-bit-and-64-bit
 
Startup Stories: Likno
Startup Stories: LiknoStartup Stories: Likno
Startup Stories: Likno
 
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chou
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike ChouWorkshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chou
Workshop #6: UX In The Jungle by DJ (Der-Jeng) Lin & Mike Chou
 
Creating a prezi handout
Creating a prezi handoutCreating a prezi handout
Creating a prezi handout
 
A Complete guide of Windows 8 with its application
A Complete guide of Windows 8 with its applicationA Complete guide of Windows 8 with its application
A Complete guide of Windows 8 with its application
 

Recently uploaded

How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxGal Baras
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理aagad
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxabhinandnam9997
 
The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfSiskaFitrianingrum
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyDamar Juniarto
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?Linksys Velop Login
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shoplaozhuseo02
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxlaozhuseo02
 

Recently uploaded (12)

How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
 
The Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI StudioThe Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI Studio
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
 
The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdf
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 

Button Graphics

  • 1. 1 – © 2015, 2020 copyright Liquidity Lighthouse, LLC. Toolbar Button Graphics Recommendations (Firefox, Chrome, Safari, Internet Explorer) Firefox Buttons .png format Bolded numbers below are the minimum suggested list of Icon sizes that should be included. These can contain transparent attributes. - 16x16 – used for legacy default toolbar button size. - 18x18 – used for Toolbar Icon non-HiDPI. The toolbar area has space 18x18 pixels for each button icon. - 24x24 – used for customize toolbar area, if Toolbar button is hidden by dragging it into the customize toolbar box. The Toolbar button will then appear using the 24x24 graphic size. - 32x32 – used for menu panel Icon non-HiDPI. (For the Add-on extension list, where all installed extensions are displayed. The menu panel area has space for 32x32 pixels per icon. - 36x36 – used for Toolbar Icon HiDPI. - 64x64 – used for menu panel icon HiDPI. (Also for Add-on extension list. For legacy versions of Firefox, this will be reduced to 48x48 for use on the extension list. Reference: https://developer.mozilla.org/en-US/Add-ons/SDK/Low- Level_APIs/ui_button_action#ActionButton(options) Chrome Buttons According to the Google website – “Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG.” (https://developer.chrome.com/apps/manifest/icons) “You may provide icons of any other size you wish, and Chrome will attempt to use the best size where appropriate. For example, Windows often requires 32-pixel icons, and if the app includes a 32-pixel icon, Chrome will choose that instead of shrinking a 48-pixel icon down. However, you should ensure that all of your icons are square, or unexpected behavior may result.” The following Icon sizes are recommended: - 16x16 – extension’s favicon - 19x19 – default Toolbar Button Icon size. - 32x32 – for Windows purposes. If a shortcut is added to the desktop for a webpage, then the 32x32 size will be used. If not available, Chrome will reformat another icon size to 32x32. - 38x38 – large default toolbar button icon - 48x48 – used by the Extensions Management Page (chrome://extensions), to display logo next to the Extension Name. - 64x64 – optional - 128x128 – used by the Chrome Browser Installation and Removal prompts, and the Chrome Web Store.
  • 2. 2 – © 2015, 2020 copyright Liquidity Lighthouse, LLC. Safari Buttons .png format - 16x16 – for toolbar button. Most of the icon will be transparent. The pixels for the center part of the logo that should be displayed, can be drawn with either 256 or 16 colors. - 24x24 – for toolbar button, if a large font size is being used. Same characteristics as 16x16. - 32x32 – for the Extensions panel. Since colors can be used for this graphic, there is no need for transparency. 256 colors work well. Apple explained the Icon color formatting in further detail at: https://web.archive.org/web/20160114072049/https://developer.apple.com/library/safari/documentation/Tools/Conc eptual/SafariExtensionGuide/AddingButtonstotheMainSafariToolbar/AddingButtonstotheMainSafariToolbar.html
  • 3. 3 – © 2015, 2020 copyright Liquidity Lighthouse, LLC. Internet Explorer .ico format 256 or 16 colors are recommended, depending on planned backward browser compatibiity. 16x16 – Small Toolbar/Commandbar button size 24x24 – Large Toolbar/Commandbar button size The FirstButton for Internet Explorer Installer documentation suggests additional Icon sizes (20x20, 32x32, and 48x48) in its collection – these are used for additional Windows purposes. (Windows includes the numbers as part of the string designating the location of the icon for Internet Explorer). All of the below .ico files contain multiple icons, sized at 16x16, 20x20, 24x24, 32x32, and 48x48. 1 For IE7, IE8, IE9, IE10, IE11 (desktop mode), this value is used for HotIcon and Icon sources For IE6, on Windows XP, this is used for Icon value for ToolbarButton (256 colors) (contains icon sizes 16x16, 20x20, 24x24, 32x32, 48x48) 2 For IE6, on Windows XP, this is used for HotIcon value for ToolbarButton (256 colors, but grey toned) (contains icon sizes 16x16, 20x20, 24x24, 32x32, 48x48) 3 For Windows 2000, IE 5.5 or 6, this is used for Icon (256 colors, suitable to IE6) (contains icon sizes 16x16, 20x20, 24x24, 32x32) 4 For Windows 2000, IE 5.5 or 6, this is used for HotIcon [Mouse is over ToolbarButton] (256 colors, but grey toned) (contains icon sizes 16x16, 20x20, 24x24, 32x32) 5 For Windows 98, Me, or NT, this is used for Icon value for ToolbarButton (16 colors) (contains icon sizes 16x16, 20x20, 24x24, 32x32) 6 For Windows 98, Me, or NT, this is used for HotIcon [Mouse is overToolbarButton] (16 colors, but grey toned) (contains icon sizes 16x16, 20x20, 24x24, 32x32)
  • 4. 4 - © 2016, 2018-2020 copyright Liquidity Lighthouse, LLC. Please send questions or concerns regarding this document to documents@liquiditylighthouse.com. NO WARRANTIES. Liquidity Lighthouse, LLC expressly disclaims any warranty for the SOFTWARE PRODUCT , THE SOFTWARE PRODUCT AND ANY RELATED DOCUMENTATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NONINFRINGEMENT. Limitation of Liability To the maximum extent permitted by applicable law, in no event shall Liquidity Lighthouse , LLC or its suppliers be liable for any special,incidental, indirect, or consequential damages whatsoever(including, without limitation, damages forloss of business profits, business interruption, loss of business information, or any other pecuniary lo ss) arising out of the use of or inability to use the SOFTWARE PRODUCT or the provisionof or failure to provide Support Services. By using the Installation Software, you agree not to assertany intellectual property rights, including but not limited to, claims of trademark infringement, against Liquidity Lighthouse, LLC or its suppliers, now or in the future. Liquidity Lighthouse, LLC PO Box 211091 Bedford, TX 76095 FirstButton and Liquidity Lighthouse are trademarks of Liquidity Lighthouse, LLC.