Png иконки для сайта: Крупнейшая база данных бесплатных иконок, доступных в форматах PNG, SVG, EPS, PSD и BASE 64.

1. На открытых вкладках перед названием сайта. Если вы не загрузили фавикон, у вашего сайта будет стандартный значок в виде черно-белой планеты.

2. В истории просмотров браузера.

3. На панели закладок.

4. В избранном, куда вы сохраняете все интересные страницы.

5. В десктопной и мобильной выдаче Яндекса — как в органике, так и в рекламных объявлениях.

6. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

Где бы вы ни увидели фавиконки, они обращают на себя внимание, помогают запомнить бренд и отличить его от других, повышают узнаваемость компании и создают эффект полноценного бизнеса. Фавиконки любимых брендов вы ни с какими другими не перепутаете. 

Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться.

Краткая техинструкция по фавиконам

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

Формат фавикона

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

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

Сегодня ICO считается уже немного устаревшим форматом, чаще всего предпочтение отдают PNG. Почему именно этот формат? Ответ простой — чтобы при любых обстоятельствах (браузерах и девайсах) сохранять высокое качество фавикона. PNG поддерживается и корректно отображается практически всеми современными браузерами.  

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики. 

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса Can I Use. Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

Размер фавикона

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192.  

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь,  на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

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

Пять лет назад с релизом HTML5 появился атрибут sizes, который значительно облегчает работу с фавиконами. Этот атрибут нужно указывать в формате ширина х высота без единиц измерения (если их несколько, используйте пробел). Например:

<link rel="icon">

<link rel="icon">

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

Как сделать фавикон онлайн

Если у вас возникала мысль просто переименовать файл вашего логотипа в favicon.ico, забудьте — это так не работает. Вас наверняка будут ждать ошибки при отображении фавикона в разных браузерах. 

Как этого избежать?

Способов создать фавикон для сайта несколько:

1. Сделать его в графическом редакторе, например, в Photoshop с помощью специального плагина Favicon.ico. 

2. Нарисовать фавикон в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать его оттуда в уже подходящем формате.

3. Воспользоваться имеющимся у вас изображением (например, вашим логотипом) и загрузить его в онлайн-генератор фавиконов — например, Favicon.by, Realfavicongenerator.net и др.

4. Скачать готовые фавиконы для сайта из специальных банков иконок — например, галерея Findicons. Данная сборка насчитывает более 500 тысяч иконок. 

Когда вы скачаете сгенерированный фавикон, остается только добавить его на ваш сайт. 

Как добавить фавикон на сайт

Сначала загрузите готовый фавикон в корневой каталог сайта с помощью файлового менеджера, например, Filezilla. 

После этого нужно просто вставить следующий код в мета-тег <head></head>:

<head>

  ...

  <link rel="icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">

  <link rel="shortcut icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">

  ...

</head>

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

Дизайн фавикона — когда проще не значит хуже

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

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

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

Можете ли вы в размере 16*16 четко сказать, что изображено на фавиконе? Постарайтесь, чтобы ваш фавикон не содержал мелких деталей, был хорошо различим и не пестрил всеми цветами радуги.

Ассоциируется ли ваш фавикон со сферой, в которой вы работаете, и с дизайном вашего сайта? По одному фавикону на панели закладок можно вспомнить, из какой ниши этот сайт, а иногда — и какой конкретно это сайт, если фавикон сохраняет визуальный стиль бренда. 

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

Теперь, когда вы знаете, как создать красивый фавикон и добавить его на сайт, а будет ли он отображаться в поисковиках? Давайте проверим!

Как проверить фавикон и исправить основные ошибки

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

• Яндекс – https://favicon.yandex.net/favicon/mysite.ru 
• Google – https://www.google.com/s2/favicons?domain=mysite.ru

Есть еще один вариант для проверки фавикона на разных устройствах — с помощью специальных сервисов, например, Realfavicongenerator. 

Если ваш фавикон не отображается в Яндексе или Google, начните с проверки таких моментов:

1. Графическое изображение в формате ico, png или gif находится в корне ресурса?
2. Код, ведущий к изображению, на страницах ресурса прописан правильно?
3. Иконка не размытая и уникальная?
4. Доступен ли файл с фавиконом для сканирования поисковых роботов?

Обратите внимание, что от пути к изображению напрямую зависит его отображение. Если хотите удалить или изменить фавикон, необходимо просто удалить или изменить файл favicon.ico (jpeg, gif, png). 

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

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

Почему фавикон нужен каждому сайту

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

Наш инструмент «Анализ сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

Если фавикон есть, а аудит его не видит — значит, проблема с индексацией или адресом иконки. Проверьте все еще раз. 

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

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

Просмотры: 31 587

Юлия — контент-маркетолог c 10-летним опытом работы в журналистике, копирайтинге, рекламе и PR. Своим опытом и знаниями она делится, создавая полезные статьи про SEO и диджитал-маркетинг для блога SE Ranking и популярных медиа. Когда Юлия не пишет статьи, она осваивает новые асаны, путешествует и помогает волонтерской организации YWCA.

Создание иконок сайтов для iOS и Android

Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.

Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.

iOS Размеры иконки

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

Как Вы возможно заметили, что retina иконки в 2 раза больше предыдущих разрешений. Это из-за того, что retina экраны имеют двойную плотность пикселей. То есть для заполнения того же пространства 57х57рх нужно отрисовать 114х114рх.

Совет: помните, что чем меньше иконка, тем меньше деталей необходимо отрисовать, т.к. их будет видно хуже.

Установка иконок

Если уже устанавливали иконки для сайта, то знаете что это элементарно. просто добавить одну строчку кода в заголовок HTML с ссылками на .ico или .png картинки.

<link rel="icon" href="favicon.ico" type="image/x-icon"/>

Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.

Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.

<link rel="apple-touch-icon" href="apple-icon-57x57.png" />

<link rel="apple-touch-icon" href="apple-icon-72x72.png" />

<link rel="apple-touch-icon" href="apple-icon-114x114.png" />

<link rel="apple-touch-icon" href="apple-icon-144x144.png" />

Специальные эффекты

Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными

Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:

<link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»apple-icon-114×114-precomposed.png» />

 Android и остальные устройства

Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android  и  Blackberry, а так же всех остальных.

Несколько моментов, которые следует держать в голове, когда придумываете favicons. Во-первых,  Apple всегда самостоятельно добавляет определённые эффекты самостоятельно: тени, скруглённые края и глянец. Советую при разработке учитывать это и анализировать как иконка будет выглядеть с такими эффектами.

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

Иконки для вдохновления

Вот пример различных крутых иконок, которые я нашёл на Dribbble. Надеюсь они вдохновят на крутой креатив.

Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.

Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.

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

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

Ещё одна не flat иконка с градиентами и тенями, используемые в небольших количествах.

Цветы и трава выглядит очень реалистичными.

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

Навигация по публикации

20 лучших бесплатных наборов значков

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

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

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

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

1. Noun Project

2. Иконки дизайна материалов

3. Icons8

4. Softies

5. iOS Edge

6. Linearicons

7. Feathers

8. Ionicons

9. Jam

10. Font Tonicons

11. Смешанные компьютерные иконки

12. Wix

13. Мультимедиа

14. Justicons

    0 Line

15. Streamline

16. Иконки Simple Line

17. Minimal Icons

18. Lynny Icons

01.Noun Project

Формат: SVG и PNG

Всего: 2M +

Запущенный в 2011 году Noun Project ежедневно обновляется новыми значками, созданными мировым сообществом профессиональных авторов. В настоящее время он содержит более двух миллионов значков, все из которых бесплатны, загружаются и настраиваются.

Бесплатные участники Noun Project должны указывать автора иконки при каждом использовании. Для тех, у кого есть платное членство, указание ссылки не требуется.

02.Значки дизайна материалов

Формат: SVG, PNG и встроенный CSS

Всего: 1000+

В составе ресурсов Google по дизайну материалов (наряду с генератором цветовой палитры, каталогом шрифтов и т. Д.) Находится эта богатая коллекция открытых исходные значки. Значки доступны в пяти различных темах: заливка, обводка, закругление, двухцветная и резкая.

03. Icons8

Формат: PNG, SVG, PDF и встроенный HTML

Всего: 140 000+

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

Иконки бесплатны, но ссылка на веб-домен icons8.com обязательна для любого неоплачиваемого использования.

04. Softies

Формат: SVG и встраивание

Всего: 400+

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

05. iOS Edge

Формат: файлов SVG и AI

Всего: 216

Этот бесплатный набор значков, разработанный Заком Рощевским для Flaticons, соответствует стандартам Apple для интерфейса iOS. Поставляется как в очерченной, так и в заполненной версиях. Этот бесплатный образец является частью более полного платного набора из 2400 иконок.

06. Линейные значки

Формат: SVG, PDF, настольный шрифт и встроенный HTML Всего: 170

Эта коллекция векторных иконок является бесплатной версией большого премиального набора, состоящего из 1001 иконки. Иконки были созданы в сетке 20×20 пикселей. При использовании бесплатной версии обязательно укажите ссылку на сайт для указания авторства и упомяните Perxis в качестве дизайнера.

07. Feather

Формат: SVG

Всего: 282

Feather — это коллекция иконок с открытым исходным кодом, созданная Коулом Бемисом.Иконки созданы в сетке 24×24 с упором на простоту, единообразие и гибкость и лицензированы в соответствии с лицензией MIT. Вы также можете найти эти значки в виде библиотеки Sketch, на Github и т. Д.

08. Ionicons

Формат: SVG и встроенный SVG

Всего: 318

Ionicons — это коллекция с открытым исходным кодом, лицензированная MIT. Все значки имеют стиль материального дизайна, а также стиль iOS, поэтому они отлично смотрятся как на Android, так и на iOS.Они также совместимы с сетью и могут использоваться как веб-шрифт. Коллекция была создана командой Ionic Framework.

09. Jam

Формат: SVG, JavaScript и шрифт

Всего: 800+

Jam — это набор значков, разработанный Майклом Ампримо для веб-проектов, приложений и проектов печати. Иконки созданы в сетке 24×24 с обводкой 2 пикселя и бывают как контурными, так и заполненными. Набор под лицензией MIT License также можно найти на Github.

10. Шрифт Тониконы

Формат: SVG, PNG, AI-файлы и встроенный CSS

Итого: 300

Этот иконочный шрифт CSS был создан для дизайнеров и разработчиков веб-сайтов. Значки являются векторными, а версии PNG доступны в версиях 32 и 64 пикселей. Обратите внимание, что это бесплатно только для личного использования. Для коммерческих целей Tonicons предлагает различные платные наборы иконок.

11. Смешанные компьютерные иконки

Формат: EPS и JPG

Всего: 225

Эта коллекция векторных иконок от Raw Pixel бесплатна, но требует ссылки на rawpixel.com для атрибуции. Включенные значки варьируются от науки и медицины до путешествий, бизнеса и т. Д.

12. Wix

Формат: Web

Всего: 1000+

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

Кроме того, бесплатный Logo Maker от Wix полностью оснащен множеством красивых иконок для профессионального дизайна логотипа.

13. Мультимедиа

Формат: файлы SVG, PNG и AI

Всего : 50

Этот набор от Iconfinder содержит 50 векторных иконок. Он был разработан Сергеем Ершовым и находится под лицензией Creative Commons, что требует предоставления соответствующего кредита для любого использования.

14. Justicons

Формат: PSD

Всего: 140

Эта коллекция векторных иконок Радмира Мингалиева бесплатна как для личного, так и для коммерческого использования.

15. Значки с геометрическими линиями

Формат: AI

Всего: 108

Эти значки Энди Келли созданы с использованием только прямых линий с шириной линии 2 пикселя. Максимальный размер значков составляет 20 пикселей, поэтому их лучше всего использовать в дизайне приложений или веб-интерфейса.

16. Nucleo

Формат: SVG и шрифт значков

Всего: 60

Этот набор значков от Nucleo является тестовым образцом для гораздо более крупной платной библиотеки компании, состоящей из 28 502 значков.Более скромная бесплатная коллекция состоит из набросков, глифов и цветных версий каждой из 60 значков, а также дополнительных мини-значков.

17. Оптимизация

Формат: PNG

Всего: 30,000+

Значки Streamline бывают трех разных весов (светлые, обычные и жирные) и многих категорий, от основных элементов интерфейса до работы на открытом воздухе и для отдыха. Участники бесплатного веб-сайта могут загрузить версию значков размером до 48 пикселей, но платные пользователи получают доступ к файлам большего размера, а также к дополнительным типам файлов SVG и PDF.

18. Простые значки линий

Формат: файлы SVG, EPS, PSD и AI

Всего: 100+

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

19. Минимальные значки

Формат: SVG, EPS, PNG и файлы Sketch, PSD и AI

Всего: 1,800

Этот пакет минимальных значков поставляется в двух стилях — резкий и округлый.Он был разработан Александру Стойкой на сетке 20×20.

20. Lynny Icons

Формат: файлов EPS, PNG и AI

Всего: 450

Этот набор значков, разработанный Мэтью Скилсом, является бесплатным для личного и коммерческого использования с указанием ссылки на 1001FreeDownloads.com. Значки охватывают темы электроники, электронной коммерции, Интернета, погоды и т. Д.

Текст Eden Spivak

Эта статья не спонсируется и не поддерживается какими-либо из указанных брендов, кроме Wix.com. Wix.com не дает никаких гарантий в отношении этих брендов и их соответствующих услуг, а также не поддерживает эти услуги для каких-либо конкретных целей.

notlmn / awesome-icons: тщательно подобранный список потрясающих загружаемых проектов значков SVG / PNG / шрифтов.

Кураторский список потрясающих загружаемых проектов значков SVG / PNG / шрифтов

Файлы

Тип

Имя

Последнее сообщение фиксации

Время фиксации

Кураторский список потрясающих загружаемых проектов значков SVG / PNG / шрифтов

Содержание

Общий

Иконки общего назначения используются повсеместно.

• Bootstrap Icons — значки SVG, специально разработанные и созданные для компонентов Bootstrap. (Сайт)
• Boxicons — Простой векторный набор иконок с более чем 1000 значками и 100+ логотипами. (Сайт)
Иконки размером
• байтов — крошечный набор иконок SVG с управляемым стилем. (Сайт)
• css.gg — Иконки пользовательского интерфейса на чистом CSS, SVG и Figma доступны в SVG Sprite, styled-components, NPM и API. (Сайт)
• Eva icons — пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом. (Сайт)
• Evil icons — простой и чистый пакет значков SVG с кодом для поддержки Rails, Sprockets, Node.js, Gulp, Grunt и CDN. (Сайт)
• Feather — Просто красивые иконки с открытым исходным кодом. (Сайт)
• Flaticon — Самая большая база бесплатных векторных иконок. (Сайт)
• Fluent System Icons — коллекция знакомых, удобных и современных значков от Microsoft.
• Font Awesome — культовый набор инструментов SVG, шрифтов и CSS. (Сайт)
• Heroicons — Набор бесплатных высококачественных иконок SVG для использования в ваших веб-проектах. (Сайт)
• IconPark — IconPark предоставляет доступ к более чем 1400 высококачественным значкам и представляет интерфейс для настройки ваших значков.(Сайт)
• ICONSVG — Быстро настраиваемые значки SVG, легко настраивайте штрихи, концы и соединения контуров. (Сайт)
• Ion icons — премиум-шрифт для Ionic Framework и веб-приложений во всем мире. (Сайт)
• Иконки материального дизайна — Иконки материального дизайна от Google. (Сайт)
• Octicons — масштабируемый набор иконок, вручную созданных с помощью <3 на GitHub. (Сайт)
• Open Iconic — Open Iconic является братом Iconic с открытым исходным кодом. (Сайт)
• Picon — Мелкий иконочный шрифт на основе лигатур и SVG.(Сайт)
• Remix Icon — Remix Icon — это набор системных символов с открытым исходным кодом в нейтральном стиле для дизайнеров и разработчиков. (Сайт)
• Shape.so — Настраиваемые анимированные значки и иллюстрации, экспортируемые в код. (Сайт)
• Super Tiny Icons — миниатюрные SVG-версии логотипов ваших любимых веб-сайтов и приложений, каждая размером менее 1 КБ.
• Tabler Icons — набор из более чем 300 бесплатных высококачественных SVG-значков с лицензией MIT, которые вы можете использовать в своих веб-проектах.
• Teenyicons — 1000+ лицензированных MIT значков SVG, которые легко помещаются в очень маленькое пространство 🤏 и сохраняют четкий вид ✨.(Сайт)
• The Noun Project — Иконки для всего, более 2 миллионов тщательно отобранных иконок, созданных мировым сообществом.
• Unicons — 1000+ векторных иконок с идеальным пикселем и иконочный шрифт для вашего следующего проекта. (Сайт)
• VSCode Icons — темная и светлая версии значков, используемых в Visual Studio Code.
• Иконки погоды — Иконки погоды и CSS.
• Zondicons — набор бесплатных SVG-иконок премиум-класса для использования в цифровых продуктах. (Сайт)

Логотипы

Логотипы различных брендов, компаний или технологий.

Специальный

Иконки, которые не являются общими или логотипами, а являются чем-то особенным.

• Flag Kit — Красивые значки флагов для использования в приложениях и в Интернете.
• Mapsicon — Бесплатная коллекция карт для каждой страны мира.

Другое

Только CSS

Иконки сделаны только из CSS (не загружаются).

• cssicon — Набор значков, созданный с использованием чистого кода css, без зависимостей, значков «захвати и работай». (Сайт)
• icono — Чистый CSS, набор значков на основе классов.(Сайт)

Выплачено

Не с открытым исходным кодом / бесплатно, но все же достаточно круто.

• Heroicons — Уникальный набор иконок для вашего маркетингового сайта.
• Iconic — окончательный набор иконок, разработанный для современной сети.
• Nucelo Icons — премиальная библиотека иконок SVG для iOS, Android и веб-проектов.

Лицензия

Около

Кураторский список потрясающих загружаемых проектов значков SVG / PNG / шрифтов

Темы

ресурса

Лицензия

famfamfam.com: Silk Icons

Шелковые иконы

«Шелк» — это гладкий бесплатный набор иконок, содержащий более 700 Иконки размером 16 на 16 пикселей в невероятно мягком формате PNG. Вы уверены, что содержит большое количество разнообразных значков. найти что-то, что порадует вас.И все по невысокой цене $ 0,00 . Вы не можете сказать справедливее, чем что.

Текущая версия: 1.3 .

Просмотреть все значки (файл .png, 1Мб) Скачать

Лицензия

Я также люблю слышать, как мою работу используют, чувствую себя воодушевленным отправить электронное письмо со ссылкой или скриншотом значков в их новом доме к mjames на gmail dot com.Эта работа находится под лицензией Creative Лицензия Commons Attribution 2.5. Это означает, что вы можете использовать его для любых целей и делать любые изменения, которые вам нравятся. Все, что я прошу, это включить ссылку вернуться на эту страницу в ваших кредитах (хотя гигантская ссылка на каждой странице вашего сайта на самом деле не необходимо, свяжитесь со мной, чтобы обсудить детали).

Значки также можно использовать в разделе «Креатив». Лицензия Commons Attribution 3.0 (Привет, ребята, Debian!) Со следующими требованиями:

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

Достопримечательности

Вы пользуетесь этим набором? Свяжитесь со мной!

Пожертвовать

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

Iconos — Descarga Vectores Dratis, PNG, SVG, GIF Веб-сайт

Iconos

Fotos

Música

Ilustraciones

Веб-сайт

+ Colección

Веб-сайт

+ Colección

Веб-сайт

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Dominio

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Веб-сайт резюме

+ Colección

Ошибка веб-сайта

+ Colección

Веб-аналитика

+ Colección

Любимый сайт

+ Colección

Любимый сайт

+ Colección

Интеллектуальный веб-сайт

+ Colección

Конструктор сайтов

+ Colección

Статистика сайта

+ Colección

Сайт заблокирован

+ Colección

Веб-аналитика

+ Colección

Интеллектуальный веб-сайт

+ Colección

Статистика сайта

+ Colección

Конструктор сайтов

+ Colección

Сайт заблокирован

+ Colección

Sitio web de citas

+ Colección

22 бесплатных стоковых иконок в 2021 году

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

22 лучших бесплатных веб-сайта с иконками

1. Icons8 — Встроенный редактор иконок
2. Flaticon — Удобная группировка иконок
3. NounProject — Простой поиск
4. Freepik — Широкий выбор категорий
5. Iconfinder — Простая загрузка
6. Smashing Magazine — Эксклюзивные иконки
7. Captain Icon — Иконки шрифтов
8. Хорошие вещи без глупостей — Рисованные от руки иконки
9. Pixeden — Большой выбор размеров
10. Iconmonstr — Жирные и тонкие значки
11. Глификоны — Монохромные иконки
12. Entypo — Простая компоновка
13. Endless Icons — Творческие наборы
14. Чернила кальмара — большие возможности настройки
15. Behance — Разные стили
16. DeviantArt — Социальная сеть для художников
17. Бесплатные подарки для дизайнеров — для повседневного использования
18. Fribly — Анимированные иконки
19. Designbeep — Обширный архив иконок
20. Freebiesbug — Блог о новых иконках
21. PixelsMarket — Разнообразный выбор
22. GraphicsFuel — Качественные иконки

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

1. Icons8 — Наш выбор

• Иконки в 33 стилях
• Вы можете изменять цвета значков и редактировать их
• Многофункциональный сайт
• Множество форматов (SVG-спрайт и значок-шрифт)

Вердикт: Icons8 — это универсальный веб-сайт с бесплатными значками, фотографиями, UX-иллюстрациями и музыкой для ваших видео.Здесь вы найдете бесплатные иконки в 33 стилях, которые можно использовать везде. Вы можете загружать иконки в любом популярном формате, включая встроенный SVG-спрайт и icon-font.

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

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

2. Флатикон

• Более 60 000 иконок каждый месяц
• Поддерживает множество форматов
• Возможность редактирования размера, положения и цвета
• В коллекции хранятся иконы в порядке

• Кривая обучения управлению коллекциями

Вердикт: Самое удобное во Flaticon заключается в том, что если вы не нашли идеальный значок, вы можете редактировать его размер, положение и цвета, пока не найдете правильный стиль для своего проекта.Каждый месяц туда добавляется около 60 000 иконок. Они доступны в таких форматах, как PNG, SVG, EPS, PSD, Base 64 и Iconfont.

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

3. СуществительноеПроект

• Более 2000000 иконок
• Множество стилей
• Разнообразие коллекций
• Вы можете настроить значки

• Требуется ежемесячное членство

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

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

4. Freepik

• Вы можете настроить значки нужных форматов и размеров
• Обширный массив коллекций
• Возможность создания font-face
• Вы можете управлять своей коллекцией

• Кривая обучения управлению коллекциями

Вердикт: Freepik — отличный веб-сайт, предлагающий не только бесплатные стандартные иконки.Есть много категорий на любой вкус, от одежды, моды и музыки до погоды, спорта и природы.

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

Здесь вы также найдете множество наборов значков Adobe Illustrator.

5. Iconfinder

• Более 4 475 000 бесплатных и премиум иконок
• Простой поиск
• Несколько размеров и форматов для загрузки
• Наборы иконок разных стилей

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

Iconfinder предлагает значки разных стилей: с закрашенным контуром, нарисованные от руки, трехмерные, мультяшные и т. Д. Существуют наборы значков по разным темам, и соответствующие регулярно добавляются. Среди них можно найти такие наборы, как гигиена, COVID-19, социальная дистанция, лето, фрукты и др.

6. Smashing Magazine

• Качественные иконки
• Уникальный контент
• Вы можете выбрать формат для скачивания
• Разные стили

• Существуют некоторые требования для загрузки
• Неудобный поиск

Вердикт: Smashing Magazine — очень хороший веб-сайт, который предоставляет высококачественные, эксклюзивные и бесплатные стоковые иконки.Существует огромное количество уникального контента, такого как набор значков дополненной и виртуальной реальности, набор нарисованных от руки космических значков и футбольный набор.

Наборы значков доступны в различных форматах, включая SVG, PSD и PNG.

Вы также найдете несколько требований к авторству. Но для большинства наборов обратная ссылка не требуется.

7. Капитан Иконка

• Вы можете настроить цвета значков
• Возможность увеличения размера без потери качества
• Множество форматов
• Множество категорий

Вердикт: Красивые, бесплатные и векторные иконки от Captain Icon доступны в форматах EPS, PSD, PNG, SVG и Web Font.Вы можете настроить цвета значков и масштабировать их до любого размера без потери качества.

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

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

8. Хорошие вещи, без глупостей

• Универсальные и необычные иконки
• Удобный и легкий поиск
• Коллекции рисованных векторных иконок
• Форматы SVG и / или PNG

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

Есть как универсальные коллекции, такие как Новый год, иконки социальных сетей, так и необычные, такие как Good Idea, GEEK PACK и т. Д.

Все файлы доступны в формате SVG и / или PNG. Иконки абсолютно бесплатны, ссылки не нужны.

9. Pixeden

• Необычные наборы
• Доступные размеры от 16×16 до 512×512
• Наборы шрифтов для иконок

• Ограниченное количество форматов

Вердикт: Вы можете бесплатно скачать наборы иконок для своего веб-дизайн-проекта любого размера.Все бесплатные наборы иконок представлены в формате PNG размером от 16×16 до 512×512, а в зависимости от наборов иконок с полноуровневым Adobe Photoshop PSD в векторном виде.

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

10. Iconmonstr

• Более 4496 бесплатных стоковых иконок
• 313 коллекций
• Простой дизайн
• Регулируемый поиск

• Лицензирование GPL довольно проблематично

Вердикт: Откройте для себя более 4496 бесплатных иконок в 313 коллекциях на Iconmonstr.Простой дизайн и иконки доступны в нескольких размерах. Их можно использовать без указания авторства.

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

Этот сайт предлагает удобное расположение. Когда вы нажмете на понравившийся вам набор, вы увидите вверху доступный формат (например, SVG, EPS, PSD, PNG). Ниже вы можете скачать и просмотреть коллекцию. Ничего лишнего, все просто и минималистично.

11. Глификоны

• Монохромные значки и символы
• Большой выбор иконок
• Много наборов
• Простой поиск

• Только формат PNG
• Только платные наборы

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

12. Entypo

• Более 400 пиктограмм
• Быстрый доступ к иконкам
• Простой дизайн

Вердикт: С более чем 400 пиктограммами Entypo предлагает все стандартные значки, которые могут вам понадобиться для вашего графического дизайна.Иконки бесплатны для личного использования. Для коммерческого использования требуется указание авторства.

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

13. Бесконечные иконы

• Простые и элегантные значки
• Форматы PNG и SVG
• Удобный интерфейс
• Категории для поиска

• Имена не отображаются в разделе «Бесплатные значки»

Вердикт: Endless Icons был создан, чтобы делиться бесплатными стандартными значками и креативными элементами с сообществом дизайнеров.Здесь вы найдете простые и элегантные значки, доступные для загрузки в форматах PNG и SVG.

На Endless Icons удобно искать и выбирать значки. Вы можете искать бесплатные иконки или целые наборы. Или щелкните вкладку «Теги» и выберите нужный значок по имени.

14. Чернила кальмара

• Более 2000 иконок
• 5 форматов
• 17 категорий
• Возможность настройки иконок

Вердикт: Squid Ink предлагает 2000 векторных иконок в 5 форматах и ​​17 категориях.Иконки масштабируемы, красочны и креативны. На Squid Ink вы найдете значки, связанные со звуком, праздниками, одеждой и обувью, играми и развлечениями, а также финансами и домашним хозяйством.

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

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

15.Behance

• Качественные иконки от профессионалов
• Креативные иконы
• Разные стили
• Разные категории

• Ограничения на скачивание

Вердикт: Behance — отличный веб-сайт для поиска бесплатного контента, когда его участники демонстрируют свои творения. Если вы ищете дизайнерские качественные иконки от профессионалов, то они вам очень пригодятся.

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

16. DeviantArt

• 200000 бесплатных стоковых изображений
• Креативные идеи
• Вдохновляющие иконы
• Все виды категорий, форматов и стилей

• Диапазон требований атрибуции

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

Здесь вы найдете около 200 000 бесплатных стоковых иконок, доступных для загрузки.

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

17. Бесплатные подарки для дизайнеров

• Необычные уникальные наборы
• Иконки для повседневной работы дизайнеров
• Возможность выбора формата
• Для всех типов онлайн используйте

Вердикт: Free Goodies for Designers — небольшая группа отличных дизайнеров и арт-директоров, которые делают это в основном для развлечения.Вот почему вы не найдете здесь много изображений значков.

Но все они уникальны и определенно полезны для дизайнеров, поскольку сами дизайнеры используют эти иконки в повседневной работе. Например, красивая и современная векторная иллюстрация людей с несколькими устройствами или набором Minimal-конструкций.

Free Goodies for Designers хорошо организован и предлагает наборы значков в форматах PSD, SVG и векторные иконки для любого использования в Интернете.

18. Фрибли

• Плоские и анимированные иконки
• Регулярные обновления
• Упрощенный поиск
• Предлагает не только значки, но и другие бесплатные услуги (шрифты и т. Д.).)

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

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

19. Designbeep

• Большой выбор наборов и иконок
• Регулярные новостные публикации
• Удобный поиск
• Различные стили и форматы

Вердикт: Проверьте наш Designbeep вместо того, чтобы искать графику на нескольких веб-сайтах. Там вы найдете бесплатные наборы иконок из Freepik, Behance и других ресурсов.Designbeep следует за многими дизайнерами и разработчиками и, конечно же, за веб-сайтами, которые делятся или выпускают значки, и регулярно публикуют обновления.

20. Freebiesbug

• Разнообразные графические ресурсы с иконками
• Широкий выбор форматов
• Возможность выбора размеров
• Множество стилей

Вердикт: Freebiesbug — это блог о веб-дизайне, в котором представлены высококачественные бесплатные дизайнерские ресурсы.Здесь вы найдете последние бесплатные графические ресурсы с иконками.

Iconscout недавно запустил Unicons. Это полный набор из более чем 1000 бесплатных векторных иконок. Эти значки доступны в таких основных категориях, как Пользовательский интерфейс, Бизнес, Покупки и Медицина. Они тщательно обрабатываются в сетке 24 пикселя, чтобы обеспечить единообразие на всех типах дисплеев. Вы можете загружать значки в виде файлов SVG. Внешние разработчики могут использовать их в качестве веб-шрифтов с файлом CSS в разделе заголовка веб-страницы.

Также вы можете найти набор из 40 предметов с одеждой и векторными иконками покупок, разработанный Kasra Design специально для Freebiesbug.Иконки бывают разных форматов, включая AI, PSD, EPS и PNG, поэтому вы можете редактировать их в своем любимом приложении.

21. PixelsMarket

• Иконки с неизвестных сайтов
• Не только иконки, но и шрифты и шаблоны
• Возможность подобрать нужный размер
• Много категорий и стилей

Вердикт: На PixelsMarket вы можете найти ресурсы со всего Интернета, включая менее известные веб-сайты.Существуют не только стандартные иконки, но и бесплатные предметы для дизайна, такие как шрифты, шаблоны и т. Д.

Он также предлагает постоянно растущую коллекцию бесплатных иконок, которые вы можете скачать и использовать. Существует множество стилей значков, таких как анимированные, нарисованные, настраиваемые, и различные категории, такие как бизнес, социальные сети, больницы, свадьбы и т. Д. Форматы значков различны (чаще всего SVG и EPS).

22. ГрафикаFuel

• Иконки со всего Интернета
• Подборки для Instagram и социальных сетей
• Много красочных коллекций

Вердикт: Предлагая бесплатные и премиальные ресурсы, GraphicsFuel предоставляет множество красочных коллекций со всего Интернета по таким темам, как мода, наука, космос, бизнес и Хэллоуин.Есть коллекции для успешного Instagram, онлайн-обучения, базовые иконки для повседневной дизайнерской работы.

Favicons, сенсорные значки, вкладки и плитки для создания пиксельных логотипов на всех устройствах

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

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

Что такое Favicon?

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

Если на веб-сайте нет значка, посетителю отображается скучный значок страницы.

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

К сожалению, для людей, обслуживающих веб-сайты, существует множество различных устройств, которые обрабатывают значки по-разному. В результате разработчикам веб-сайтов необходимо создавать множество изображений (или множество версий одного и того же изображения).Чтобы дать вам представление о том, сколько их, я создал 25 различных изображений Favicon для сайта, над которым сейчас работаю, чтобы обеспечить максимальную совместимость с как можно большим количеством браузеров и систем.

Прежде чем мы начнем

404 ошибки

В этом блоге я буду ссылаться на то, что называется ошибкой 404. Это ошибка, которая возникает, если вы ищете несуществующую веб-страницу. Интересно, что они также выдаются, если изображение или любой другой файл запрашивается, но не может быть найден.Их следует избегать, потому что каждая выдаваемая ошибка 404 записывается в файл журнала. Этот файл журнала может очень быстро стать большим, что может привести к нехватке места на вашем сервере. Другая проблема заключается в том, что поиск несуществующего файла может замедлить работу сервера. Это может замедлить работу ваших посетителей. Скорость страницы также является ключевым фактором в рейтинге поисковых систем. Если ваша страница загружается медленно, вероятность того, что вы попадете на верхние позиции в списках Google, снизится.

Размер изображения и размер изображения

Размер изображения и размер изображения — это два разных, но связанных измерения.Размер изображения относится к размерам изображения: какой он высоты и насколько он широк. Размер изображения относится к объему дискового пространства, которое файл изображения занимает на компьютере.

Начнем с начала — favicon.ico

В те дни, когда не было множества мобильных устройств, можно было обойтись одним файлом .ico с именем favicon.ico. Этот тип файла может содержать файлы разных размеров. Стандарт диктует, что должны быть доступны версии изображения размером 16 × 16, 32 × 32 и 48 × 48 пикселей.Теперь этот тип файла почти не используется для значков, когда доступны альтернативы, хотя некоторые сайты социальных сетей ищут этот файл, когда предоставляется ссылка. Это означает, что без него вы можете получить ошибку 404, если файл отсутствует.

Чтобы добавить это на свой веб-сайт, вы должны добавить следующее в заголовок своих веб-сайтов.

PNG изображения Файлы

PNG обычно имеют меньший размер, чем файлы ICO, отчасти потому, что они содержат только одну версию изображения.Это, в свою очередь, может ускорить загрузку страниц. Рекомендуемые размеры файлов для значков png: 16 × 16, 32 × 32 и 96 × 96 пикселей. Как видите, мы не включаем изображение размером 48 x 48 пикселей, но добавляем 96 x 96 пикселей. Уменьшенная версия не требуется ни в одном браузере, который поддерживает PNG, а изображение 96×96 пикселей включено для использования на устройствах с большим экраном. Такие вещи, как телевизоры с подключением к Интернету, часто получают изображение большего размера.

Чтобы добавить изображения, добавьте следующее в заголовок каждой страницы вашего веб-сайта.

Сенсорные значки iOS

Вот где начинается самое интересное. IPhone был и остается огромным успехом. Смартфон попал в массы, а не только среди профессионалов бизнеса. Одна из вещей, которая делала iPhone особенным, — это его способность комфортно и удобно пользоваться Интернетом. Вы могли и можете добавить ярлык веб-сайта на свой рабочий стол.К сожалению, Apple решила, что стандартные значки недостаточно хороши, чтобы разместить их здесь. Это понятно, поскольку значки, которые есть на большинстве веб-сайтов, слишком малы и выглядели бы ужасно, если бы их увеличили. Однако вместо добавления первой буквы имени веб-сайта или аналогичного обходного пути Apple решила добавить крошечный снимок экрана веб-сайта в качестве значка.

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

• 57x57px
• 60x60px
• 72x72px
• 76x76px
• 114x114px
• 120x120px
• 144x144px
• 152x152px
• 180x180px

Затем нам нужно указать Safari на iPhone / iPad, где хранятся все изображения.

iDevices также имеет хороший способ изменить текст по умолчанию. Для этого добавьте следующее:

И последний момент: любая прозрачность значков iOS Touch будет отображаться как черная. Скорее всего, это не то, что вам нужно, поэтому любая прозрачность в значке обычно должна быть заполнена белым.

Устройства Android

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

Новые версии Chrome на Android ищут изображения в файле с именем manifest.json.

Это означает, что соответствующая версия может быть выбрана в зависимости от используемого вами устройства. Чтобы добавить файл manifest.json, включите

Файл json должен выглядеть примерно так:

  {
    "name": "название приложения",
    "значки": [
        {
            "src": "\ / android-chrome-36x36.png ",
            "размеры": "36x36",
            "тип": "изображение \ / png",
            «плотность»: 0,75
        },
        {
            "src": "\ /android-chrome-48x48.png",
            "размеры": "48x48",
            "тип": "изображение \ / png",
            «плотность»: 1
        },
        {
            "src": "\ /android-chrome-72x72.png",
            "размеры": "72x72",
            "тип": "изображение \ / png",
            «плотность»: 1,5
        },
        {
            "src": "\ / android-chrome-96x96.png ",
            "размеры": "96x96",
            "тип": "изображение \ / png",
            «плотность»: 2
        },
        {
            "src": "\ /android-chrome-144x144.png",
            "размеры": "144x144",
            "тип": "изображение \ / png",
            «плотность»: 3
        },
        {
            "src": "\ /android-chrome-192x192.png",
            "размеры": "192x192",
            "тип": "изображение \ / png",
            «плотность»: 4
        }
    ]
}  

Чтобы правильно поддерживать старые версии Chrome, добавьте изображение 192x192px в заголовок.При необходимости его можно масштабировать.

Чтобы установить имя значка по умолчанию, добавьте

Плитка для Windows 8

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

Windows 8.1 и Windows 10

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

По умолчанию файл с именем browserconfig будет искать на верхнем уровне вашего веб-сайта.xml. Если вы не хотите, чтобы это было, вы можете указать местоположение с помощью следующего тега:

Этот файл может делать много разных вещей, но пока мы будем беспокоиться только об изображении и цвете плиток на главном экране. Из-за того, что Windows позволяет изменять размер плиток, нам нужно включить 4 изображения разных размеров: 70x70px, 150x150px, 310x310px и 310x150px. После создания этих изображений файл browserconfig.xml должен выглядеть примерно так:

  
    
        
            
            
            
            
             #ffffff 
        
    
  

Закрепленная вкладка Safari

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

Однако, когда вы закрепляете вкладку, она может отображать указанный значок:

Этот значок должен быть значком SVG. У него не может быть фона, и каждый вектор должен быть на 100% черным. Вам также необходимо указать цвет, который будет отображаться, когда значок наведен или активен.

Это можно сделать с помощью следующей строки кода:

Цвет темы

Цвет темы веб-сайта должен отражать корпоративный цвет вашего веб-сайта.В Chrome для Android цвет заголовка будет указан здесь.

Насколько это может быть сложно?

Вы можете сидеть и думать: «Хорошо, есть много разных размеров, но, конечно же, вы можете просто сохранить несколько раз изображение с разными размерами, не так ли?». И ты прав, ты мог бы это сделать. К сожалению, разные системы имеют разные возможности. Мы уже обсуждали тот факт, что для сенсорных значков Android допускает прозрачность, а iOS — нет.Чтобы в полной мере использовать это преимущество и чтобы значок вашего сайта выглядел хорошо на обеих платформах, изображения должны быть разными. Еще одно различие — между плитками iOS / Android и Windows. И в Android, и в iOS можно использовать только маленькие квадратные значки. Окна подходят для плитки гораздо большего размера, а также для прямоугольной плитки. Чтобы воспользоваться обоими преимуществами, вам нужно еще больше вариантов файла. Все это означает, что на то, чтобы все исправить, может потребоваться много времени.

Итак, что нужно?

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

• favicon.ico, минимальный размер этого файла. Если он недоступен, могут начаться ошибки 404.
• favicon -__. Png, поскольку изображения такие же, но в другом формате, создание PNG не составит большого труда, если файл .ico уже был разработан и создан.
• iOS Touch Icon, версия 180x180px. При необходимости Apple уменьшит это значение, хотя вы можете загружать файлы большего размера, чем необходимо. Старые версии Android также должны использовать это, если файлы для Android недоступны.
• Manifest.json с Android PNG, включите как минимум 192x192px PNG, а затем Chrome на Android уменьшит изображение.
• Одиночная плитка Windows 8.1+, для базовой поддержки одна плитка размером 150×150 пикселей предоставит значок для средней плитки в Windows 8.1+.
Закрепленная вкладка
• Safari, на этом завершится базовая поддержка всех обновленных устройств.

Чем мы можем помочь?

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

SVG против PNG: в чем разница?

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

PNG — это формат растрового изображения, используемый для полноцветных изображений (в основном фотографий) хорошего качества. Он имеет довольно высокую степень сжатия и поддерживает прозрачность. Хотя он создан для замены GIF, он не поддерживает анимацию и только на 5–20% более сжимается по сравнению с праймером.

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

Оба формата файлов широко используются дизайнерами и разработчиками. Какой лучше? Зависит от цели файла изображения.

Давайте рассмотрим все «за» и «против», чтобы решить, когда использовать SVG, а когда PNG.

Подобно PNG, формат SVG поддерживает прозрачность, подходит для изображений, содержащих текст, и обеспечивает сжатие без потерь.Следующие особенности делают SVG более предпочтительным вариантом для дизайнеров, разработчиков и специалистов по SEO.

• Он очень сжимаемый и легкий; качество изображения остается высоким независимо от степени сжатия.
• Его легко масштабировать , поэтому он хорошо смотрится на экране независимо от размера изображения.
• Это поддерживается всеми современными браузерами (Chrome, Opera, Firefox, Safari, даже Internet Explorer).
• Дизайнеры могут создавать простые визуализации SVG в кодовом или текстовом редакторе , а также экспортировать сложную графику из Adobe Illustrator или Sketch.
• Текст, вставленный как отдельный слой, делает изображение SVG легко доступным для поиска .
• Формат SVG позволяет дизайнерам сохранять статические или анимированные изображения .
• Эти изображения легко редактировать , изменяя параметры в коде CSS.
• Вы можете сохранять объект несколько раз во время работы с ним, не влияя на исходное качество.

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

• Пользователи могут по-прежнему испытывать проблемы с кросс-браузерной совместимостью, особенно когда речь идет о почтовых клиентах и ​​более старых версиях программного обеспечения.
• Не подходит для фотографий, поскольку векторная графика изначально предназначалась для работы с фигурами, линиями и т. Д.
• Существуют трудности с использованием SVG в картографических приложениях, где для отображения небольшого фрагмента изображения требуется чтение всего файла .

В целом SVG легче, чем PNG . Однако файлы PNG бывают разных вариаций. В то время как PNG-24 — это большие файлы, которые неудобно использовать для обмена или адаптивного дизайна, изображения PNG-8 являются легковесными.

Файлы SVG более гибкие. Эти маги применяют XML для описания некоторых своих параметров, поэтому у них почти безграничные возможности для сжатия. Однако размер файла быстро увеличивается, если вы добавляете множество мелких деталей.

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

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