Как сделать фавикон (favicon) иконку для сайта
Всем привет друзья! Тем кто еще меня не знает, меня зовут Владимир Савельев и сегодня я хотел бы поговорить о том, как сделать фавикон для сайта.
Каждый вебмастер после создания своего блога желает, чтобы его сайт был красивым и узнаваемым пользователями. Кроме стильного и оригинального дизайна, узнаваемость вашему сайту может придать фавикон.
Кстати, у Вас есть мобильная версия сайта? Как нет?! Быстрее читайте мою подробнейшую статью — Адаптивная верстка!
Что такое favicon?
Фавикон — это миниатюрная иконка, которая отображается в левом верхнем углу вашего сайта. Вот как выглядит он на моем блоге.
Кроме того, она будет отображаться и возле вашего сайта в результатах поисковой выдачи.
Фавикон придаст вашему сайту оригинальность и поможет пользователям сразу его находить в результатах поиска. Большинство людей редко обращают внимание на название сайта, но вот иконку они очень хорошо запоминают. В следствии этого — это дополнительный приток трафика...
Главное, чтобы она тематически подходила к вашему ресурсу и по возможности отличалась от других подобных сайтов.
Какие преимущества дает наличие фавикона?
Первое и самое главное преимущество — это узнаваемость среди других сайтов. Например, если посетитель вашего блога заинтересуется информацией, которая содержится на страницах сайта, и решит добавить его в закладки, чтобы позже зайти на него и более подробно всё прочитать. Пройдет какое-то время, после того, как сайт будет добавлен в закладки.
И вот настало долгожданное время, человек надумал опять посетить ваш интернет-ресурс. Однако, если у него много закладок, он может не сразу его отыскать, а то и вовсе не найти среди других. В этом случае favicon.iso будет как нельзя кстати.
Кроме того, это будет выгодно подчеркивать дизайн вашего сайта и придаст ему завершенность. При желании и обладании хорошей фантазией вы можете собственноручно создать иконку, которая будет оригинальной и не такой, как у всех.
Давайте разберемся, как сделать фавикон иконку для сайта?
Скачать фавикон можно также на сайте www.favicon.cc. Перейдите по ссылке на сайт. Пролистайте предложенный ТОП фавиконов. Картинка может быть как анимированной, так и обычной. Если нашли что то по душе, скачайте к себе на компьютер. После чего перенесите картинку в корень своего сайта.
На этом сайте, кроме возможности скачать, есть возможность сделать ее самому. Для этого вам потребуется наличие творческих способностей и желание. Но все возможно.
В принципе, вы можете задействовать любую картинку, уменьшенную до размера 16×16 или 32×32 пикселей. Главное, чтобы качество изображения не пострадало. После чего ее нужно сохранить в формате PNG или ISO.
Практически все браузеры отображают изображения в этом формате. Единственным, кто не поддерживает формат PNG, являются Internet Explorer, а точнее — старые его версии. Сейчас конечно редко кто из пользователей использует этот браузер, так как по функционалу и быстродействию он намного хуже своих собратьев.
Но если на ваш блог заходят с Internet Explorer, то сохраните изображение в формате ICO. Сделать это можно на этом сайте.
Так же есть еще один замечательный сервис позволяющий нарисовать свою уникальную иконку, переходим сюда — www.michurin.net
Если же, у Вас есть готовая интересная картинка, из которой Вы хотите сделать фавиконку, то этот сервис вам в помощь http://favicon.ru/ru.
Дополнительные On-line сервисы и генераторы:
Специально для Вас я отобрал лучшие коллекции и генераторы фавиконов — рисуйте или скачайте готовые, выбор за вами:
[sociallocker]
- www.favicon.by
- http://shaheeilyas.com/favicon/
- http://www.degraeve.com/favicon/
- http://genfavicon.com/
- http://pr-cy.ru/favicon/
- www.thefavicongallery.com
- www.iconj.com/favicon-gallery-page1.html
- www.favicon.co.uk/gallery.php
- www.favicon-generator.org/gallery/
[/sociallocker]
Установка на сайт:
Чтобы установить иконку фавикон необходимо залить ее на хостинг в директорию сайта и прописать следующий мета-тег в head:
<link rel="shortcut icon" href="путь до файла иконки" type="image/x-icon">
Например посмотрите как прописан этот тег у меня:
Весь процесс установки довольно простой, я думаю у Вас все получится
ТОП-3 Плагина фавикон для WordPress:
Эти плагины существенно упростит работу тем владельцам интернет-ресурсов, которые не знают, как добавить файл в директорию сайта. Также благодаря данному модулю иконка вашего блога будет яркой и четкой.
- Heroic Favicon Generator
- All In One Favicon
- Custom Favicon
Как видите, ничего сложного в вопросе «Как сделать фавикон» и его установке на сайт — нет! Если у вас возникнут сложности или вопросы по теме поста, то пишите их в комментариях к статье.
Я с радостью на них отвечу.
С уважением, Владимир Савельев
Кстати на favicon.cc есть тысячи готовых фавиконов, в том числе и анимированных.
Но следует учесть что анимированные работают не во всех браузерах ( отображается только один из кадров) и это иногда смотрится не правильно.
К примеру я находил очень красивый анимированый фавикон доллара который крутился, но в брайзерах которых анимация не работала фавикон смотрелся как зеркальное отображение бакса
Да Саш анимированные фавикон я тож не рекомендую использовать, лучше статичный и уникальный
Использовать можно и смотрится необычно просто нужно посмотреть как он будет выглядеть в тех браузерах где анимация не будет работать ( т.е. будет отображаться просто картинка одного из кадров)
Может быть в интернете он и будет анимированный, но в закладках точно статика будет...у меня сколько закладок ни одного анимированного еще не видел
Ничего хорошего из анимированного фавикона не выйдет.
Один раз я видел такой,если честно,убожество.Лучше вообще никакого не иметь
Довольно интересно) Владимир, смотрел видео о вашем блоге у Борисова
Привет Артем! Да ладно Что за видео
Володь,да ничего существенного.
Просто Борисов приводил примеры блогов,которые топчатся на месте.
Что то в этом роде
Да, рисовать фавикон это нужно уметь я пробовал, а потом плюнул на это дело. Взял картинку и подредактировал маленько.
В закладках и в поиске будет без анимации. Да и насколько я заметил анимация работает только в мозиле
Как пример можешь здесь посмотреть put-k-uspehy.ru
Да посмотрел доллар крутится
Я вот на своем новом сайте фавикон создал, в корневую папку загрузил, но в Head ничего не прописывал и он не отображается, попробую сделать по-иному.
Было бы чудо если бы заработал
Если ты на картинке хотел написать «favicon .ico» то у тебя опечатка. Ты написал «.iso»
Точно Андрей спасибо за подсказку!!!
Круто — возьму на заметку !!!
Современному блоггеру без фавиконки нельзя, а что касается их выбора так вариантов достаточно много.
Да фавикон не маловажная вещь. Без нее сайт уже смотрится как г... сайт. Удивляюсь, когда такие сайты встречаю.
С первых дней создания блога,у меня присутствует фавикон.
Я думаю он уже примелькался и стал узнаваем.
очень даже интересно попробовать себя художником)
Ну да,если еще знаешь что рисовать.