Favicon – это небольшой значок, отображающийся рядом с названием сайта в окне браузера или в выдаче поисковика. Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR. Также вы можете создать ретина фавиконоки. Какого размера должен быть favicon? Как правило, фавиконы бывают размеров 16x16px или 32x32px.
В каком формате я получу favicon?
После того как вы сделаете favicon, вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico. Именно его и надо будет использовать в дальнейшем. Как создать favicon онлайн? Используйте генератор favicon онлайн на нашем сайте. Вы сможете не только создать фавикон с картинки, но и использовать встроенный редактор, позволяющий создать любую иконку для сайта.
Как разместить favicon на сайте
Нужно загрузить favicon в корневой каталог сайта, чтобы получился адрес вида http://sitename.ru/favicon.ico. Это путь к изображению. Далее нужно поместить код в тег. Должно получиться так:
...
...
Зачем указывать путь к favicon?
Некоторые сайты используют разные фавиконы, чтобы пользователи лучше ориентировались в разделах ресурса, поэтому необходимо указывать путь. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
Favicon будет отображаться в поисковой выдаче?
В Google фавиконы не отображаются. У Яндекс есть так называемая индексация фавиконов, этот процесс занимает от недели до месяца.
Последний урок четвертого шага нашего учебного курса мы посвятим созданию иконок для Андроид-приложений. А в конце статьи вы найдете наш традиционный тест на усвоение пройденного материала.
Те, кто давно пользуются смартфонами на Андроид, знают, что данная ОС отличается высокой степенью кастомизации. Есть доступ к индивидуальной настройке обоев, тем, главного экрана, виджетов, шрифтов и так далее. Пользователь может даже поменять интерфейс системы с помощью того или иного лаунчера.
Однако мало кто знает, что Андроид позволяет даже… перерисовать иконки приложений. Для этого есть несколько утилит, доступных для бесплатного скачивания в Google Play. В нашей статье мы расскажем о самых удобных программах, а также покажем, как сделать иконку для приложения в одном из апплетов.
Простое Android-приложение с интуитивным интерфейсом позволяет быстро сделать иконку из десятков шаблонов, поменять размер, цвет и подпись. Также в процессе создания ярлыка можно настраивать наклон и даже накладывать фоном готовое изображение.
Приложение поставляется по условно-бесплатной схеме. В основной версии программы есть рекламные баннеры, а также ограничено количество шаблонов. Однако за полную версию разработчики просят всего 76 рублей. Как они сами шутят: цена всего лишь одной чашки кофе.
Приложение создано для создания ярлыков на замену стандартным иконкам. Для этого достаточно выбрать из списка приложений программу и перерисовать в приложении ярлык. Подробнее о том, как это сделать – в конце статьи.
Приложение для Андроид, обладающее обширным функционалом для отрисовки иконок. Причем утилита позволяет создавать ярлыки не только для мобильных платформ, но и для ПК-систем, например, Windows. Для создания иконки пользователь настраивает фон и выбирает один из пяти тысяч шаблонов.
Для отрисовки ярлыков приложение содержит удобные инструменты:
- Масштабирование
- Позиционирование
- Поворот
- Радиус и многое другое
Все иконки создаются на основе масштабируемой векторной графике и экспортируются в формат SVG. Кстати, это позволяет в отдельной владке даже настраивать исходный код ярлыков.
Для создания новой иконки приложение Material Icon Maker предлагает всего 4 простых шага:
- Выбрать базовый ярлык. Основу можно позаимствовать из подборки более 900 исходников, набрать текст или подгрузить картинку из галереи смартфона.
- Настроить фон. Здесь пользователь выбирает форму и цвет.
- Наложить тени, выбрав направление, цвет и прозрачность.
- Экспортировать в нескольких доступных разрешениях.
Готовые иконки можно использовать в любом стороннем Андроид-лаунчере, который поддерживает установку пользовательских ярлыков, например, Nova Launcher. Приложение бесплатное, не требует подключения к Интернету и не содержит рекламы, однако всего за 15 рублей можно докупить специальный ключ, который разблокирует дополнительные функции, вроде более тонкой настройки теней, цвета и экспорт в высоком разрешении.
Быстрый и очень удобный редактор иконок, который позволяет за пару минут нарисовать новые ярлыки для приложений.
Сначала создается и настраивается фон. Здесь можно поменять форму, установить цвет и толщину обводки, наложить блик, тень или градиент. Далее следует работа с логотипом. Ему можно задать новый размер, сделать заливку и контур, наложить тень. Последний шаг – наложение эффекта. В базовой версии приложения доступны только два: блестящий и рассеянный свет. Для доступа ко всем шаблонам придется расширить приложение до pro-версии за 116 рублей.
Особенность данного приложения в том, что отрисовывается иконка не под конкретное приложение, а полный пакет для всех программ на смартфоне. Готовая сборка рассчитана на различные лаунчеры, например, Nova Launcher, Action Launcher, ADW Launcher или Apex launcher.
Как самостоятельно создать иконку для Андроид-приложения
Для демонстрации возможностей приложений для создания и редактирование иконок мы выбрали утилиту Adapticons, которую установили на смартфон Fly Cirrus 12 . С ее помощью мы пошагово покажем, как нарисовать ярлык для Андроид.
Шаг 1. В списке приложений, установленных на смартфон, выберете то, для которого хотите нарисовать новую иконку.
Шаг 2. Выберете фон.
Шаг 3. Настройте размер фона и логотипа.
Шаг 4. Если необходимо, сдвиньте логотип и добавьте к нему тень.
Шаг 5. Перейдите в редактор логотипа.
Шаг 6. Выберете логотип из готовых шаблонов или импортируйте из памяти устройства.
Шаг 7. Выберете цвет логотипа.
Шаг 8. Сохраните иконку на рабочем столе, экспортируйте в формате PNG или добавьте в пакет для загрузки в лаунчер.
Весь процесс создания иконки можно посмотреть в нашем видео:
Теперь вы знаете, как легко и быстро создать новую иконку для приложений Андроид. В целом, основная масса приложений имеет схожие функции и различается лишь стоимостью расширенных версий. Самое главное – для работы с ними не требуется вмешательство в системные настройки смартфона, так как, по сути, подобные утилиты являются своеобразными графическими редакторами.
Вам понравилось одно из предложенных нами приложений? Нарисуйте свои иконки и добавьте свои самые эффектные работы в комментарии к данной статье.
Кому не хотелось создавать свои иконки для, например, ярлыков, папок или даже самописного софта?
Бесспорно, просторы интернета буквально изобилуют уже готовыми иконками, самых разных тематик и самого различного качества. Но что, если хочется, чтобы папки украшали лица, скажем, бухгалтеров, в которые они сдают свои отчеты ?
Не будем порочить их честные лица и возьмем в качестве примера изображение «флешки»
Не важно, какие размеры будут у него, главное, чтобы не менее хотя бы 32х32 px.
Качественные иконки, как правило, содержат в себе несколько изображений, разного размера и качества. Это нужно для того, чтобы иконка выглядела «гладко» при разном способе ее отображения (список, плитка, значки). Если изображение внутри всего одно, то оно, конечно, будет уменьшено или увеличено, но пострадает качество отображения — края станут угловатыми, а если картинка изначально была 16х16, то при увеличении она «посыплется кубиками».
Для приготовлений этих заготовок нам понадобится самый обычный фотошоп, в который нужно лишь единожды загрузить исходный материал. Теперь наша задача — сохранить его в разном разрешении.
Выбираем в меню «Изображение — Размер изображения» и выставляем 48х48. Если не хочется прописывать еще и высоту, то можно поставить галочку (если не отмечено) «Сохранять пропорции».
Сохраняем обязательно в формате PNG без сжатия. Нам не нужны потери качества и прозрачных областей.
Снова возвращаемся в «Изображение — Размер изображения» и выставляем новый размер — 32х32.
Повторяем операцию. Так же для 16х16, и можно для 128х128, для Windows 7, где такой размер может вполне пригодиться.
Итак, файлы готовы. Далее открываем какой-нибудь редактор иконок, например, Microangelo Studio. Откроется пустая рабочая область. Перетаскиваем в нее наши подготовленные файлы, и видим, что каждый из них занял свою индивидуальную позицию
Под каждым размером написано «XP», что означает, что мы сделали все правильно, и цветопередача будет максимальной, т.е. без потерь.
Почему мы не загрузили в программу только одно изображение и не наклонировали его с разным разрешением? Потому, что мы получим изображения с корявыми краями. Потому мы и воспользовались фотошопом.
А «свести все воедино» нам и поможет Microangelo Studio (ибо фотошоп, по крайней мере, десятая его версия, этого делать не умеет).
В итоге мы получим нашу иконку, которой можем пользоваться. Для примера я использовал ее для папки.
Хотите придать папке оригинальный вид, тогда меняем значок папки. Я не говорю про те, которые уже есть в системе, а именно свой значок из своих фотографий или с каких либо изображений.
Сделать иконку (значок) папки из своей фотографии можно в стандартной программе – Paint , которая у каждого должна быть в операционной системе windows 7
Поверьте мне, со своими значками вам намного будет удобней и быстрей отыскать нужную папку, не вчитываясь в текст (название папки)
Вот небольшой пример. Такой вид папки ускоряет поиск среди большого количества похожих папок.
Найти программу “Paint “ можно через “Пуск ” и “Все программы ” Запустите её и перетащите рисунок в окно программы. А ещё проще, это вызвать контекстное меню, щёлкнув по изображению, которое хотите поставить в роли значка, правой клавишей мышки. Выбираем пункт “Изменить ” Откроется программа “Paint “
Создаём значок в программе Paint
И в первую очередь, что мы должны сделать, так это вырезать нужную часть изображения. К тому же обрезать должны так, чтоб все стороны были одного размера. Если не подогнать пропорции сторон, то значок получится квадратный, а изображение приплюснутое.
Обрезаем. На панели программы выбираем инструмент “Выделить ” В параметрах выделения указываем фигуру “Прямоугольная область ” Левой клавишей мышки выделяем фрагмент фото. Удерживая клавишу, смотрим, как изменяется размер в нижней панели программы.
Подогнали размер, жмём кнопку “Обрезать “
Теперь фотография получилась квадратная, продолжаем.
После обрезки меняем размер будущего значка. Жмём “Изменить размер ” Изменяем в пикселях и вводим размер 64 по вертикали и горизонтали. Сохраняем “ОК “
Ставим свой значок на папку
Всё заготовка есть, применяем её к папке. Наводим курсор на любую папку и правой клавишей мышки вызываем меню. В самом низу списка заходим в пункт “свойства ” Далее “Настройка ” И внизу кнопка “Сменить значок.. “
Откроется окошко с системными значками. Но нам они не нужны, мы же хотим своё изображение применить. Тогда идём в обзор и ищем наш только что созданный значок.
Кстати в проводнике вы его можете не найти, так как наше изображение не является значком формата “ico ” Чтобы его увидеть выберите отображать “Все файлы *.* “
Теперь всё в порядке, жмём “ОК “
Вот так всё просто. Папка стала отличатся от остальных, а нам будет легче ориентироваться при её поиске.
Но это ещё не всё. Собственные иконки можно применить и к ярлыкам. Смотрите, как они выглядят на моём рабочем столе.
Хитрость, которая сделает Ваш компьютер бессмертным!
Сегодня мои коллеги из команды Клабпрофи, впервые рассказывают о хитрости, которая делает Ваш компьютер неуязвимым к любым невзгодам:
Благодаря этой хитрости Ваш компьютер после каждой перезагрузки будет в идеальном состоянии.
При этом, даже если накануне Вы поймали вирус, удалили системные папки или сломали Операционную систему, достаточно будет перезагрузить компьютер, и он снова будет работать, как прежде.
Используя такой подход, Вам больше никогда не придется регулярно чистить компьютер, переустанавливать Операционную систему, вызывать мастера и т.п. Компьютер всегда будет в одном и том же состоянии, после каждой перезагрузки.
О том, как это работает и как внедрить данную технологию уже в новогодние праздники, смотрите здесь:
Это полезно знать:
Аватан – бесплатный фоторедактор онлайн с…
Онлайн редакторы иконок многие не воспринимают всерьез, но на самом деле подобные инструменты значительно облегчают рабочий процесс. Всего пара кликов может избавить вас от часов поиска, просмотров или самостоятельной разработки. Кроме того, нет смысла использовать полноценные когда имеются специальные сервисы с заточенными функциями под данные конкретные задачи.
Подобные сайты редакторы иконок очень эффективны. Они позволяют вам:
- легко и быстро создавать новые материалы;
- придать существующим наработкам завершенный вид;
- сохранять результат в разных форматах (SVG, ICO & PNG);
- создавать иконки для .
В статье мы подобрали пять лучших онлайновых бесплатных редакторов иконок и для сравнения попробовали создать набор в каждом из них.
IconsFlow
IconsFlow.com — векторные иконки + редактор позволяющий создавать персонализированные наборы и экспортировать их в хорошем качестве (SVG, ICO & PNG). Главным преимуществом сервиса является наличие двух редакторов:
- главного, в котором выбирается палитра, стиль, эффекты;
- редактора формы, где можно изменить текущую форму или нарисовать новую.
Если вы уже создали иконки в Illustrator, просто загрузите файлы SVG и поэкспериментируйте с разными фонами. В IconsFlow существуют определенные ограничения при бесплатном использовании, поэтому убедитесь, что вы с ними ознакомились перед стартом. Для начинающих пользователей имеются уроки и раздел помощи, к тому же есть возможность работать в редакторе иконок на русском.
Вид векторного редактора IconsFlow:
Примеры работ:
FlatIcons
С помощью FlatIcons.net вы можете создать свою флэт-иконку (в плоском стиле) на основе готовых шаблонов. Задавайте размеры, выбирайте рисунок и основной фон (круги, кольца, прямоугольники), меняйте цвет. Этот редактор иконок бесплатный, но у него есть два недостатка:
- Во-первых, вы можете скачивать файлы только в PNG-формате.
- Во-вторых, вам придется создавать каждый объект отдельно, т.к. невозможно разработать целый набор сразу.
Не смотря на то, что пик популярности уже прошел, многие используют их в своих дизайнах. В качестве примера разработчики позволяют скачать бесплатный набор социальных флэт иконок. Результат работы в редакторе FlatIcons:
Launcher Icon Generator
Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).
В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:
Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.
Начните с выбора картинки из галереи, потом определите цвет, форму заднего фона (круг или квадрат), длину тени, насыщенность, затухание – и ваша иконка готова. Все предельно просто. Для персонального использования сайт полностью бесплатный.
После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:
Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.
Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:
Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор. К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно.
Если знаете еще какие-то похожие сервисы, присылайте варианты в комментариях.
