Что такое фавикон?
Для тех, кто не знает, что такое фавикон, дадим небольшую справку, которая позволит войти в курс дела. Фавикон - это небольшая иконка размером 16х16 или 32х32 пикселей, содержащая, как правило, логотип, первую букву бренда или характерное изображение, отражающее тип бизнеса или тематику сайта.
Почему фавикон важен?
Фавикон выполняет следующие функции:
Брендинг.
Идентификация сайта пользователем (удобство использования).
Придает сайту профессиональный вид.
Остановимся более детально на основных преимуществах использования фавикон.
Узнаваемость бренда
Фавикон - как маленькое удостоверение сайта. Как было сказано во вступительной части, фавикон помогает пользователю запомнить ваш сайт среди множества просмотренных сайтов. Будь то история просмотра, результаты поиска в Google или список закладок сайтов в вашем браузере, фавиконы помогут пользователю легко узнать ваш сайт и зайти на него.
Доверие
Пользователи, как правило, судят о продавцах товаров и услуг в Интернете на основании того, насколько профессионально сделан их сайт. Небрежность в виде отсутствия фавикона (поисковые системы отображают сайт без фавикона иконкой пустого документа) легко может привести к потере доверия, особенно, когда пользователи сравнивают вас с конкурентами.
Повторные посещения
Известно, что люди лучше реагируют на изображение, чем на текст. Теперь предположим, что посетитель вашего сайта торопился, когда впервые посетил его, и решил добавить его в закладки, чтобы вернуться позже. Допустим, этот человек впоследствии решает снова посетить ваш сайт, для чего обращается к своим закладкам. Вам повезло, если у вас есть узнаваемый фавикон, такой, как заметная и уникальная буква G у Google и пользователь найдёт вас. Если фавикона нет, вас могут даже удалить из списка закладок.
Экономит время пользователя
Фавиконы экономят время, затрачиваемое пользователем на идентификацию сайта в закладках, истории или других местах, где браузер помещает фавикон для быстрой идентификации. Это просто облегчает жизнь среднестатистическому посетителю вашего сайта.
Преимущества для SEO
Если ваш сайт имеет фавикон, вы будете видны лучше в поисковой выдаче, чем сайты, в которых его нет, и следовательно, сможете привлечь больше посетителей.
Как создать фавикон?
Есть много инструментов, позволяющих создать фавикон за считанные минуты. Если у вас нет навыков дизайна или вы не знаете, как это делается, то можете попытаться сгенерировать фавикон, используя Logaster .
Для этого следуйте пошаговой инструкции:
Шаг 5. Создайте фавикон
Теперь, когда у вас есть логотип, нажмите «Создать фавикон с этим логотипом» на странице логотипа.
Шаг 6. Выберите необходимый дизайн фавикона
Как и в случае с логотипом, Logaster сгенерирует несколько десятков красивых и готовых к использованию фавиконов. Выберите понравившийся дизайн. Предварительный просмотр позволит увидеть, как ваш фавикон будет выглядеть на сайте.
Если вам нужно изменить фавикон, то сделать это можно через редактирования логотипа, так, как фавиконы создаются на основе дизайна логотипа. Поэтому, если вы хотите, например, другой цвет фавикона, вам нужно вернутся на страницу логотипа, изменить его цвет, а затем создать фавикон снова.
Найти вдохновения для фавиконки можно на сайтах:
Шаг 7. Скачайте фавикон
Вы можете приобрести фавикон отдельно, по цене 9.99$ или купить Дизайн-пакет, который включает в себя не только фавикон, но и логотип, визитную карточку, конверт и фирменный бланк. Как купить Дизайн-пакет, вы можете узнать .
После оплаты вы можете скачать фавикон в форматах ico и png.
Где я могу использовать фавикон?
Вы можете использовать фавикон:
На сайте;
Мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т.п;
Программах и приложениях для РC/Mac.
Как установить фавикон на сайт?
После того, как вы получили фавикон, его установка на сервер займет не больше пары минут и выполняется в два этапа. Для этого вам потребуется доступ к корневому каталогу вашего сайта и текстовый редактор, чтобы изменить HTML-код сайта.
Шаг 1. Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla . Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать .
Шаг 2. Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.
Откройте файл index.html в текстовом редакторе — Блокнот, Notepad++, Sublime Text.
Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.
Код можно скопировать на странице фавикона на сайте Logaster.
Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.
Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.
Большинство современных браузеров достаточно умные и умеют находить файл фавикона даже без такого кода, но только если фавикона имеет изображение формата 16х16 пикселей, название favicon.ico и сохранен в корневом каталоге вашего сайта.
Надеемся, что эта статья дала вам некоторую полезную информацию, которая поможет создать фавикон, который сделает ваш сайте более успешным и привликательным.
Новый урок в стиле воркшоп и на этот раз мы постигаем секреты фавикона. Favicon — небольшая иконка, которая отображается в закладках и строке браузера. Если у вас есть свой сайт и вы хотите выгодно отличаться от других даже в мелочах — favicon необходим. Наиболее выгодно, конечно, он смотрится среди закладок, на фоне блеклого списка адресов без всякой графической идентификации. Однако наш урок не столько про то, как прикрепить favicon в строку браузера, сколько про то — как нарисовать свой собственный favicon в программе Фотошоп.
В каком формате сохранить favicon?
Все зависит от браузера. Для Microsoft Explorer подходит формат иконки ICO . C этим форматом мы уже сталкивались, когда делали курсор. Для остальных браузеров от Google Chrome до Apple Safari подойдет обычный GIF или PNG . Favicon может быть полупрозрачным. Для этого его нужно сохранить в полупрозрачный PNG , а далее преобразовать в формат ICO . Сделать это можно в неплохой программе IcoFX . Однако для генерации фавикона существует масса сторонних сайтов и самый очевидный из их www.favicon.ru
Как поместить favicon на сайт?
Как быть уверенным в том что favicon сработает? Нужно соблюсти 4 условия.
- Фаил должен называться — favicon .
- Размер фавикона 16 на 16 px
- Оптимальное место для фавикона — корневая папка сайта.
- Адрес иконки прописать в мета-тегах heder-а в индексе сайта.
В HTML выражении это выглядит так:
Можно создать несколько иконок для разных браузеров, например одну в формате ICO , а другую в PNG и все это указать через тег link . Современные браузеры чаще всего сами ищут в корневом сайта фаил под названием favicon , однако для уверенности не помешает указать и точные линки.
Создаем favicon в Фотошопе
Создать favicon очень просто. Хотите сделать такой же favicon как у Вконтакте или Однокласников? Хороший favicon не сделать, уменьшая большие картинки во всяких «генераторах» фавиконов, которых полным полно в интернете. Фавикон очень маленький. Фактически мы это своего рода пиксель-арт , который имеет свои особенности. Нельзя написать букву и просто уменьшить её до 16px .
Подобный favicon будет размыт и нечеток, так как края буквы при изменении размера будут заходить на несколько пикселей. Получится своего рода anti-alias , который обычно является добром, но в случае с пиксель-арт подобные переходы как раз не нужны. С другой стороны стоит избегать и излишней «ободранности» на округлостях иначе получится привет гифки 1999 год.
Создайте фаил размером 16 х 16px . Мы создадим очень простой полупрозрачный favicon с в виде буквы, с толикой глубины. Глубина будет создана за счет тени и градиента.
Рисуем фон
Почему в заставке этого урока вы видите огромный гладкий и вылизанный favicon ? Потому что я его увеличил для заставки к уроку. Как у меня вышло качественно увеличить изображение 16px ? Очень просто, я всегда работаю в векторе, если его возможно использовать и если в этом есть смысл. А вектор легко переносит любую трансформацию и не теряет в качестве.
Выберите инструмент Rounded Rectangle Tool . На панели настроек выберите режим , что позволит рисовать в векторе. В выпадающем меню панели галочка — Snap To Pixels . Это необходимо для того, чтобы векторные контуры привязывались к пикселям и не рисовали «между» ними.
У нас есть поверхность faviconа , а полупрозрачные края создадут сглаженность округлости. Теперь пора избавиться от белого заднего фона, он не нужен. Отключите его видимость. Или сделайте двойной клик по слою, превратив его в обычный слой, а затем удалите.
Сегодня, снова поговорим о картинках для блога, то есть об иконке проекта, под название favicon. Обсудим, что такое фавикон, как его сделать и подключить к нашему сайту. А также, каких размеров должно быть данное изображение и почему каждый из вас должен, просто обязан, его установить. Ведь, даже этот значок может повлиять на посещаемость вашего блога.
Что такое favicon?
Понятие фавикон довольно простое и образовано от двух слов на латинице (собственно, как и все в интернет) — favorites icon. Это, в свою очередь, можно перевести, как иконка или значок. Смысл может быть и таким; любимая иконка или избранная. Почему такое название? Да все просто, favorites — это просто название закладок в браузере, соответственно название можно трактовать, как картинка для закладки или вкладки браузера. Ведь вы не могли не заметить, что при открытии сайта или добавлении его в закладки, мы видим не только его название,но и его картинку, которая и называется фавиконом. Надеюсь, смог объяснить, что это за зверь такой?
Для чего может понадобиться фавикон?
Ну здесь все проще пареной репы, фавикон необходим для индивидуализации интернет-проекта. То есть еще одна отличительная черта вашего блога будет данное изображение, которое сделает не только удобнее использование вашего сайта в браузере, но и при правильном подходе увеличит число посетителей вашего проекта .
Во-первых, в браузере это может быть удобно, почему? Например, когда у меня открыта куча вкладок — я могу ориентироваться по иконке сайта, который мне нужен в данный момент. То есть — это удобно, для таких, как я.
Во-вторых, эта картинка может привлечь больше посетителей на ваш ресурс с поисковой системы Яндекс , если она броская и выделяется среди других, но без фанатизма. Благодаря тому, что Яндекс подставляет favicon на первых девяти страницах выдачи, ваш блог будет отличаться от других. Именно, по этой причине стоит задуматься о подключении фавикона к вашему проекту . Вот так выглядят первые страницы выдачи.
Сделать favicon не составит никакого труда, потому что в сети огромное количество генераторов, которые способны из обычных изображений делать фавикон и дают возможность нарисовать ее с нуля самому. Еще, изображение можно сделать с помощью программы фотошоп, а потом с помощью генераторов преобразовать ее в нужный формат.
Отличия обычных изображений от иконок небольшие, но они есть. Картинка должна быть простой (сложные графические элементы сложно будет увидеть), размером 16×16 пикселей и обязательно в формате ico. Можно конечно использовать и форматы png или gif, но такие изображения будут отображаться не во всех браузерах, поэтому лучший вариант — использовать формат ico.
Рассказывать, каждый шаг о том, как сделать этот значок, я не вижу смысла, потому что с этим справится каждый. Главное учитывайте требования к изображениям и все получится. Если кратко, то скачайте или нарисуйте изображение и сделайте с помощью онлайн-генераторов, фавикон. Онлайн-генераторы можно найти набрав в поиске Google или Яндекс — favicon. Или вот ссылка на сервис, с помощью которого вы сможете нарисовать с нуля или сделать из готового изображения — фавикон: http://favicon.ru/
Как подключить фавикон для сайта?
Хорошо, значок готов, как теперь сделать, чтобы браузеры начали показывать favicon для сайта ?
После использования сервиса, скачайте готовую иконку для своего блога на компьютер. И загрузите картинку, с помощью ftp-клиента в корневую папку блога (public_html/site/ваш_файл_в_формате_ico) или в любую другую. Но лучше всего в корневую папку, просто так проще, при составлении пути к файлу.
Итак, файл загружен, что дальше? Теперь, можно проверить, если вы сомневаетесь, что файл загружен в корневую папку: ваш_site/favicon.ico. Если файл загружен в корневую папку , то он отобразиться по этому адресу. Дальше нужно прописать для каждой страницы ресурса между тегами
и следующий код:
А если значок в другой папке, то должно быть так:
Этот код считается общепринятым для многих интернет-ресурсов и будет работать на любом движке. Но можно для разных движков, прописать его по разному. Например, для wordpress, этот код будет выглядеть так:
/favicon.ico" />
Только, в этом варианте значок должен находиться в папке с шаблоном. Например (public_html/site/wp-content/themes/ваша-тема/favicon.ico).
После этих действий favicon для сайта начнет работать и вы его сможете увидеть во вкладках браузера. Но в выдаче Яндекс, файл не сразу будет показан, нужно сначала подождать пока робот Яндекса проиндексирует иконку и только после этого она начнет отображаться в выдаче, и то при условии, что ваш блог будет находиться на одной из первых девяти страниц выдачи.
На этом все. Если, что не понятно — спрашивайте — разберемся. До новых встреч!
Сегодня мы затронем очень интересную тему. При работе над вашим сайтом, у вас рано или поздно возникнет необходимость в создании фавикона. Говоря простым языком, фавикон - это значок вашего сайта, который отображается на вкладке в браузере. Также, его можно увидеть в области быстрого доступа браузера, если ваш сайт был добавлен в "Избранное".
Фавиконы самых популярных сайтов
Думаю, нет смысла говорить о том, что фавикон должен быть хорошего качества, ведь он является в какой-то мере лицом вашего сайта. В данной статье мы научимся создавать удовлетворяющие нашим потребностям фавиконы, а также познакомимся с сервисом для их конвертации. Подробнее читайте ниже.
Видеоверсия:
Каким должен быть фавикон
Прежде чем приступать к созданию самого фавикона, было бы неплохо остановиться на том, какими они должны быть в идеале. Итак, идеальный фавикон:
- Является четким и понятным
- Сделан в хорошем качестве
- Передает смысл вашего сайта
- Имеет общую стилистику с вашим сайтом
- Выделяется на фоне значков других сайтов
Вышеперечисленные параметры можно отнести к идеальному фавикону. И нам необходимо создать именно такой значок для нашего сайта. Однако, существуют споры о том, что именно должно быть изображено на фавиконе. Я считаю, что в этом вопросе нужно исходить из общей стилистики и тематики вашего сайта. На нем может быть изображена какая-нибудь картинка или текст. В случае размещения на фавиконе текста, он должен состоять не более чем из 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" .
Несколько способов создания фавиконов
На сегодня существует два основных способа создания фавиконов:
- Через специальные онлайн сервисы
- Создание самостоятельно через специальные программы типа 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" . Я специально не рассматривал детальную обработку изображения в фотошопе, так как для многих это будет излишне. При необходимости, вы конечно же можете дополнительно улучшить качество фавикона поработав с пикселями в фотошопе. Я же постарался изложить все самое необходимое и в упрощенной форме. И на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:
- Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
- Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.
На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
Favicon - (от англ. FAVorites ICON в переводе «значок для избранного») - значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.
Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.
Отсутствие иконки является ошибкой технической оптимизации ресурса, это снижает узнаваемость бренда, снижает CTR поисковых сниппетов, ухудшает поиск веб-ресурса по закладкам браузера и др.
У Яндекса есть специальный бот, который индивидуально индексирует фавикон всех сайтов. Периодичность добавления новых иконок в поиск составляет примерно от двух недель до одного месяца.
Куда загрузить фавикон чтобы он был онлайн?
Для отображения созданного Вами favicon.ico в виде значка сайта необходимо загрузить его в корневой каталог сайта (либо в любой каталог) и указать в коде шаблона сайта абсолютный или относительный путь к нему (), пример кода:
Зачем указывать путь к Фавикону?
При использовании одного значка сайта на всем сайте, если favicon.ico находится в корневой папке, путь к нему можно не указывать — браузеры сами его найдут и выведут в виде значка сайта. Большие или уникальные ресурсы используют разные значки сайта к каждой из своих категорий. Для этого в соответствующих шаблонах у них прописан путь к разным favicon.ico.