Browser icon: Browser Icons & Symbols

Разное 

Create a custom icon set

This post is also available in: 日本語 Français Español Deutsch Српски Polski Português Български

Vivaldi introduces support for custom icon set for all toolbar buttons. Here’s how to best handle resources when creating your own icons.

Edit a theme

You can populate all the theme buttons right in the Vivaldi UI. To place your own icons, go to Settings > Themes > Editor > Icons to see a list of all available toolbar buttons sorted by category, and the interface to place your own icons. Custom icons will be included in an exported theme.


Button icon editor

Image size

Vivaldi supports 28 × 28 pixels bitmap or SVG images in all toolbars. Larger images will be scaled to this size.

Icon layout

Vivaldi icon glyphs are sized at, or around 16 pixels. Your icon should leave margin around its edges, not filling the entire canvas, which can lead to big icons in a cramped toolbar. However feel free to use the available room for shapes spanning outside the imaginary boundary, or for bigger icons.


Suggested icon placement on canvas

Bitmap resources

Vivaldi supports bitmap images in GIF, JPG, JPEG, PNG, and WEBP format. Consider using a format that supports the alpha channel mask. Icons should maintain sufficient contrast against both light and dark background colors, as your theme icon set can be used in other themes as well.

Bitmap resources are best exported at double their target size to render sharply on high DPI displays and to leave room for UI scaling, i.e. export images at 56 × 56 pixels to double the resolution of the 28 pixel target.

SVG resources

Aside of bitmaps, Vivaldi supports the Scalable Vector Graphic (SVG) format, which may be produced in a few different ways.

If you’d like your icon to inherit current theme colors, do not use any fill color definitions, or use the currentColor keyword. That ensures proper color inheritance in all the different toolbar and theme combinations.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="currentColor"
>
  <!-- inherits fill color from current Vivaldi theme -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

SVG color inheritance example

On the other hand you can control all stroke and fill colors locally, independent of current theme colors. In that case you want to ensure all colors are set, so as not to inherit unexpected theme colors.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="#000"
>
  <!-- inherits default fill color #000 specified above -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

SVG code example with own color definitions

Whether you choose to use fill or stroke-based icons is up to you.

In the later case define stroke properties inline.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <!-- no fill; stroke color inherited from current Vivaldi theme -->
  <path
    d="..."
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Stroke-based SVG icon example

SVG filters and masks

Filters and masks in SVG are referenced by ID, which needs to be unique. If the ID is not unique, a reference to it could be lost, and the filter or mask will break. Maintaining a unique ID for the same filter across multiple files is tedious and won’t prevent ID duplicity in the Document Object Model (DOM).

To overcome the potential issues, consider flattening the graphic instead of using masks, or replacing SVG filters with inline Cascading Style Sheets (CSS). For example to replace feDropShadow SVG glow effect:

<svg
  xmlns="http://www. w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <defs>
    <filter>
      <feDropShadow
        in="enlarged"
        dx="0"
        dy="0"
        stdDeviation="40"
        flood-color="cyan"
      />
    </filter>
  </defs>
  <g filter="url(#neonGlow-034)">
    <rect x="7" y="7" rx="2" />
  </g>
</svg>

Original SVG filter

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <g>
    <rect x="7" y="7" rx="2" />
  </g>
</svg>

Similar effect achieved by inline CSS

Minimized SVG

It is good idea to minimize exported SVG icons with a tool such as SVGO. Your editor may also minimize SVG on export, but this may come with some caveats, such as maintaining unique IDs.

SVG file encoding

SVG files must be UTF-8 encoded. Import sanitation strips all JavaScript and <style> elements (inline style attributes are allowed).

Theme archive format

The current Vivaldi theme format was expanded to support icons for a growing number of toolbar buttons or command chains. Single icon resource is exported in a theme archive JSON as button ID and image path pair.

"buttons": {
  "buttonId": "imagefile01.png"
}

If you are batch-processing the icon images you may consider exporting your custom theme in Vivaldi and updating the images by replacing them in the resulting ZIP archive.

Figma template

If you want to start creating a new icon set based off the official Vivaldi UI icons, we have created a Figma template for the occasion. The URL to the template is https://www.figma.com/community/file/1214878626987427743.

Let us know if something’s missing from this article. That’s the only way we can improve.

Как изменить свой Favicon (значок браузера) на Squarespace

Веб-дизайнSquarespace

Написано Хелен Раджан

Или, говоря простым языком, «

как изменить маленькую иконку вашего веб-сайта »

Вы знаете этот маленький серый квадрат, который вы видите на панели браузера, когда находитесь на своем веб-сайте Squarespace.

?

Да… этот. это твой Squarespace значок , также известный как значок браузера Squarespace. И как бы я ни любил Squarespace, факт того, что ваш сайт является сайтом Squarespace, совершенно бесполезен, не говоря уже о том, что вы упускаете прекрасную возможность выглядеть профессионалом следующего уровня и постоянно использовать свой невероятный брендинг.

В этом блоге рассказывается все, что вам нужно знать о фавиконах (иконка браузера, также известная как значок браузера) на Squarespace, в том числе о том, что такое фавикон?! Советы по дизайну, чтобы ваш значок выделялся из толпы, какой тип файла использовать и как создать и экспортировать свой значок за 3 простых шага.

Но обо всем по порядку…

Что такое Favicon или значок браузера?

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

Что делает фавикон хорошим?

Если вы часто видите, как люди ошибаются в дизайне своих фавиконов, то даже крупные организации (и веб-дизайнеры — упс!) иногда выбирают фавиконы, которые выглядят далеко не фантастически.

  1. Ваш фавикон должен быть простым (фавикон абсолютно крошечный, поэтому любая деталь будет потеряна). Избегайте сложного дизайна, шаблонов или логотипов, содержащих полные слова — они будут потеряны, когда люди будут смотреть на ваш значок.

  2. Ваша фавиконка должна соответствовать вашему бренду — подмарка (небольшой компонент вашего логотипа) или простая иконка в цветах вашего бренда — вот несколько хороших вещей, которые можно использовать для дизайна вашей фавиконки

  3. Ваш фавикон должен выделяться! Рассмотрите браузеры как с темной, так и со светлой темой. Темные значки (например, черные буквы легко исчезают в браузерах с темной темой, которые используются все чаще и чаще, поскольку люди стремятся защитить свои глаза от бликов компьютера. Точно так же светлые значки могут размываться на фоне в светлой теме браузера. Я поклонник использования круга или квадрата с закругленными краями, который включает в себя как темные, так и светлые элементы, поэтому он будет хорошо отображаться в обоих случаях, а не, например, две темные буквы на прозрачном фоне, которые исчезнут на темном фоне браузера.0003

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

Как создать значок для вашего веб-сайта Squarespace за 3 простых шага

Существует так много вариантов программ, чтобы быстро создать значок для вашего веб-сайта Squarespace. Мне лично нравится пакет Adobe, особенно Adobe Illustrator. Но вы также можете использовать Canva — даже бесплатной версии будет достаточно, чтобы создать свой фавикон.

  1. Решите, хотите ли вы иметь сплошной цвет фона (как я упоминал выше, я фанат круга или квадрата с закругленными краями) в качестве фона. Используйте для этого один из цветов вашего бренда.

  2. Добавьте свои данные сверху. Я предлагаю субмарку или инициалы вашего веб-сайта или даже ваш логотип, если это достаточно просто. Убедитесь, что этот цвет достаточно контрастирует с выбранным вами фоновым цветом.

  3. Уменьшите масштаб своего Favicon, чтобы увидеть его в «реальном размере» и убедиться, что он выделяется. При необходимости внесите любые коррективы. Затем экспортируйте в PNG с прозрачным фоном, чтобы не получить уродливый белый квадрат позади!

Какой тип файла следует использовать для фавиконки Squarespace?

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

Squarespace принимает файлы PNG или ICO для вашего фавикона. Обратите внимание, что файлы PNG не отображаются в Internet Explorer. Нет вашего изображения в ICO? См. здесь, как преобразовать изображение в файл ICO.

Нравится читать? Прочтите остальные мои блоги, связанные с Squarespace, в бэк-каталоге…

Как изменить свой фавикон AKA

как изменить маленькую иконку на вашем веб-сайте

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

  1. В боковом меню выберите «Дизайн»

  2. Выберите значок браузера (это другое название фавикона)

  3. Загрузите значок браузера (известный также как favicon)

Поздравляем! Вы добавили свой значок Squarespace Favicon и выглядите как профессионал!

Нашли это полезным и хотите больше подобных?

Получайте советы по малому бизнесу, веб-дизайну и Squarespace прямо в свой почтовый ящик…

Новое в Gram…

Хелен Раджан

Добавить значок браузера (Favicon) в Squarespace 7.

0 и 7.1 — Big Cat Creative

Squarespace Советы

Автор Erica Hartwick

Этот пост может содержать партнерские ссылки. Мы можем получать комиссию за покупки, сделанные по этим ссылкам (бесплатно для вас, конечно! 🙂)

Во-первых, вы можете подумать, что такое значок браузера? Если вы так думаете, то вам нужно это руководство как можно скорее.

Значок браузера , также известный как favicon, представляет собой крошечный логотип, который отображается рядом с названием вашего веб-сайта в вашем браузере:

Я не могу сказать вам, сколько людей, которых я вижу, используют Squarespace сайты и не имеют фавикона. Вы можете очень легко идентифицировать этих людей, так как все они используют фавикон Squarespace по умолчанию:

.
Ага. .. вы уже видели этот маленький черный ящик, не так ли?

С Squarespace это так просто добавить фавикон, что буквально нет оправдания тому, чтобы его не иметь. Они заставят ваш сайт выглядеть гораздо более профессиональный и персонализированный.

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

Загрузите фавиконы здесь!

Как добавить значок браузера на сайт Squarespace в Squarespace 7.0:

1. Войдите в админку вашего сайта Squarespace

2. Нажмите Дизайн > Логотип и название:

  3. 9001 2 Прокрутите вниз до ‘Значок браузера’ (Favicon)

4. Нажмите «Добавить фавиконку» для загрузки и загрузите свое собственное изображение или одну из моих бесплатных фавиконок.

Примечание: Если вы создаете свой собственный, рекомендуемый размер — 32×32 пикселя PNG на прозрачном фоне. PNG не поддерживаются Internet Explorer, хотя я не уверен, кто использует Internet Explorer в наши дни. Если вы хотите удовлетворить этих людей, используйте JPG, но, к сожалению, с JPG у вас не будет такой роскоши, как прозрачный фон.

5.  Убедитесь, что вы нажали , сохранить в левом верхнем углу.

6. Может пройти некоторое время, прежде чем он появится в вашем браузере, поэтому дайте ему минуту и, возможно, несколько обновлений.

Как добавить значок браузера на сайт Squarespace в Squarespace 7.

1:

1. Войдите в админку вашего сайта Squarespace

2. Нажмите Дизайн > 900 11 Значок браузера

3. Нажмите «Добавить значок» для загрузки и загрузите свое собственное изображение или один из моих бесплатных значков.

4.  Убедитесь, что вы нажали , сохранить в левом верхнем углу.

5. Может пройти некоторое время, прежде чем он появится в вашем браузере, поэтому дайте ему минуту и, возможно, несколько обновлений.

Готово! Это так просто! Обновление может занять несколько минут, возможно, вам потребуется обновить страницу (или очистить кеш!)

Фавикон делает ваш бренд более профессиональным. На самом деле не имеет значения, что это такое, если оно у вас есть и если это не коробка Squarespace! (Проблема с его использованием в том, что его используют все остальные!)

Я только что обновил этот веб-сайт одним из моих бесплатных фавиконов.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *