Универсальный способ создания фавиконов. Создание Favicon онлайн Favicon – лицо вашего ресурса в браузере

Фавикон - термин дословно переводится как «любимая иконка» - считается одним из самых сложных элементов современного веб-дизайна. Это небольшое изображение, которое располагается на вкладке браузера, в поисковой строке и других местах, и играет важную роль в персонализации сайта.

Из-за нестандартного формата и небольшого размера создание фавикона может быть сопряжено с трудностями, причем как с технической, так и с дизайнерской точки зрения.
Не менее сложной задачей является обеспечение совместимости фавикона с различными браузерами.

В этой статьи вы узнаете, как сделать фавикон - мы дадим советы по дизайну и расскажем про сервисы для создания фавикона, и как добавить фавикон на сайт.

Что такое фавикон и зачем он нужен

Несмотря на то, что фавикон – это очень маленький графический объект, он крайне важен в дизайне сайта и в целом.

Кликните , чтобы увеличить картинку.

Во-первых , фавикон делает ваш сайт более персонализированным и выдержанным в едином стиле с другими графическими элементами, такими как логотип.

Во-вторых , фавикон выделяет ваш сайт среди прочих веб-ресурсов в списке поисковой выдачи. Сайт без этой мини-иконки будет блекло смотреться и проигрывать конкурентам. Одним словом, фавикон – это просто “must have” для сайтов.

В-третьих , фавикон позволяет пользователю быстрее находить ваш сайт в каталоге закладок или других иконок на рабочем столе.

Создание дизайна фавикона

Фавикон должен отразить суть и бренда в крошечном знаке размером со смайлик. Хорошим решением станет упрощенный вариант логотипа компании, но учтите: полноценный логотип с текстом и товарными знаками для этой цели не подходит.

Эти веб-сайты используют графический знак своего бренда (или, по крайней мере, что-то похожее на него).

Не используйте текст

Следует отказаться от использования текста, потому что из-за небольшого размера фавикона надписи будут нечитаемыми. Поместите на иконку 1, максимум 2 буквы – например, первые в названии вашей компании или веб-ресурса; в этом случае их еще можно будет различить.

Пикселизация фавикона

Фавиконы настолько маленькие, что в них имеет значение каждый пиксель. Зачастую при уменьшении полноразмерного логотипа изображение получается расплывчатым.

Это фрагмент полноразмерного логотипа Facebook после его уменьшения до размера 32×32. Легко заметить, что по краям изображение «плывет». Чтобы избежать такого дефекта, следует провести редактирование на пиксельном уровне.
При работе с иконками я предпочитают использовать программы для редактирования растровых изображений (например, Photoshop или Pixelmator). Сначала я уменьшаю полноразмерный логотип до размера 64×64 пикселя, поскольку это самый большой фавикон, который мне понадобится. Труд очень кропотливый, может занять целый час, а то и два, но зато результат получается просто отличный.
Если у вас нет времени и навыков в подобных операциях, лучше использовать онлайн сервисы, такие как Logotizer.ru

Размер фавикона

Получив иконку размером 64×64, я точно так же создаю иконки размером 32×32, 24×24 и 16×16 пикселей. У каждой из них свое предназначение:

– 64×64 – “Список для чтения” в Safari и Windows
– 24×24 – Закрепленные сайты в IE9.
– 32×32 – Для экранов с высоким разрешением.
– 16×16 – Обычно используется в таких браузерах, как IE, Safari, Chrome и т.д.

Но созданием более мелких фавиконов дело не ограничивается: зачастую требуется дополнительное редактирование на пиксельном уровне. Также вы можете добавить альфа-канал, если сочтете нужным. Если ранее это вызывало затруднения, то сейчас практически все браузеры поддерживают прозрачность в фавиконах.

Форматы фавикона

Раньше, когда поддерживались только файлы формата Windows ICO, мы могли сэкономить время, сохранив фавикон размером 16×16 в формате GIF и дав ему расширение.ico. Такой прием работал безотказно! Но теперь в этом методе нет необходимости, поскольку инструменты для создания файлов ICO можно легко найти в Интернете. Более того, сейчас для фавиконов используются и , но самыми распространенными все же являются только следующие два.

ICO

Пальма первенства принадлежит формату ICO. В отличие от файлов PNG, файлы ICO могут иметь разное разрешение и битовую глубину (что отлично подходит для Windows). Браузер Internet Explorer использует фавиконы различных размеров (например, 32-пиксельные иконки для панели задач Windows 7), и поэтому в данном случае формат ICO является единственным вариантом.

Файлы PNG отличаются большим удобством, поскольку для их создания не нужны никакие специальные инструменты. Этот формат поддерживает альфа-канал и позволяет создавать файлы самых маленьких размеров. Пожалуй, единственный недостаток формата PNG заключается в том, что он не поддерживается в браузере Internet Explorer.

Есть и другие варианты:

– Форматы GIF и анимированный GIF не имеют никаких преимуществ, кроме совместимости с очень старыми браузерами.
– Формат JPG использовать не рекомендуется, даже если изображение представлено в виде фотографии. Этому формату недостает четкости PNG, а единственное достоинство заключается в более плавных переходах между цветами – нюанс, который на очень маленьком изображении совершенно незаметен.
– SVG мог бы стать отличным вариантом, если бы больше браузеров поддерживали фавиконы этого формата. Пока же имеется совместимость только с Opera.
– Также существует так называемый “подформат” PNG – APNG (анимированный PNG), который поддерживается в Firefox и Opera. Однако целесообразность его использования остается под вопросом. Анимированный фавикон может отвлекать внимание и даже раздражать пользователя.

Создать фавикон онлайн – инструменты и онлайн сервисы

Мы выбрали для вас самые полезные сервисы, которые помогут создать фавикон онлайн.

Logotizer

Logotizer – новый, простой и удобный сервис для создания фавикона и логотипа для вашего сайта.
С помощью этого онлайн-конструктора вы можете создать фавикон с нуля. Сервис ориентирован на новичков, поэтому разработать хороший дизайн не составит труда.

Как создать фавикон с помощью онлайн генератора Logotizer

Основная рабочая область находится слева. Справа вы можете видеть, как фавикон будет смотреться на различных носителях – вкладке браузера, панели задач компьютера или экране смартфона. Очень удобно и наглядно.

Вначале следует выбрать форму для фавикона. Их очень много, больше 50. Мы советуем выбирать простые и незамысловатые формы, чтобы сделать фавикон легким для восприятия и запоминания.

На этом этапе вы также определяете цвет формы, который идет в качестве фона фавиконки, и подбираете рамку. Посмотрите, какой цвет доминирует в вашем логотипе (если он есть), какие цвета являются основными на вашем сайте. Именно в рамках этой гаммы мы советуем создавать дизайн фавикона.

Ниже блока “Форма” расположена коллекция фигур (символов). Их не так много, жаль, что нельзя загружать свои варианты; но выбор все равно достаточно интересный.

Меняйте цвет, размер, расположение фигур! Одним словом, экспериментируйте, благо, сервис позволяет это сделать.

После того как фигура выбрана, можно добавлять свой текст. Как я писал ранее, лучше использовать 1 или 2 буквы, не больше.

Есть обширный выбор шрифтов. Это однозначно плюс. Как и в случае с фигурами, вы можете менять цвет, размер, расположение текста.

Если вы решили, что какой-то слой фавикона вам временно мешает или совсем не нужен, вы можете просто его скрыть.

После создания фавикона сервис предложит сохранить его. Зарегистрируйте аккаунт (в 2017 году без регистрации никак), и после этого вы сможете скачать файлы при небольшой оплате – 199 рублей.

На сайте еще присутствует небольшая инструкция, как добавить фавикон на сайт, поэтому с добавлением фавикона на сайт у вас не должно возникнуть проблем. Ниже в этой статье также приведены подобные рекомендации.

После оплаты пользователь получает сразу 10 фавиконок разных размеров под все необходимые на сегодняшний день устройства (Аpple touch icon, Microsoft Application Icons и другие).

Сам файл favicon.ico является мультиразмерным и содержит в себе иконки 4 размеров в 1 файле (16px, 24px, 32px, 64px). Соответственно, если добавить сайт в закладки браузера или открыть историю – можно будет наблюдать иконки разного размера, но отображаться они будут четко и без размытия.

В целом сервис хороший. Простой, удобный, ничего лишнего.

RealFaviconGenerator.net

– это более простой фавикон-генератор, который позволяет создавать фавиконы для любых платформ. Более того, на ресурсе можно протестировать фавикон. Введите URL своего сайта, и вы увидите, как ваш фавикон выглядит в каждом браузере и в каждой операционной системе. Real Favicon Generator также подскажет вам, как исправить недостатки и сделать ваш фавикон еще лучше.

Favicon.by

Favicon.by – еще один бесплатный и простой в использовании генератор фавиконов, который конвертирует файлы PNG, JPG и GIF в формат.ico. Загрузите изображение с вашего компьютера, выберите размер (16x16px или 32x32px) и нажмите на кнопку “Создать”. Чтобы сохранить полученный фавикон на своем сайте, следуйте указаниям.

Также сервис дает возможность нарисовать лого по пикселям, но, если честно, это под силу не каждому. Вот, например, я – не смог. Вот такой я криворукий:)

Как добавить фавикон на сайт

Добавить фавикон на сайт можно, сделав несколько правок в HTML – коде страницы сайта.

Шаг 1: Загрузите файл “favicon.ico” на свой хостинговый сервер.

Для этого зайдите в свой FTP-сервер по этой ссылке:
ftp://[email protected]
Введите свои имя пользователя и пароль. Их можно получить в панели администратора вашей хостинговой компании.
Загрузите файлы с фавиконами в корневой каталог. Корневой каталог обычно называется “public_html” или “www”.

Шаг 2: Добавьте фавикон в HTML.

Держа окно FTP-сервера открытым, скачайте файл “index.html” или “header.php”.
Затем вам нужно загрузить код. Загружаемый код зависит от вашего веб-сайта.
Если ваш сайт на HTML, найдите область HEAD в файле index.html и вставьте следующий код:

Если ваш сайт на WordPress, найдите область HEAD в файле header.php и вставьте следующий код:

/favicon.ico” />

При помощи этих кодов браузеры смогут найти ваши фавиконы.
Итак, вы установили свой фавикон!

Как добавить фавикон на WordPress и другие платформы

Если ваш ресурс базируется на WordPress или другой CMS, то добавить фавикон на сайт очень просто. В целом алгоритм добавления фавикона для разных платформ будет одинаковым.
1. Вам нужно зайти в консоль сайта.
2. Найти раздел “Дизайн” или “Внешний вид”.

3. Зайти в раздел “Настройки темы” и найти там “Фавикон”.

4. Загрузить фавикон из вашего компьютера.

5. Сохранить и обновить страницу.

Как создать более сложные фавиконы

В этой статье рассмотрены простые и быстрые способы создания фавиконов, совместимых с практическим любыми браузерами и операционными системами. Но когда дело касается веб-дизайна и разработки, предела совершенству нет. Если вы хотите научиться делать более сложные фавиконы, тач-иконки для главных экранов iOS, иконки для интерфейса Metro в Windows, иконки для Google TV и многое другое, я рекомендую вам ознакомиться с этими материалами: favicon cheat sheet . Там собрана полная информация по теме и приведены хорошие источники. Это отличный вариант для тех дизайнеров и разработчиков (включая меня), кто постоянно стремятся расширять свои знания.

При помощи Favico.js вы можете создавать динамические фавиконы с цифрами.

Также вам может понадобиться динамический фавикон, который имеет значок с изменяющейся цифрой. Для создания таких фавиконов я советую воспользоваться сервисом favico.js , доступным на Github. Пока динамические фавиконы совместимы не со всеми браузерами. Но для тех браузеров, которые их поддерживают, эти иконки могут стать интересным и полезным дополнением.

Если вы хотите пополнить эту статью еще одним советом или задать вопрос, оставляйте комментарии ниже!

Всем привет!

В этой статье я расскажу вам о том, как установить фавикон на сайт. Сделать это можно с помощью корневого каталога сайта или используя функционал шаблона. Мы разберем все варианты и определим, какой из них будет наилучшим для того или иного случая.

Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.

В Яндекс Вебмастере отсутствие фавикона классифицируется как ошибка, которую срочно нужно исправить. Связано это не только с тем, что люди в поисковике могут не доверять сайту без иконки, но и с определенными поисковыми алгоритмами. Роботы видят такие технические недостатки и чаще всего понижают ресурс в выдаче. Печальное явление, которое может сказаться на всем SEO-продвижении.

Подведем небольшие итоги:

• Favicon влияет на поведенческие факторы и кликабельность в выдаче.
• Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
• Такой технический недочет может привести к падению трафика.

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.

Где скачать готовый вариант

Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.

Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

Создание фавикона

Онлайн-сервисы

Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.

На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.

Легкое создание Favicon для сайта размером 16x16px. Онлайн редактор позволяет за пару минут создать свой собственный и уникальный фавикон для сайта.

Создать Favicon

Как добавить Favicon на сайт?

Добавить свой созданный фавикон на сайт, очень легко. Переименуйте иконку в favicon.ico , после чего загрузите ее в корень вашего сайта, чтобы иконка была доступна по адресу: www.mysite.ru/favicon.ico . После загрузки файла favicon.ico , необходимо добавить следующий код в шаблон вашего сайта:

Данный код необходимо поместить в верхней части страницы вашего шаблона, между тегами ....

После этого необходимо обновить страницу в браузере. В некоторых случаях, если браузер не отображает иконку Favicon, может потребоваться обновить кэш браузера в настройках.

Функции и возможности редактора Favicon?

Наш онлайн редактор Favicon имеет довольно простой интерфейс, при этом позволяет очень качественно создать иконку фавикон для сайта.

Возможности:

• Выбор 1 из 8 предустановленных ярких и сочных цветов для кисти.
• Выбор любого цвета для рисования в формате Hex кода (пример: #ff5555).
• Удобный выбор любого цвета для рисования с использованием палитры и ползунков
• Инструмент «Кисть для рисования»
• Инструмент «Заливка фона» позволяет полностью закрашивать фон или отдельную часть иконки, если есть разделение.
• Инструмент «Стерка» позволяет стирать любые участки иконки
• Инструмент «Пипетка» позволяет определить любой цвет который использовался ранее. Данный инструмент работает только в области окна редактора.
• Возможность подключать/отключать сетку, для более точного рисования Favicon
• Возможность смены фона на белый или клетчатый

Для чего нужен Favicon на сайте?

В первую очередь отображение Favicon сайта, украшает вкладку открытия сайта в браузере и закладки браузера.

Также наличие на сайте иконки Favicon, придает сайту более красивое отображение в поисковой выдаче популярных поисковых систем.

Зачем мне рисовать Favicon?

Рисование своими руками на онлайн сервисе создания Favicon, даст вашей иконке полную уникальность. Вы можете полностью с нуля нарисовать фавикон для сайта используя для этого простые инструменты (кисть, стерку и заливку). При этом рисовать можно совершенно любыми цветами и в любом положении.

Как правильно нарисовать Favicon?

При рисовании favicon для сайта, важно знать что в сетке иконки 16x16px располагается 256 пикселей. При точечном рисовании фавикон кистью, она закрашивает 1px.

При создании Favicon, особое внимание уделите цветам на палитре. Если вы хотите сделать качественную иконку, которая не будет выглядеть как "пиксель", обязательно сделайте смягчение углов. Делается это очень просто. Достаточно выбрать в палитре цвет светлее основного и закрасить им необходимую область. В данном случае иконка получит мягкие углы. Таким приемом можно рисовать идеальные фигуры (круги, овалы и пр.). Примеры рисования Favicon можно посмотреть на странице

Фавикон видно во вкладке браузера, в закладках, на экране мобильного телефона. Раньше можно создать favicon одного размера для отображения в браузере, сейчас необходимо генерировать иконки под разные мобильные платформы и технологии.

Что такое фавикон

Favicon для сайта – это “favorites icon”, изображение, которое является логотипом сайта. Первоначально служил для визуального выделения сайтов в закладках браузера. Но потом стал отображаться во вкладках браузера, в адресной строке и на странице поисковой выдачи рядом с url сайта.

Очень долго основным форматом фавикона для сайта был ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас более популярны форматы png и svg. Формат svg используется в Safari MacOS, а png - в остальных операционных системах и платформах. Фавикон бывает и в форматах jpeg и gif, однако мы не советуем использовать их, потому что такие фавиконы поддерживают не все браузеры.

Проверяйте поддержку браузерами разных типов фавиконов с помощью сервиса caniuse.com.

Самым перспективным форматом является svg. Это векторные фавиконы, которые мало весят, но хорошо отображаются.

Оставить заявку

Размеры фавиконов

Десктоп

Apple

Как создать

На первый взгляд самым простым способом создания фавикона кажется простое переименование файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Не рекомендуем это делать, потому что во многих браузерах такой значок будет отображаться с ошибкой или не показываться. Лучше всего сделать иконку для сайта с помощью специальных сервисов.

Realfavicongenerator.net – генерирует фавиконки разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки.

Favicon.cc – еще один сервис для создания favicon формата ICO. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

Как установить

Задайте правильное имя – favicon.ico или другой тип расширения. Однако помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.

Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата ico, для других форматов - соответствующее расширение файла. Браузер должен отобразить иконку.

Пропишите адрес в коде на главной странице в теге . Если требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в. С помощью head можно задавать для разных страниц сайта собственные иконки.

Десктоп (ico) -

Декстоп (png) -

Apple -

Safari -

Андроид -

Иконки в гаджетах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:

Запомните

Самым распространенным форматом фавиконов является ico, но он устаревший. Лучше использовать формат png и svg. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.

Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.

Чтобы сделать favicon, воспользуйтесь специальным сервисами: realfavicongenerator.net, favicon.cc и другими. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

Положите фавикон в корневой каталог сайта или пропишите ссылку в теге. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их через на каждой странице.

Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

Материал подготовила Светлана Сирвида-Льорентэ.

Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон - это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в "Избранное".

Фавиконы самых популярных сайтов

Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.

Видеоверсия:

Каким должен быть фавикон

Прежде чем приступать к созданию самого фавикона, было бы неплохо остановиться на том, какими они должны быть в идеале. Итак, идеальный фавикон:

• Является четким и понятным
• Сделан в хорошем качестве
• Передает смысл вашего сайта
• Имеет общую стилистику с вашим сайтом
• Выделяется на фоне значков других сайтов

Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 2-х букв. Иначе, никто не сможет разобрать подобный текст, ведь размеры фавикона в основном составляют 16*16 пикселей.

Каких размеров бывают значки сайтов

Как Вы знаете, сейчас существует огромное множество браузеров, мониторов и устройств. И их требования к размерам фавиконов отличаются. Существуют следующие варианты размеров, которые следует учесть:

• 16*16px - стандартные размеры фавиконов, подходящие для большинства браузеров и устройств
• 32*32px - используются в некоторых случаях в Internet Explorer и Safari
• 57*57px - используются при отображении на iPhone
• 72*72px - используются при отображении на iPad
• 114*114px - используются при отображении на ретина дисплеях (57*2=114)
• 144*144px - используются при отображении на ретина дисплеях iPad (72*2=144)

Какого формата должны быть фавиконы

Раньше браузеры воспринимали фавиконы только в формате "ico" . Сейчас они научились понимать и другие форматы, в том числе и "png" . В нашем случае, мы убьем 2-х зайцев одним выстрелом. Вначале мы создадим фавикон в формате "png" , а затем сконвертируем его в "ico" .

Несколько способов создания фавиконов

На сегодня существует два основных способа создания фавиконов:

1. Через специальные онлайн сервисы
2. Создание самостоятельно через специальные программы типа Photoshop и Adobe Illustrator

Каждый способ имеет свои особенности. Преимущество создания фавикона через онлайн сервисы состоит в том, что Вам не нужно для этого обладать какими-то специальными навыками. Вы просто загружаете необходимое изображение, дорабатываете его и скачиваете готовый фавикон. Либо просто работаете с текстом и рисуете значок инструментами онлайн сервиса. В общем, главный плюс данного метода заключается в простоте. Однако, обратная сторона медали заключается в том, что качество таких значков для сайтов оставляет желать лучшего. Уникальный фавикон вы не получите по той простой причине, что галерея значков онлайн сервисов не является безграничной. А при использовании собственных изображений, при помощи инструментов сервиса не так-то просто создать качественный продукт. В случае рисования значка вручную через инструменты онлайн сервиса получается "нечто невообразимое".

Поэтому, мы выбираем второе, более сложное но удачное решение. Для создания фавикона мы воспользуемся программой Photoshop . Если вы не имеете опыта работы с этой программой, то ничего страшного. Следуя моим инструкциям вы легко справитесь с поставленной задачей.

Создаем фавикон

Как я уже упоминал, фавикон можно создать при помощи изображения или просто букв. В нашем случае я буду использовать какую-нибудь картинку. Например, давайте представим что у нас сайт автомобильной тематики. Следовательно, нам нужно найти изображение из области авто. Я предлагаю сделать значок нашего сайта в виде колеса.

Подбираем изображение

Брать изображения Вы можете откуда угодно. Например, через тот же яндекс картинки . Главное условие - чтобы изображение было простое, без теней и объемов. Это связано с тем, что при ее уменьшении до размеров в 16 пикселей она не будет обладать большой детализацией. Из-за лишних объемов и теней картинка может смазаться.

Я нахожу подходящее изображение при помощи поиска google по запросу "колесо". Мне лишь остается ее сохранить кликнув правой кнопкой мыши и выбрав функцию "Сохранить картинку как".

Подходящее изображение в google images

Далее, мы открываем это изображение при помощи Photoshop . Очень важно, чтобы фавикон был с прозрачным фоном. В нашем случае это не так. Для удаления заднего фона мы используем инструмент "Волшебная палочка". Суть ее работы очень проста. С помощью этого инструмента мы можем выделять области на изображении одного и того же цвета. Так как фон нашего изображения четко контрастирует с самим колесом, сделать это будет очень легко. Кликнув один раз мы выделяем одноцветную область. Нажав сочетание клавиш CTRL+Delete мы удаляем эту область.

Удаляем фон нашего колеса

Делаем это со всеми частями фона изображения. Таким образом, на нашей картинке колесо находится на прозрачном фоне, что и требовалось сделать. Итак, заготовка для значка нашего сайта готова.

Создаем фавикон в 2-х разных размерах

Я предлагаю сделать 2 фавикона размерами 64px и 16px. Для начала нам нужно создать значок большего размера (64px). Для этого мы нажимаем сочетание клавиш CTRL+N . В появившемся окне мы выбираем высоту и ширину изображения в 64px.

Задаем размеры будущего фавикона

Далее, нам необходимо перенести наше колесо в область только что созданного изображения. Для этого мы возвращаемся на картинку с колесом и выбираем инструмент "Перемещение". Следующим шагом мы кликаем по изображению колеса и при зажатой левой кнопке мыши перемещаем ее в область нового изображения. Убедитесь, чтобы при перемещении был выделен слой с колесом. В противном случае перенос не удастся.

Переносим колесо в новое изображение

После перемещения колеса в новое изображение мы видим что они не подходят по размеру. Нам нужно уменьшит колесо до размеров в 64 px. Для этого мы зажимаем клавишу SHIFT и кликнув по диагональной точке изображения уменьшаем ее. Вот мы и создали первый фавикон для нашего сайта. Напоминаю что он у нас размером 64*64px. Теперь нам остается сохранить ее выбрав функцию "Сохранить для веб" во вкладке "Файл". Мы выбираем формат PNG-24 и папку images . Сам фавикон называем также, только латинскими буквами - "favicon" .

Сохраняем фавикон

Отлично. Теперь нам остается создать фавикон меньшего размера. Для этого мы кликаем по вкладке "Изображение" и выбираем функцию "Размер изображения". Здесь мы задаем ширину и высоту в 16px. Теперь нам остается сохранить данное изображение для веб. Ее мы можем назвать "favicon-2".

Итак, вот мы и создали 2 фавикона для нашего сайта в формате "png" . Мы создали сначала вариант с размером в 64px для того, чтобы потом легко уменьшить ее до размеров в 16px. Если вначале создать вариант с 16px, то увеличить ее до 64px без потери качества не получится. Поэтому, имейте это ввиду чтобы не делать двойную работу.

Устанавливаем фавикон на сайт

Для установки фавикона на сайт внутри тега мы прописываем:

В случае, если у нас фавикон в формате "ico" то мы вместо "png" прописываем "ico" . Например:

Как видите, значок сайта отображается как мы и задумывали.

Конвертируем значок для сайта в формат "ico"

Современные браузеры без проблем могут распознавать и отображать фавиконы в формате "png" . Однако, у Вас может возникнуть необходимость конвертировать ее в формат "ico" . Одним из преимуществ данного формата является хранение фавиконов всех размеров в одном файле. Согласитесь, что это очень удобно. Итак, для конвертации наших значков мы воспользуемся классным сервисом - xiconeditor.com . Работать с ним очень просто. Все происходит 4 шага:
1. Для начала нам нужно загрузить наши фавиконы. Для этого мы кликаем по кнопке "Import" .

Загрузка фавиконов в сервисе xiconeditor.com

3. При желании можно кликнуть на кнопку "Preview" и посмотреть как они будут отображаться. Для скачивания наших фавиконов в формате "ico" мы кликаем по кнопке "Export" .

Итак, вот мы и научились создавать фавиконы в "png" и конвертировать их в формат "ico" . Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!