Как сделать фавикон в иллюстраторе
Добавил пользователь Владимир З. Обновлено: 05.10.2024
Сайт без фавикона (favicon), как корабль без флага. Фавикон — неотъемлемая часть бренда сайта, его имиджа и идентификации. Кстати, посмотрите на выдачу какой-нибудь поисковой системы (например, Яндекса). Вы обязательно обнаружите рядом с заголовками найденных страниц и документов фавиконки. Т.е. фавикон, это еще и фактор повышающий кликабельность вашего сайта в результатах поиска. Поэтому, без фавикона никуда!
Как изготовить фавикон? Процесс условно можно разделить на 2 этапа:
- Изготовление фавикона или нахождение уже готового;
- Установка его на сайт.
Поэтому, от такого варианта лучше отказался и изготовил фавикон собственными руками. Давайте на этом процесс остановимся подробнее. В ходе работы можно использовать:
Графические редакторы
Онлайн сервис Favicon.cc
Для меня использование в качестве инструмента графического редактора — самый органичный вариант, но, он не единственный, потому что существуют специальные веб-проекты, с помощью которых можно рисовать фавиконы. Примером может послужить сайт Favicon.cc, который позволяет создать иконку по пикселям:
Это лишь один из примеров, на самом деле есть очень много сайтов — сервисов создания favicon онлайн — бесплатные, с разной функциональностью и на любой вкус.
Онлайн генераторы фавиконки
Еще один вариант решения задачи — веб-сервисы, которые в автоматическом режиме генерируют картинку. Например проект Логастер.
Так как сайт изначально заточен на разработку логотипов, то сначала придется начинать именно с него. Затем специальный инструмент подберет разные варианты favicon для вашего случая. Редактор позволяет менять внешний вид объектов картинки, текстов и оформления. Детальнее об этом читайте в статье про создание фавиконки в Логастере. Заметка пригодится новичкам, если сходу разобраться сложно.
Установка favicon
Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop.
Значок сайта – это небольшой, но значительный элемент продвижения вашего бренда на сайте. Вот пример, того, как он может выглядеть на вашем сайте:
Photoshop – это прекрасная программа для работы с изображениями, которая поможет Вам создать пользовательский значок сайта.
Значок сайта – это миниатюрный логотип (16×16), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.
Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ ( Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T), отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
Перейдите на вкладку ‘Файл’ > ‘Сохранить как…’ (File > Save As), откройте выпадающее меню и выберите формат .PNG (*.PNG). Нажмите на кнопку ‘Сохранить’ (Save):
Вы успешно создали значок сайта. Он был сохранён как файл ‘ favicon .jpg’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате .ICO. Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта .PNG в формат .ICO. Это последний шаг данного туториала.
Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом.
Перетяните ваш файл ‘ favicon .jpg’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:
Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
Эта запись была размещена в Работа с Photoshop и помечена как .ico, favicon, file, Photoshop. Добавьте в закладки постоянную ссылку.
Шаг 1
Откройте AI-графику в Adobe Illustrator. Для этого дважды нажмите на AI-файл. Файл откроется в интерфейсе Adobe Illustrator.
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Шаг 7
Как конвертировать телефон Sprint в телефон для крикета
Компании сотовой связи постоянно меняют рекламные акции и предлагают лучшие предложения для привлечения новых клиентов. Переключение носителей никогда не было проще. На самом деле, вместо покупки .
Как создать файл ICO из JPEG в Paint
Значки - это специальные типы файлов изображений, которые ваш компьютер использует для представления программ и типов файлов. Например, когда вы смотрите на рабочий стол, обратите внимание, что название каждой программы .
2 способа конвертировать png, svg, jpg файлы в ico файлы в windows
Как преобразовать изображения в значки, которые вы можете использовать в Windows и других операционных системах. Как преобразовать файлы JPEG, PNG или SVG в файлы ICO, как онлайн, так и оффлайн.
Все важные знания о фавиконах: зачем нужны, как выбрать сделать и установить на сайт для разных разделов и устройств. Обновленный материал.
В статье:
Что такое фавикон
- браузером на открытой вкладке и в закладках рядом с URL сайта;
- в качестве ярлыка на смартфоне, если пользователь вынесет сайт на рабочий стол;
- в поисковой выдаче Яндекса около заголовка на сниппете сайта.
Сайты с фавиконами в выдаче Яндекса
В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.
Фавиконки в выдаче Google (тест)
Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.
Зачем нужен фавикон
Посмотрим, для чего нужен файл favicon.ico и можно ли без него обойтись. Иногда на форумах новички спрашивают, дает ли использование favicon.ico бонусы при продвижении. Фавикон никак не влияет на оптимизацию и ранжирование, тем не менее, у него есть другие плюсы.
Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.
Сайт без фавикона в выдаче среди прочих
- С фавиконом сайт запоминается лучше
Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.
Логотип компании в фавиконе
В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.
Закладки в Google Chrome
Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.
К примеру, такую:
Какую картинку выбрать для фавикона
Если сайт представляет компанию, в фавикон лучше поставить логотип бренда или его фрагмент, если логотип сложный, детализированный или вытянутый. Если логотипа нет, подберите изображение и цветовую гамму по ассоциации с тематикой сайта.
Фавикон с чашкой для сайта о кофе выглядит гармоничнее
Фавикон в выдаче, на вкладках браузера и в закладках очень маленького размера. Детализированное изображение никто не разглядит. Подберите картинку, где будет минимум деталей, два-три цвета, однозначное прочтение смысла.
Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.
Как создать favicon для сайта
Есть три самых распространенных способа:
Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.
Панель бесплатного генератора фавикона
Как установить фавикон на сайт
Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon".
От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG — "image/png" и аналогично для других форматов.
Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon".
Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.
Как установить разные favicon для отдельных страниц
Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:
Фавиконы на разных разделах одного сайта
Как установить разные фавиконки разделам сайта:
- Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
- В коде нужной страницы пропишите путь к другой фавиконке раздела:
Размеры фавиконов для браузеров и устройств
С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.
Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.
Фавиконы сайтов на экране смартфона
Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.
Достаточный пакет фавиконок для популярных браузеров
Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16x16, 32x32 и 48x48.
Этот пакет обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Дополнительно можно добавить файлы для мобильных устройств.
Android
Обычно используют файл .jpg размером 180x180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.
Манифест указывают с помощью:
С помощью файла-манифеста у сайта, который пользователь вынес на главный экран смартфона, будет настроенный качественный фавикон.
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:
Apple
Для iOS иногда используют размер 57x57, но рекомендуют лучше делать иконку PNG размером 180x180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.
В rel нужно указать “apple-touch-icon.jpg”.
Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.
Настраивают с помощью link rel="mask-icon".
Edge и IE 12
Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.
Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.
Читайте также: