Как сделать фавикон в кореле
Обновлено: 29.06.2024
Сегодня я подготовила для вас полную инструкцию про фавикон (favicon) — что это за иконка, зачем фавикон нужен вашему сайту и как создать фавикон и установить на сайт WordPress.
А так же нашла требования Яндекс и Google к фавиконкам и подобрала четыре сервиса, которые бесплатно сделают за вас всю техническую часть работы.
Если у вас все еще нет сайта на WordPress, то вот вам статья Как создать сайт на WordPress?
Что такое фавикон
Фавикон (favicon, сокращенное от favourite icone) — значок сайта или страницы. Значок появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.
Зачем нужен фавикон
Фавикон помогает человеку ориентироваться в поиске и быстрее находить нужный ресурс, повышает узнаваемость ресурса и кликабельность. Наверное и вы не раз искали сайт именно по фавикону- маленькому значку слева от названия сайта.
Помогает в навигации
Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.
Фавиконы можно увидеть:
Вызывает доверие
Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Даже если человек не ориентируется в поиске интернета, он подсознательно сравнивает ресурсы, отдавая предпочтение хорошо оформленным ресурсам.
Увеличивает кликабельность
Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.
Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.
Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.
Робот возьмет любую из имеющихся иконок, которая ему доступна и подходит под требования сервиса, на котором нужно ее показать.
Если сайт недоступен, робот возьмет произвольную иконку хостинга со страницы-заглушки сайта. В нашем случае, на сайте WordPress, робот возьмет иконку WordPress, вот такую:
Совет. Размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.
Требования Google к фавикону
Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.
Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.
Ознакомьтесь с разделом документации Google о фавиконках здесь
Думаю, что мы разобрали все про фавикон—зачем он нужен, почему так важен и где отображается. А вот как создать фавикон и установить на сайт WordPress поговорим в видео ниже.
И по старой доброй традиции, под видео вы найдете ссылки на сервисы, которые можно использовать при поиске и обработки изображений.
Меня часто спрашивают, какими сервисами я пользуюсь при работе с сайтом и графикой, отвечаю — я пользуюсь продуктами Adobe, это Photoshop и Illustrator. Все таки графика после обработки в этих программах несравнимо лучше. Да и за 10 лет я настолько привыкла ими пользоваться, что теперь это у меня в крови😃. Знаете, такой инстинкт, когда сажусь работать сразу запускаю Photoshop😊
Но вот моим подписчикам, новичкам в особенности, эти программы кажутся сложными, поэтому я держу под рукой и набор сервисов, которые могут решить определенную задачу при работе с графикой.
Смотрите видео “Как создать фавикон и установить на сайт WordPress”
Скажите, все ли понятно из статьи? Может быть у вас остались вопросы или хотите получить совет? Пишите в комментариях!😉
И попрошу оценить статью — кнопочки ниже. Благодарю.
Что такое фавикон
Фавикон (favicon, сокращенное от favourite icone) — маленькая иконка, которая сопровождает сайт в интернет-среде. Эта иконка появляется на вкладках, в результатах поиска и помогает сайту быть более узнаваемым.
Крохотная иконка, которую вы сейчас видите на вкладке этой статьи — это и есть фавикон. Обычно иконка полностью или частично копирует логотип бренда, но адаптирована к маленькому размеру — она должна хорошо читаться.
Зачем нужен фавикон
Фавикон помогает человеку ориентироваться в интерфейсе, повышает узнаваемость ресурса и кликабельность.
Помогает в навигации
Фавиконка помогает быстро находить сайт среди других. Когда открыто много вкладок, проще найти значок, чем считывать название каждой вкладки.
Фавиконы можно увидеть:
Вызывает доверие
Хорошо оформленный сайт производит хорошее впечатление. Фавикон — часть этого впечатления. Сравните сами: на скриншоте ниже вкладки в мобильном браузере Chrome. На второй снизу вкладке пустая иконка. Вкладку сложнее выделить взглядом среди остальных, да и выглядит она менее презентабельно, чем соседние.
Сайты с фавиконками и без них во вкладках мобильного браузера
Увеличивает кликабельность
Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но
если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.
Создание favicon
Итак, с задачами фавиконки для сайта мы разобрались. Теперь расскажу, как ее создать с учетом этих задач, и дам список сервисов, которыми могут воспользоваться не-дизайнеры.
Визуальная составляющая
Что учитывать при создании фавиконки:
- Размер. В некоторых интерфейсах и на маленьких экранах он может достигать 16 на 16 пикселей.
- Читаемость. Иконка должна читаться в разном окружении — на вкладках и в истории, в результатах поиска.
- Стиль бренда. Даже если ваш логотип не удается перенести в микро-формат, нужно сделать что-то связанное, в айдентике бренда.
Покажу несколько примеров, как разные компании переносят свой логотип в фавикон.
Мы тоже использовали для фавиконки графическую часть логотипа. Ее хорошо видно на вкладке благодаря различимой форме и контрастному цвету.
Логотип SendPulse и он же в виде фавиконки на вкладке
Размер: 120 * 120 пикселей, 32 * 32 или 16 * 16.
Формат: SVG (рекомендуемый), ICO, GIF (без анимации), JPEG, PNG, BMP.
- Робот возьмет любую из имеющихся иконок, которая ему доступна и подходит под требования сервиса, на котором нужно ее показать.
- Если сайт недоступен, робот возьмет произвольную иконку хостинга со страницы-заглушки сайта.
Требования Google к фавиконке
Размер: кратный 48 — 144 * 144, 96 * 96, 48 * 48. Загружать файл 16*16 не рекомендуется.
Формат: SVG, ICO, GIF (без анимации), JPEG, PNG.
Кроме этого, Google рекомендует следующее:
- Иконка должна совпадать с остальным графическим представлением бренда.
- Не стоит часто менять адрес файла favicon.
- Иконка не должна быть неприемлемо или непристойной, иначе поисковик заменит ее на стандартную иконку.
Сервисы для создания фавиконки без программиста
Требования есть, размеры и форматы описаны, но проще от этого не становится. Чтобы не разбираться, какие фавиконки нужны для каждого из интерфейсов, предлагаю воспользоваться одним из специальным сервисов. Они сгенерируют вам набор нужных favicons и код для вставки на сайт.
Realfavicongenerator
Этот сервис просит квадратный исходник с оптимальным размеров 260 на 260 пикселей. Здесь можно самостоятельно настроить результат: покрутить фон, отступы, цветовую тему.
Настройка получившихся иконок в Realfavicongenerator
В результате получаете пакет файлов для скачивания и код для встраивания на сайт.
Пакет нужно скачать в виде файлов и куска кода
Favic-o-matic
Попросит у вас квадратный исходник минимум 310 на 310 пикселей. Настроить здесь ничего не получится, после обработки автоматически начнется скачивание готового пакета и сгенерируется код для сайта.
Результат создания фавиконок в Favic-o-Matic
Favicon.ico & App Icon Generator
Размер исходника здесь не указан, но при загрузке не квадратного изображения сервис выдаст предупреждение. Настроить результат нельзя, вы получаете пакет файлов и код.
Готовый пакет фавиконок и код для сайта в Favicon.ico & App Icon Generator
Faviconit
Этот сервис попросит исходник минимум 310 на 310 пикселей и весом не более 5 Мб. После обработки вы получите пакет с файлами, внутри которого будет лежать и текстовый файл с кодом для встраивания на сайт.
Готовый пакет фавиконок и код для сайта в Faviconit
Как добавить фавикон на сайт
Итак, у вас есть файлы и код. Теперь нужно все это поместить на сайт, чтобы подготовленные фавиконки начали отображаться в поиске, на вкладке и в других локациях.
Загружаем иконки на сайт
Иконки нужно положить в корневую папку вашего сайта. Для этого понадобится доступ к сайту на хостинге, где он лежит. Загрузить файлы можно либо через собственную панель управления, если такая есть у вашего хостинг-провайдера, или какой-нибудь файловый менеджер, например, FileZilla.
Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.
Редактируем код
Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент. Выглядеть это будет примерно так:
Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.
Фавикон: что следует запомнить
Фавиконка — маленькая иконка, которая появляется рядом с названием сайта на вкладке, в закладках и истории браузера и в прочих онлайн-интерфейсах. Она помогает пользователю быстро находить ваш сайт среди других, повышает его узнаваемость и вероятность клика.
Чтобы создать хороший фавикон для сайта, помните о трех факторах. Иконка будет очень маленького размера, но при этом должна хорошо читаться и вписываться в айдентику бренда.
Фавиконок нужно несколько на разные локации. Чтобы не запоминать размеры и свойства всех нужных иконок, используйте один из специальных сервисов. Сервис выдаст вам готовый пакет фавиконок и кусок кода, которые нужно будет загрузить в корневую папку вашего сайта и вставить в код главной страницы.
Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!
Рассказываю, как делать по-настоящему крутые email рассылки. Помогаю найти баланс между заботой о клиенте и успешными продажами.
Сайт без фавикона (favicon), как корабль без флага. Фавикон — неотъемлемая часть бренда сайта, его имиджа и идентификации. Кстати, посмотрите на выдачу какой-нибудь поисковой системы (например, Яндекса). Вы обязательно обнаружите рядом с заголовками найденных страниц и документов фавиконки. Т.е. фавикон, это еще и фактор повышающий кликабельность вашего сайта в результатах поиска. Поэтому, без фавикона никуда!
Как изготовить фавикон? Процесс условно можно разделить на 2 этапа:
- Изготовление фавикона или нахождение уже готового;
- Установка его на сайт.
Поэтому, от такого варианта лучше отказался и изготовил фавикон собственными руками. Давайте на этом процесс остановимся подробнее. В ходе работы можно использовать:
Графические редакторы
Онлайн сервис Favicon.cc
Для меня использование в качестве инструмента графического редактора — самый органичный вариант, но, он не единственный, потому что существуют специальные веб-проекты, с помощью которых можно рисовать фавиконы. Примером может послужить сайт Favicon.cc, который позволяет создать иконку по пикселям:
Это лишь один из примеров, на самом деле есть очень много сайтов — сервисов создания favicon онлайн — бесплатные, с разной функциональностью и на любой вкус.
Онлайн генераторы фавиконки
Еще один вариант решения задачи — веб-сервисы, которые в автоматическом режиме генерируют картинку. Например проект Логастер.
Так как сайт изначально заточен на разработку логотипов, то сначала придется начинать именно с него. Затем специальный инструмент подберет разные варианты favicon для вашего случая. Редактор позволяет менять внешний вид объектов картинки, текстов и оформления. Детальнее об этом читайте в статье про создание фавиконки в Логастере. Заметка пригодится новичкам, если сходу разобраться сложно.
Установка favicon
По умолчанию в качестве иконки сайта отображается значок браузера. Чтобы сайт отличался от остальных и не затерялся в бесчисленном количестве серых вкладок, открытых пользователем, нужно сделать свою оригинальную фавиконку.
Хотя многие современные веб-браузеры поддерживают фавиконки в формате GIF, PNG или других популярных форматов файлов все версии Internet Explorer по-прежнему требуют значки в виде файлов ICO (формат Microsoft). В этом формате вашу иконку поймет любой браузер.
Зачем нужна фавиконка
Фавиконка нужна, чтобы ваш сайт как-то выделялся в общей массе на странице результатов поисковой выдачи и был заметен во множестве открытых вкладках в браузере. Хорошая иконка является как бы логотипом вашего сайта, который будет узнаваем и создающий определенное отношение и вызывающий особый уровень доверия.
Естественно, что фавиконка способна привлечь внимание пользователя и он прочтет заголовок-ссылку на вашу статью. Заголовок, в комбинации с хорошим сниппетом и красивой иконкой, увеличит кликабельность и соответственно посещаемость ресурса.
В чем создать favicon
Создание фавиконки онлайн
Если предыдущий вариант по каким-либо причинам вас не устраивает, то можете попробовать быстрый, легкий и простой способ и сделать фавиконку за несколько минут с помощью сервиса Logaster.
Logaster — это онлайн-сервис для создания логотипов и элементов фирменного стиля. В нем вы в автоматизированном режиме, буквально в несколько кликов, получите иконку для сайта в формате ICO и PNG.
Но учтите, что никакой автоматический генератор логотипов не может заменить творчество человека.
Конечно, крупные компании такими инструментами пользоваться не будут. Они найдут дорогого дизайнера, который создаст для них профессиональный логотип. Но, небольшим фирмам, частным предпринимателям такой инструмент может быть как раз кстати.
Как происходит процесс создания иконки в Логастер
- Чтобы фавиконка сочеталась с вашим логотипом, вам будет предложено сначала создать логотип (это бесплатно).
- Напишите название и, если хотите, слоган, указываете вид деятельности, а Logaster самостоятельно подготовит для вас множество вариантов логотипов.
- Выбираете подходящий логотип, вы сможете изменить его позднее.
Вот что у меня получилось
Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).
Теперь переходим непосредственно к созданию фавиконки.
Вот какая получилась фавиконка. В принципе, выглядит неплохо.
Как добавить фавиконку на свой сайт
- Купите и активируйте фавиконку.
- Скачайте ее.
- Разархивируйте скачанный файл в корневую папку вашего сайта.
- Вставьте следующий код на все страницы сайта в тег :
Дизайн-пакет со скидкой
Дополнительно вы можете приобрести весь комплект фирменного стиля. Вот один из вариантов.
Плагин для создания фавиконок
Существует огромное количество разных программ для создания фавиконок. В основном они являются примитивными, позволяющими создать иконки, используя при этом 16 цветов.
Как установить плагин ICO (Windows Icon) Format
Как сделать favicon.ico самому
Отображение favicon
Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.
Как подключить favicon
После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции документа HTML.
В некоторых темах подключение происходит программно, с помощью php-кода:
Как проверить корректность установки фавиконки
Возможные проблемы
Бывают проблемы с фавиконкой в Яндексе — Вебмастер ее почему-то не видит. На что поддержка отвечает таким письмом:
Читайте также: