IQSites - умный конструктор сайтов
+7 (911) 11-8888-1
Звоните прямо сейчас
Социальные сети
Ваша фирменная иконка. Как сделать фавикон для сайта?

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

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

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!



Подписка на обновления блога
Хотите оперативно получать новости компании из корпоративного блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Теги: Обучающая статья

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

5 бесплатных сервисов для быстрого обмена файлами
5 бесплатных сервисов для быстрого обмена файлами
ТОП облачных хранилищ для ваших файлов
ТОП облачных хранилищ для ваших файлов
Pocket поможет не растерять интересный контент
Pocket поможет не растерять интересный контент

×

Информация, за которую другие щедро платят!

Подпишитесь на блог IQSites и получайте свежие лайфхаки конверсии сайтов, привлечения трафика и клиентов, тренды веб-дизайна, реальные кейсы и многое другое. Это всё ещё бесплатно!
* Поля, обязательные для заполнения

Нажимая "Подписаться", Вы принимаете
условия обработки персональных данных.

Наверх