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!
