Html icon google chrome

How to Use Google Icons in HTML & CSS?

Icons are visual representations of different actions, programs, or files and can play a very significant role in website design. They can enhance the overall look of the website and prove to be a good source of attracting more audience to your website. Icons provide easy navigation, thereby, increasing user experience. There is a vast range of icons that you can add to your website, however, this article is designed to guide you on how to use Google Icons in HTML & CSS.

Topics explored in this write-up are:

What are Google Icons?

Google provides a huge variety of icons (a total of 750) that are regarded as Material Design Icons. These icons are plain yet modern and represent actions or objects commonly used. For instance, a dustbin icon represents the “delete” action. These icons are supported by all present-day browsers. The screenshot attached below shows some of the material design icons.

Now that we know what google icons are, let’s learn how to add them to web pages.

How to add a Google Icon?

For the purpose of adding google material design icons to your websites follow the below-mentioned steps.

Step 1
First step is to add the link of material-icons font library in the section of your HTML file. Here is how you do it.

Step 2
Once you have added the link of the material-icons library, the next step is to add the class “material-icons” in the or tag of the section and also add the name of the icon.

Example 1
In this example, a settings icon is being added in the web page.

Settings icon successfully added.

Example 2
In the example below, a logout icon is being added in the web page.

Logout icon successfully inserted.

You can also alter the size of these material design icons using CSS. Let’s explore it in detail.

Resizing a Google Icon

You can alter the size of google material design icons according to your desire using CSS. Follow the steps mentioned in this section in order to resize your google material design icon.

Step 1
In the tag using the material-icons class define the size of the icon, for example.

Step 2
Use the same class in the tag along with the icon name.

Example
Suppose, you want to set the size of the settings icon to 48px.

.material-icons.md- 48 { font- size : 48px; }

Size of the settings icon successfully changed.

Besides size, you can also modify the color of the google icons. Let’s see how it is done.

Modifying the Color a Google Icon

For the purpose of changing the color of google material design icons follow the same steps as mentioned in the above section with a slight difference that along with the font-size you can have to define the color using the color property of CSS.

Example
Suppose, you want to change the color of settings icon to blue.

.material-icons.md- 48 { font- size : 48px; color : blue; }

The color of the settings icon successfully changed.

Conclusion

To embed Google Icons in your HTML web pages you have to add the link of material-icons font library in the section of your HTML file and then add the class material-icons in the or tag of the section along with the name of the icon. You can also alter the size and color of the icons through CSS by defining them in the tag using the material-icons class. This write-up discusses how to use google icons in HTML & CSS in depth with the help of appropriate examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

Источник

chrome.browserAction

Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup.

In the following figure, the multicolored square to the right of the address bar is the icon for a browser action. A popup is below the icon.

If you want to create an icon that isn’t always active, use a page action instead of a browser action.

# Manifest

Register your browser action in the extension manifest like this:

 
"name": "My extension", 
. 
"browser_action":  
"default_icon":  // optional 
"16": "images/icon16.png", // optional 
"24": "images/icon24.png", // optional 
"32": "images/icon32.png" // optional 
>, 
"default_title": "Google Mail", // optional, shown in tooltip 
"default_popup": "popup.html" // optional 
>, 
. 
>

You can provide any size icon to be used in Chrome, and Chrome will select the closest one and scale it to the appropriate size to fill the 16-dip space. However, if the exact size isn’t provided, this scaling can cause the icon to lose detail or look fuzzy.

Since devices with less-common scale factors like 1.5x or 1.2x are becoming more common, you are encouraged to provide multiple sizes for your icons. This also ensures that if the icon display size is ever changed, you don’t need to do any more work to provide different icons!

The old syntax for registering the default icon is still supported:

 
"name": "My extension", 
. 
"browser_action":  
. 
"default_icon": "images/icon32.png" // optional 
// equivalent to "default_icon": < "32": "images/icon32.png" > 
>, 
. 
>

# Parts of the UI

A browser action can have an icon, a tooltip, a badge, and a popup.

# Icon

The browser action icons in Chrome are 16 dips (device-independent pixels) wide and high. Larger icons are resized to fit, but for best results, use a 16-dip square icon.

You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs—such as smooth animation—using the canvas element.

Static images can be in any format WebKit can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.

To set the icon, use the default_icon field of browser_action in the manifest, or call the browserAction.setIcon method.

To properly display icon when screen pixel density (ratio size_in_pixel / size_in_dip ) is different than 1, the icon can be defined as set of images with different sizes. The actual image to display will be selected from the set to best fit the pixel size of 16 dip. The icon set can contain any size icon specification, and Chrome will select the most appropriate one.

# Tooltip

To set the tooltip, use the default_title field of browser_action in the manifest, or call the browserAction.setTitle method. You can specify locale-specific strings for the default_title field; see Internationalization for details.

# Badge

Browser actions can optionally display a badge—a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.

Because the badge has limited space, it should have 4 characters or less.

Set the text and color of the badge using browserAction.setBadgeText and browserAction.setBadgeBackgroundColor , respectively.

# Popup

If a browser action has a popup, the popup appears when the user clicks the extension’s icon. The popup can contain any HTML contents that you like, and it’s automatically sized to fit its contents. The popup cannot be smaller than 25×25 and cannot be larger than 800×600.

To add a popup to your browser action, create an HTML file with the popup’s contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the browserAction.setPopup method.

# Tips

For the best visual impact, follow these guidelines:

• Do use browser actions for features that make sense on most pages.
• Don’t use browser actions for features that make sense for only a few pages. Use page actions instead.
• Do use big, colorful icons that make the most of the 16×16-dip space. Browser action icons should seem a little bigger and heavier than page action icons.
• Don’t attempt to mimic Google Chrome’s monochrome menu icon. That doesn’t work well with themes, and anyway, extensions should stand out a little.
• Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
• Don’t constantly animate your icon. That’s just annoying.

# Examples

You can find simple examples of using browser actions in the examples/api/browserAction directory. For other examples and for help in viewing the source code, see Samples.

Источник

HTML: Создание и добавление фавикона

Фавикон (favicon — это сокращение от Favorite icon, в переводе с анг. означает любимый значок) — иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

• Фавикон должен быть выполнен в том же стиле, что и сайт, так как он является своего рода визитной карточкой вашего проекта.
• Изображение, которое вы хотите использовать в качестве фавикона, должно быть предельно простым для понимания, лучше используйте всего несколько элементов.
• Следите за тем, что бы фавикон, максимально передавал суть вашего сайта, бизнеса, проекта.
• Создавать картинку лучше так, что бы она вызывала у посетителей вашего сайта ассоциации. Например, иконка телефона, для салона мобильных телефонов.

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

Добавление фавикона

Примечание: обратите внимание, что для каждой веб-страницы или для каждого раздела сайта можно указать свой собственный фавикон.

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

Google Chrome	Internet Explorer	Firefox	Opera	Safari
href=»httр://mysite.ru/myicon.ico»>	Да	Да	Да	Да	Да
	Да	Да (с IE 11)	Да	Да	Да
	Да	Да (с IE 9)	Да	Да	Да
	Да	Да (с IE 11)	Да	Да	Да
	Да	Да (с IE 11)	Да	Да	Да
	Да	Да (с IE 9)	Да	Да	Да

Не стоит недооценивать значение фавикона, особенно сегодня, когда в сети Интернет находятся миллиарды сайтов и страниц, часть из которых являются вашими конкурентами. Иконка сайта, как и логотип, способствует его запоминаемости и узнаваемости. Не следует упускать дополнительную возможность, улучшить свой ресурс.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник