Иконки для браузера – браузер Иконки - скачать 275 бесплатно Иконки PNG, SVG, ICO или ICNS

Содержание

15+ наборов иконок браузеров (опера, хром, firefox и др.)

Недавно для работы мне нужны были иконки браузеров, поэтому пришлось немного поискать их в интернете. Как правило, все подобные наборы содержат топовое ПО — Оперу, Firefox, Хром, Safari, Internet Explorer плюс несколько менее популярных — RockMelt, Maxthon, Chromium и т.п. В одном из вариантов есть даже иконка для приложения от Яндекса.

Придумать что-то оригинальное в визуальном плане здесь сложно, поэтому основные отличия между иконками браузеров заключаются в их форме и стилистике. Есть круглые, квадратные, с подложкой и без. Несколько материалов имеют плоский стиль, много ярких картинок и один монохромный набор. По форматам чаще всего встречаются Png изображения, хотя есть и иконки браузеров ico (которые можно использовать для рабочего стола).

Итак, давайте рассмотрим найденные наборы.

Web Browser Icon Pack

Содержит 12 вариаций для 6-ти браузеров (с эффектом блеска и без).

The Browsers By Morcha

Iconspedia позволяет скачать отдельно картинки в разных форматах (в том числе и мини иконки), хотя изначально на сайте создателя все материалы загружались в одном архиве. Картинки яркие, как по мне, одна из лучших подборок.

Free Flat Browser Icons

Популярность плоского metro стиля подтверждается наличием сразу нескольких подобных наборов иконок браузеров.

Browsercons

Совсем мелкие по размерам бесплатные пиктограммы не всегда позволяет понять что же изображено на картинке, но вот большие иконки вполне неплохо смотрятся.

Square Browser Icons

Квадратная почти что пиксельная графика для изображений браузеров — весьма оригинально.

CS Browser Icons

Стильные иконки с отблеском.

Browser Icons

The Browser Wars — Dock Icons

Beautiful flat style metro browser

iOS 7 Style Browser Icons

Здесь, как видите, есть иконка Яндекс браузера. Да и вообще достаточно много разного софта представлено по сравнению с другими подборками.

Web Browser Icons

Meliae Browsers

Browsers — Navigateurs

Browser Paradise — Windows

Кстати, нужные нам материалы можно найти также и в специальных сервисах поиска иконок. Вводите в строке поиска слово browser и получаете соответствующие результаты.

Findicons

Iconarchive

Iconfinder

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

design-mania.ru

Favicon.ico или иконка в адресной строке браузера / Хабр

Сразу отмечаю, что статья из разряда «для самых маленьких». Просто пощу ее, вдруг пригодится кому-нибудь.

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикруть к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.

1. Название иконки должно быть favicon.ico, т.к. некоторые старые браузерв не смогут опознать ее именно как ярлык сайта.
2. Подключение иконки к документу осуществляется следующим кодом. Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.

3. Размер иконки вы можете выбрать от 16х16 до 48х48, чем больше иконка тем она будет симпатичнее, в случае, когда пользователь вздумает поместить ярлык на ваш сайт на свой рабочий стол, например. Но! Мы живем в реальности которая называется “Все мы любим Internet Explorer”. Поясняю, иконки размером превышаюзие 16х16 px попросту проигнорируются IE 6.0 и ниже. Однако существует возможность в один файл .ico упаковать несколько изображение, как разных по размеру, так и по содержимому, пользуйтесь этой возможностью.
4. Где же разместить файл с иконкой сайта? Для надежности просто положите его в корневую директорию вашего сайта.

Грабли.

1. Как указал выше, IE lt 6.0 не понимает иконок, превышающих 16х16 пикселей.
2. IE 6.0 и ниже отобразит иконку только после добавления странички в избранное и перезагрузки. Ну любит MS перезагружать все и вся ;-).
3. Если IE 6.0 и ниже и после этого не отобразит ее, то попробуйте почистить кэш браузера.
4. Если и после этого иконка не появится там, где ей положено быть необходимо удостовериться, что ваш сервер передает иконку в браузер и отображает ее, а не передает, как файл и предлагает вам его сохранить. Это проверяется простым путем ввода в браузер адреса вашего сайта и имени иконки, например yoursite.com/favicon.ico, при условии конечно, что иконка лежит в корневой директории. Во втором случае ваш сервер не настроен на отображение файлов .ico. Для того чтобы исправить эту ситуацию вам необходимо создать в корне сайта файл .htaccess и добавить в него следующую строку AddType image/x-icon .ico.

Ссылки по теме:

1. Как добавить собственную иконку сайта в адресную строку и в закладки браузера? www.htmlbook.ru/faq/?a=28
2. Favicon — иконка в адресной строке. lines.net.ua/index.php?loc=articles&category=webdesign&art=3
3. Иконка в адресной строке. www.codenet.ru/webmast/favicon.php

4. favicon.ru — favicon.ico generator and editor. favicon.ru

Кросспост из webdev.lovata.com.

habr.com

html — Как добавить значок вкладки браузера (favicon) для веб-сайта?

Существует несколько различных значков и даже заставки, которые вы можете установить для различных устройств. Этот ответ объясняет, как поддержать их всех.

Вот некоторые фрагменты, которые я использовал с соответствующими ссылками, где я собрал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всеми этими встроенными (включая файлы с образцами изображений).

Добавьте в свой html-заголовок следующую надпись. Заключенные разделы полностью необязательны. В то время как разделы без комментирования рекомендуются для охвата всех иконок. Не бойтесь, большинство, если это комментарии, чтобы помочь вам.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Мой файл browserconfig.xml. Полное объяснение выше.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Мой файл manifest.json. Полное объяснение выше.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решили поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатег):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Всего накладных расходов

Если вы выберете комментарии, содержащие 3 Кбайт дополнительного HTML, если вы не поддерживаете всплывающие экраны размером 1,5 КБ. Если вы используете сжатие GZIP в своем HTML-контенте, что каждый должен делать в наши дни, это оставляет вам около 634 байтов накладных расходов для каждого запроса для поддержки всех платформ или 446 байтов без всплывающих окон. Я лично считаю, что стоит поддерживать IOS, Android и Windows-устройства, но по своему выбору я просто даю варианты!

Боковое примечание о текущей веб-иконке/всплывающем экране/ситуации настроек

Эта ситуация с конкретными значками поставщика, заставками и специальными тегами для управления веб-браузером или закрепленными значками смехотворна. В идеальном мире мы все будем использовать файл favicon.svg, который может выглядеть хорошо на любом уровне и может быть помещен в корень страницы. Только FireFox поддерживает это на момент написания статьи (см. CanIUse.com).

Однако в наши дни значки не являются единственными настройками, есть несколько других специфических параметров поставщика (показано выше), но файл favicon.svg будет охватывать большинство случаев использования.

Обновление

Обновлен, чтобы включить новую версию Android/Chrome M39 + favicon/theming. Интересно, что они пошли с аналогичным подходом к Microsoft, но используют JSON файл вместо XML.

qaru.site

favicon.ico и другие форматы, поддержка браузерами

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах. В зависимости от браузера и контекста они могут отображаться:

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

Favicon традиционно ассоциировался с сайтом, но так как он добавляется через разметку, то на каждой странице можно поставить свой favicon, если хотите. Можно даже поставить отдельный favicon для всех запросов страницы.

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

Мы не будем уделять время кэшированию браузера. Будем поддерживать простоту. Оказывается, с ростом количества платформ и клиентов с поддержкой веб-страниц растет и сложность добавления маленькой иконки так, чтобы она правильно отображалась и удовлетворяла требованиям всех платформ.

Что такое формат favicon .ico (ICO)?

Прежде чем переходить к подробностям, давайте быстро разберем формат ICO.

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Принимаются и другие форматы изображений, так как favicon больше не ограничен форматом ICO:

Подключение иконок через Web App Manifest: manifest.json

Вместе с Progressive Web Apps (PWAs) вы часто будете слышать про файл manifest.json. Файл manifest.json – это JSON файл, позволяющий настраивать внешний вид и запускать действия веб-приложения, которое добавлено в закладки или на домашний экран устройства.

manifest.json позволяет настраивать ряд параметров, среди которых внешний вид иконки, используемой для запуска веб-приложения.

Более подробно о manifest.json и его возможностях читайте в нашей статье manifest.json.

Favicon на домашнем экране устройства Android

Манифест содержит свойство массива icons, с помощью которого можно задавать список объектов изображений, каждое из которых может обладать свойствами src, sizes и type, описывающими иконку.

Файл manifest.json с двумя иконками может выглядеть следующим образом:

{ «name»: «mobiForge», «short_name»: «mobiForge», «icons»: [ { «src»: «/icon-144×144.png», «sizes»: «144×144», «type»: «image/png» }, { «src»: «/icon-192×192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «mobiForge»,

«short_name»: «mobiForge»,

«icons»: [

{

«src»: «/icon-144×144.png»,

«sizes»: «144×144»,

«type»: «image/png»

{

«src»: «/icon-192×192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

Используйте код ниже для ссылки на манифест, который в нашем случае сохранен в корне:

Подключение иконок через файл browserconfig.xml

browserconfig.xml – это XML файл, с помощью которого можно задавать иконки для Microsoft Windows. Он также размещается в корне сайта. Его код:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <square310x310logo src=»/mstile-310×310.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Нас интересуют здесь тег tile и его дочерние элементы. Код сверху определяет иконку с двумя размерами 150×150 и 310×310. Подробнее об этих размерах позже.

Так много способов подключения иконки – какой использовать?

Столько способов подключения favicon. Вы спросите: «какой же использовать?». Теперь самое забавное – все! ОК, весело? Не совсем.

Почему столько много способов подключения favicon?

Ранее мы говорили, что почти все браузеры поддерживают favicon.ico 16×16 и 32×32 в корневой папке. Так почему бы не пойти этим путем? Нам нужно поддерживать разные платформы и плотность пикселей на экране, чтобы иконка всегда хорошо смотрелась на разных размерах и в разных контекстах.

Во-первых, иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

На мобильных ОС, например, нужно также подготовить иконку для отображения на домашнем экране. У каждой ОС свои особенности и набор предпочтительных размеров иконок для разных размеров экрана. Файлы Web App Manifest и browserconfig.xml дают разработчику больше контроля над представлением и запуском сайта на разных платформах.

Какие размеры favicon использовать?

У нас есть разные способы подключения иконок. Давайте узнаем, какие размеры использовать. С появления атрибута sizes в HTML5 теперь можно указывать favicon в формате PNG:

Закрепленные вкладки в Safari

Safari использует SVG иконки на закрепленных вкладках. Для этого используется SVG изображение (поэтому размер пикселей неважен):

Плитки Microsoft Windows

Даже если вы не хотите заботиться об ОС Windows Phone mobile (на это есть хорошая причина, она была заморожена), вам все еще нужно думать об иконках на плитках Windows. Они используются в Windows 8 и выше, на планшетах, ноутбуках и ПК.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Плитки Microsoft Windows

Windows 8 и выше использует формат плитки для отображения иконок. Руководство по их проектированию довольно сложное. Мы лишь рассмотрим необходимые размеры.

Базовые размеры плитки, определенные Microsoft:

70×70 (маленькая плитка)

150×150 (средняя плитка)

310×150 (широкая плитка)

310×310 (большая плитка)

В Windows 8.0 и IE 10 плитку 144×144 можно задать в разметке так:

С версии 8.1 можно использовать файл browserconfig.xml и не писать это в head.

Запутаем вас немного: чтобы покрыть большой диапазон устройств, Microsoft рекомендует использовать изображения в 1.8 раза больше размера стандартной плитки, чтобы их можно было увеличить или уменьшить при необходимости.

Наш browserconfig.xml теперь ссылается на изображения плиток, увеличенные на 1.8, и выглядит следующим образом:

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square70x70logo src=»/ms-tile-126.png»/> <square150x150logo src=»/ms-tile-270.png»/> <wide310x150logo src=»/ms-tile-558×270.png»/> <square310x310logo src=»/ms-tile-558.png»/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

Edge и IE11 автоматически запрашивает файл browserconfig.xml. Однако конфиг файл можно явно предоставить следующим образом, что позволяет изменить его имя и путь:

Собираем все вместе

Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:

favicon.ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

И 2 конфиг файла:

manifest.json

browserconfig.xml

Разметка favicon

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

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

Предупреждение: даже если у вас не будет проблем с созданием всех файлов, результат в определенных контекстах вас может удивить.

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

Например, прозрачность хорошо работает на Android, но на iOS она превращается в черный цвет. Во многих случаях это неприемлемо.

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

Вывод – нужно проверять рендер favicon на всех платформах.

Нам действительно нужны все эти favicon?

Для такой маленькой иконки очень много работы.

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

Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.

Пусть браузер сам занимается уменьшением

Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.

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

Есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах. В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.

Минимальный набор иконок

1. Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

2. Файл manifest.json, использующий изображение chrome:

{ «name»: «», «short_name»: «», «icons»: [ { «src»: «/icon-192.png», «sizes»: «192×192», «type»: «image/png» } ], «theme_color»: «#ffffff», «background_color»: «#ffffff», «display»: «standalone» }

{

«name»: «»,

«short_name»: «»,

«icons»: [

{

«src»: «/icon-192.png»,

«sizes»: «192×192»,

«type»: «image/png»

}

«theme_color»: «#ffffff»,

«background_color»: «#ffffff»,

«display»: «standalone»

}

3. Файл browserconfig.xml, использующий изображение mstile

<?xml version=»1.0″ encoding=»utf-8″?> <browserconfig> <msapplication> <tile> <square150x150logo src=»/mstile-150×150.png»/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>

<?xml version=»1.0″ encoding=»utf-8″?>

<tile>

</tile>

</msapplication>

</browserconfig>

4. Следующая разметка

Данный набор иконок и разметки был получен с помощью некоторых тонкостей. Рекомендую прочесть, почему именно эти файлы. Например, можно выкинуть следующее:

Мы используем manifest.json для Android, Chrome также будет использовать его, если он объявлен.

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

Будущее favicon

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

SVG favicon

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

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

Чтобы использовать favicon SVG, атрибут sizes необходимо установить в значение any:

Автор: Ruadhán O’Donoghue

Источник: https://mobiforge.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

webformyself.com

Набор иконок для браузеров | Портал графики и дизайна

Иконки

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

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

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

Помимо этого, Вы можете назначить Вашему сайту favicon – это иконка сайта, которая будет отображаться в поле ввода url. Зачем она нужна? Она нужна для более легкого поиска сайта в закладках браузера.

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

Favicon обычно имеет размеры 16х16 пикселей, а используется она в формате ico. То есть название файла-картинки будет таким: favicon.ico. Фавиконку можно не только нарисовать, но и взять как часть любой большой картинки. Также можете взять ее бесплатно из разных коллекций. Для этого наберите в поиске иконки, затем укажите размер 16Х16, после чего поисковик выдаст вам множество вариантов иконок.

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

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

freedizain.ru

Иконки для браузера – браузер Иконки — скачать 275 бесплатно Иконки PNG, SVG, ICO или ICNS

15+ наборов иконок браузеров (опера, хром, firefox и др.)

Favicon.ico или иконка в адресной строке браузера / Хабр

html — Как добавить значок вкладки браузера (favicon) для веб-сайта?

favicon.ico и другие форматы, поддержка браузерами

Что такое favicon?

Что такое формат favicon .ico (ICO)?

Как подключить favicon?

Размещение favicon.ico в корне сайта

Подключение favicon через тег link

Подключение иконок через Web App Manifest: manifest.json

Подключение иконок через файл browserconfig.xml

Так много способов подключения иконки – какой использовать?

Почему столько много способов подключения favicon?

Какие размеры favicon использовать?

Рекомендации Chrome

Рекомендации Safari

Закрепленные вкладки в Safari

Плитки Microsoft Windows

Собираем все вместе

Разметка favicon

Прозрачность и кадрирование: не все иконки одинаково обрабатываются

Нам действительно нужны все эти favicon?

Пусть браузер сам занимается уменьшением

Минимальный набор иконок

Будущее favicon

SVG favicon

Препроцессоры. Быстрый старт

Набор иконок для браузеров | Портал графики и дизайна

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

Рубрики