Aviva Burstein IQSites - создай свой умный сайт
+972 544 370 032
Звоните на VIBER прямо сейчас
Создайте свой собственный сайт совершенно бесплатно
Самые сложные механизмы сайта для вас в простом конструкторе
IQSites - компания со своими традициями и историей
Управляй сайтом с помощью телефона или планшета
Войдите в TOP 10
Блог
Регистрация сайта
Создай свой сайт прямо сейчас.
Создать свой сайт
Социальные сети
Ваша фирменная иконка. Как сделать фавикон для сайта?

Ваша фирменная иконка. Как сделать фавикон для сайта?

Многие недооценивают такой важный элемент дизайна, как фавикон. Сделать фавикон можно несколькими способами.

22 мая 2016 в 3:00

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

Ваша фирменная иконка. Как сделать фавикон для сайта?

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

Стоит заметить, что под разные браузеры и устройства, необходимы разные размеры фавикона. К примеру, привычный нам дескпотный фавикон (для обычных браузеров), будет иметь размеры: 16x16, 32x32, 48x48.

Android устройства отличаются друг от друга разрешением экранов. Единица, обозначающая разрешение экрана смартфона, обозначается как PPI (плотность пикселя на дюйм). Учитываем, что для Android нам необходимо создать следующие размеры:

- 36×36 — PPI = 0.75
- 48×48 — PPI = 1
- 72×72 — PPI = 1.5
- 96×96 — PPI = 2
- 144×144 — PPI = 3
- 192×192 — PPI = 4

Ваша фирменная иконка. Как сделать фавикон для сайта?

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

- 57×57 — для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
- 60×60 — для iPhone с не ретина дисплеем и iOS версии 7.0
- 72×72 — для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
- 76×76 — для iPad с не ретина дисплеем и iOS версии 7.0
- 114×144 — для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
- 120×120 — для iPhone с ретина дисплеем и iOS версии 7.0
- 144×144 — для iPad с ретина дисплеем и iOS версии 6.0 и ниже
- 152×152 — для iPad с ретина дисплеем и iOS версии 7.0
- 180×180 — для iPhone 6 Plus c iOS версии 8.0

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

Ваша фирменная иконка. Как сделать фавикон для сайта?

Как создать favicon?

Для того, что бы сделать фавикон с нуля, есть два самых распространенных решения:
1) Самостоятельно нарисовать в Photoshop'е или другом функциональном фото редакторе.
2) Воспользоваться онлайн-генератором Favicon.

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

Ваша фирменная иконка. Как сделать фавикон для сайта?

Ресурс realfavicongenerator.net позволяет нам создать фавикон сразу для всех существующих устройств и браузеров. Здесь нам достаточно загрузить наш логотип или понравившуюся картинку и favicon готов. Можно немного поиграться с цветами и прозрачностью, в целом, результат быстрый и качественный. А нажав заветную синюю кнопочку внизу, мы в один клик получаем готовый продукт ;)

Ваша фирменная иконка. Как сделать фавикон для сайта?

Ну и самый известный и простой редактор фавиконок доступен по адресу favicon.cc. На сервисе всё сделано интуитивно понятно и доступно. Поигравшись пару минут, шедевра у нас к сожалению не вышло :))

Ваша фирменная иконка. Как сделать фавикон для сайта?

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

Подписывайтесь на блог и получайте всю самую свежую и интересную информацию с фронта IQSites!



Подписка на обновления блога
Хотите получать информацию о новинках, мероприятих и акциях компании?
Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Обучающая статья, IQSites, Авива Бурштейн, Aviva Burstein, ресурс для сайта, платформа для сайта, Советы, инструменты для сайта

Другие статьи блога

12 факторов, которые помогут вам понять, что Вы не ошибетесь в выборе компании сетевого маркетинга
12 факторов, которые помогут вам понять, что Вы не ошибетесь в выборе компании сетевого маркетинга
Минутка фантазии и маркетинга. Как выбрать домен для своего проекта?
Минутка фантазии и маркетинга. Как выбрать домен для своего проекта?
Скажи "Да" IQSites
Скажи "Да" IQSites

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "54.144.82.216" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "7fa00a511dfbb17fb95ecef7cbf08427" }