Сервис создания favicon. Как добавить фавикон на WordPress и другие платформы. Создание заготовки Favicon в Photoshop

Фавикон – это небольшая картинка, которая отображается на вкладке браузера. Также фавиконы можно увидеть в браузерных закладках – это сделано для того, чтобы пользователь мог быстрее найти нужный сайт. Несмотря на свой маленький размер, фавикон хорошо различим и значительно ускоряет поиск сайта или веб-страницы. Впервые возможность разместить иконку рядом с названием сайта появилась в 1999 году в браузере Internet Explorer 5. Тогда же был определен минимальный размер фавикона – 16 на 16 пикселей. Со временем этот размер стал стандартом и сегодня трудно представить себе профессионально сделанный сайт, который бы не имел фавикона.

Для создания фавикона подойдет любое растровое изображение. Главное, чтобы оно было достаточно лаконичным, так как трудно разместить сложную картинку со множеством деталей в квадратике 16 на 16 пикселей. После того, как изображение выбрано, можно воспользоваться одним из многочисленных генераторов фавиконов и в результате получить пиктограмму в формате ISO. Данный формат является стандартом, хотя практически все популярные браузеры поддерживают форматы PNG, JPEG и GIF. сайт предлагает вашему вниманию 10 лучших генераторов фавиконов.

Очень простой в использовании фавикон-генератор. Пользователю достаточно выбрать нужную картинку и нажать кнопку Generate Favicon. Размер изображения при этом не должен превышать 150 килобайт. После этого фавикон необходимо поместить в корневой каталог сайта и поместить сгенерированную строку кода в любом месте между и . С помощью данного генератора можно создавать иконки в форматах JPG, GIF и PNG.

Данный онлайн-генератор преобразовывает изображения в форматах JPG, GIF и PNG в формат ISO. Каких-либо ограничений на размер загружаемого файла не указано. Можно создавать фавиконы размером 16 на 16 и 32 на 32 пикселя.

Фавикон-генератор Faviconmatic создает пиктограммы самых разных размеров. Если вдруг потребуется сгенерировать большую иконку, к примеру, 64х64 пикселя – такая возможность есть. Но лучше, конечно, придерживаться стандартов. Как утверждают создатели сайта, генератор очень хорошо преобразовывает картинки, которые замечательно отображаются на всех браузерах. Пользоваться сайтом очень просто – нужно кликнуть по кнопке загрузки изображения и выбрать нужный файл. Минимальный размер загружаемой картинки – 32 на 32 пикселя.

С помощью этого генератора можно создавать фавиконы, загружая картинки с компьютера или из интернета. Также у пользователей есть возможность самим нарисовать иконку – на сайте имеется онлайн-редактор. Чтобы начать работу, нужно выбрать фоновый цвет и затем редактировать пиксели, закрашивая их контрастными по отношению к фону цветами. После того, как иконка будет создана, можно посмотреть, как она будет смотреться на вкладке. Если результат устроит, то пользователю остается выбрать только размер фавикона (16х16 или 32х32 пикселя) и нажать кнопку Download. Генератор создаст фавикон в формате ICO.

Бесплатный онлайн-генератор Freefavicon создает фавиконы из растровых изображений в формате GIF, PNG и JPEG. Создатели этого инструмента рекомендуют использовать для создания иконки простые изображения, так как комплексные логотипы и графика отображаются не очень хорошо. Также рекомендуется использовать квадратные изображения, так как при масштабировании картинки изображение искажается. После выбора нужного файла нужно нажать кнопку Favicon Go! и скачать zip-архив с фавиконом. Дальше все как обычно – картинку в корень, а строчку кода между и .

Генератор Favicon.pro преобразовывает в ICO файлы в форматах JPG, PNG и GIF. Пользователь может создавать иконки размером 16х16, 32х32, 48х48, 64х64 и 128х128 пикселей.

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

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


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

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

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

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

  1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

    В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

    Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

    Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона , которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image ».

    В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

    Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

    На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons » для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons » для просмотра галерей отсортированных по рейтингу.

  2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

    Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

  3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.

    Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать . После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов :

  1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки ).
  2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью . Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
  3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
  4. Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
  5. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
  6. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  7. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
  8. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
  9. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
  10. Фавикон-генератор — простенько и со вкусом...

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов :

  1. Галерея иконок для сайта favicon.ico — более чем 15000 мини-логотипов для вашего сайта на любой вкус и цвет
  2. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
  3. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
  4. The Favicon Gallery — еще чутка подходящих по размеру иконочек

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта . Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

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

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

В общем, если хотите задать или поменять путь до вашего фавикона , который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD , следующие строчки кода:

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php : wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон ? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на
");">

Вам может быть интересно

Анализ сайта в бесплатных онлайн сервисах Pr-cy, Cy-pr, Be1, Xseo и других
Юзабилити - как сделать свой сайт удобным для посетителей и попытаться их удержать как можно дольше за чтением ваших статей
Онлайн FTP клиент Net2ftp и Google Alerts - полезный сервисы для вебмастеров
Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие)

(аббр. от англ. “favorites icon” - «значок для избранного»). Он имеет, как правило, стандартный размер - 16x16, 32x32, 48x48, 64x64, 128x128 - и расширение.ICO, хотя некоторые браузеры поддерживают также расширения.GIF и.PNG.

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

xIconeditor

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

Faviconby

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

Favicon.cc

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

Favicon Generator

С помощью Favicon-generator можно создать favicon из любого изображения, или же выбрать из галереи уже готовых решений. Возможен поиск готовых favicon по цветовой гамме. На выходе получаете.ICO размером 16x16, или же zip архив с целым набором иконок для разных систем (web, Android, Microsoft и iOS) и разных размеров. Предварительный просмотр результатов отсутствует, так что Вы не сможете оценить качество полученных изображений, на загрузив их.
Кроме генератора favicon разработчики предлагают также графический редактор, обладающий основными инструментами для создания изображения и обеспечивающий предварительный просмотр полученных результатов непосредственно в процессе рисования.

Genfavicon

Очень простой в использовании инструмент - загружаете изображение (или вставляете ссылку на него), выбираете один из подходящих размеров (16×16, 32×32, 48×48 или 128×128) и, если изображение в окне предварительного просмотра Вам понравилось, сохраняете результат на свой компьютер. Остается поместить полученный файл в корневую директорию Вашего сайта, добавить ссылку на него в заголовок страницы, и Ваши страницы будут иметь собственный значок.

Prowdraw

Бесплатный online продукт для преобразования любого изображения в favicon . Поддерживает загрузку изображений в формате JPG, GIF, PNG, BMP и TIF. На выходе генерирует ICO файл одного из четырех выбранных размеров (16x16, 32x32, 48x48, 128x128) с четырьмя различными уровнями резкости. Все четыре отображаются на странице результатов, так что Вы можете сравнить и выбрать для загрузки наиболее приемлемый результат.

Dynamic Drive Favicon Generator

Предельно простой инструмент для создания favicon из существующего изображения . Поддерживаемые входные форматы: gif, jpg, png, и bmp (в gif и png поддерживается прозрачность). В дополнение к стандартному размеру 16x16 может генерировать Windows-иконки размером 48x48 и 32x32. Дополнительные настройки отсутствуют, однако кроме генератора favicon разработчик предлагает еще и отдельный продукт - favicon-редактор для создания иконок «с чистого листа».

Favicomatic

Помимо генерирования иконок самых разнообразных размеров, этот «заботливый» генератор favicon создает еще и фрагмент кода для вставки на страницы сайта (можно указать адрес Вашего сайта для генерирования корректной ссылки) и предоставляет возможность сохранить архивный файл с результатами работы непосредственно в Google Drive.

Favikon

Вся инструкция по использованию этого инструмента приведена в подзаголовке сайта - загрузи изображение, скадрируй его и скачай полученный favicon в формате ICO или PNG. Какие-либо инструменты, кроме crop , отсутствуют.

FavIcon Pro

Еще один простой и незамысловатый инструмент для создания favicon . Преобразует изображение формата JPG, GIF, PNG в файл ICO одного из следующих размеров: 16x16, 32x32, 48x48, 64x64, 128x128. Рядом со ссылкой на скачивание можно увидеть полученный результат.

Freefavicon

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

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

X-Icon-Editor

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

Благодаря специальной панели, в процессе рисования favion-ки вы будете сразу видеть, как она смотрится в пределах браузера Internet Explorer.

Antifavicon

Стандартный размер favicon-ки (16x16) - это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь:).

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

Faviconist

Последний сервис, который мы рассмотрим, - это Genfavicon . Здесь можно загрузить изображение, преобразовать его в иконку и сразу же увидеть, как она будет смотреться в браузере. После этого вы можете скачать иконку заданного размера.

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

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

В общем, эта маленькая картинка должна быть у каждого сайта.

Как создать favicon.ico для сайта

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

Favicon – это картинка в форматах ICO, JPEG, PNG, BMP и GIF, которая может иметь разные размеры, начиная с 16×16 пикселей. Иконку именно такого размера надо обязательно загрузить на сайт для индексации роботом Яндекса.

Другие размеры имеют второстепенную роль и не отображаются в поиске Yandex, а служат для отображения в браузерах, например, на iPhone или IPad. Если хотите, чтобы ваш сайт выделялся в поисковой выдаче, запомните следующее правило.

В случае наличия нескольких фавиконок разных размеров, в коде страницы первым надо расположить путь к картинке размером 16х16 px, так как фавиконочный робот Яндекса считывает только первый адрес.

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

Если вы не большой знаток Photoshop, то не беда, в интернете существует много бесплатных сервисов-генераторов для создания favicon для сайта. Некоторые из них могут только конвертировать изображения в формат ICO, другие же дают возможность редактировать или создать фавикон с нуля. Предлагаю вашему вниманию небольшой обзор таких онлайн-генераторов.

Сервисы online favicon generator - создание фавикона онлайн

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

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

Простые фавикон генераторы

Для начала несколько сайтов, где можно легко сделать иконку для сайта, преобразовав любую картинку в файл favicon.ico , без возможности редактирования.

www.favicongenerator.com - пожалуй, самый минималистический сервис. Ничего лишнего - выбрали изображение, нажали кнопку “Generate Favicon! ” и скачали созданную иконку.

tools.dynamicdrive.com/favicon - простой и понятный сервис, где можно сделать favicon в трех размерах. Чтобы скачать полученные файлы, надо нажать на кнопку “Download FavIcon ” под ними.

www.cy-pr.com/tools/favicon и www.favicon.co.uk - сервисы, аналогичные предыдущему. В первом можно сделать размер фавикона 16×16 и 32×32, а во втором дополнительно 48×48 и 64×64.

www.genfavicon.com - весь процесс создания иконки включает в себя три шага:

  1. Выбираем файл (JPEG, GIF, PNG) на компьютере или просто прописываем URL картинки и жмем “Загрузить изображение “;
  2. Выбираем размер (16×16, 32×32, 48×48, 64×64 или 128×128) и необходимую область рисунка, если хотим сгенерировать только часть изображения, нажав “Захват и Изображение “;
  3. Смотрим результат и, если все устраивает, скачиваем файл.

Создание анимированного favicon для сайта в онлайн генераторах

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

www.favicon.by - сервис на русском языке. Все, что требуется, выбрать файл, вписать текст на латинице (если надо) и нажать кнопку “Создать Favicon “. Ниже можно увидеть результат и скачать архив с файлами.

www.favicon.com.mx - сервис, полностью идентичный предыдущему, только на английском языке.

Где сделать фавикон с нуля - online редакторы favicon

antifavicon.com - этот сервис, почему-то с приставкой анти, интересен тем, что позволяет самому создать файл favicon.ico , но не в виде картинки, а как текст на цветном фоне. Все что требуется, это ввести подходящие буквы и выбрать цвета. Кстати, свой фавикон я сделал именно здесь. Думал потом переделаю, а теперь привык уже.

favicon-generator.org - здесь, кроме конвертера, есть еще и редактор иконок. Кроме того, можно загрузить созданный фавикон в публичную галерею, где его смогут свободно скачивать другие пользователи сайта.

favicon.ru - популярный российский онлайн-генератор, где можно, как создавать фавиконы из картинок, так и рисовать их. Так же тут можно заказать создание favicon специалистам за 20$. Интересно, кто-то там делает заказы?

www.favicon.cc - другой популярный генератор, похожий на предыдущий. Интересной особенностью этого сервиса является то, что здесь можно делать покадровую анимацию длительностью до 20 секунд.

Увидеть анимированный favicon и скачать его можно в окне предварительного просмотра.

www.degraeve.com/favicon - еще один online favicon generator. Этот редактор, как и предыдущие, позволяет сделать прозрачный фон иконки.

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

И все же, еще один онлайн-генератор иконок для сайта я приберег на потом. Этот сервис заслуживает отдельного поста, где я расскажу, как сделать favicon для iPhone, IPod Touch и IPad браузеров и подробнее остановлюсь на установке анимированных иконок на сайт. Кроме того, познакомлю Вас с сервисом Favicon Validator, где можно проверить и увидеть все значки favicon.ico , если этот файл содержит более одного изображения.. Всем пока!

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то