Создание Favicon-а для сайта
Все хотят выделить свой сайт из серого списка остальных — в поисковой выдаче. Для этого существуют маленькие картинки-иконки: favicon.
В этой статье я рассмотрю — что такое favicon и как его установить на свой сайт.
В переводе с английского, favicon — это «значок для избранного». Он отображается в закладках и в окне браузера в виде небольшой картинки.
Так же favicon сайта отображается сбоку от сайта в поисковой выдаче Яндекса:
Стандартные расмеры этой картинки 32х32, 24х24 и 16х16 пикселей.
В интернете есть множество сайтов, на которых можно скачать favicon — подобрать его из множества уже отрисованных любителями и профессионалами. Но я бы все-таки посоветовал нарисовать свою собственную иконку для сайта.
Сделать это можно с помощью различных программ и онлайн редакторов. Я попробовал довольно большое количество и остановился на вот этом онлайн сервисе: http://favicon.ru/
Его удобство заключается в том, что нарисовать иконку тут может даже ребенок. Все просто и интуитивно понятно. Чем-то напоминает старый добрый микрософтовский paint. Рисуем картинку и нажимаем — скачать. Получаем файл favicon.ico.
Установка Favicon-a на сайт
Теперь нам нужно привязать этот файл к нашему сайту. Для этого, нужно загрузить в корень сайта, т.е. по адресу http://ваш_сайт/favicon.ico( в моем солучае: http://feanor184.ru/favicon.ico ). Также добавить в код вашего сайта между тегами <head> </head> следующую строчку:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
В моем случае:
<link rel="shortcut icon" href="http://feanor184.ru/favicon.ico" type="image/x-icon" />
Код добавлять необязательно. По умолчанию браузер смотрит его, если нет — /favicon.ico. Код нужен, если нужно динамически изменять иконку, например, при AJAX запросах как ожидание, или для разных страниц. Можно также использовать любой тип изображения, нужно только указать его тип вместо image/x-icon.
Вполне возможно, что вы правы! Не экспериментировал с AJAX.
Каждый раз, как натыкаюсь на статью про favicon, сразу думаю: пора бы уже и себе сделать. Но как то все руки не доходят. Надо занести в закладки и в очередной раз «не забыть».
Ноги в руки — и вперед!)
Я тоже долго не мог сделать фавикон. Правда, не потому что руки не доходили, а потому что лень было файл перекачивать в папку с сайтом. А рисуется реально просто. Да и если брать по поисковикам, то с фавиконом индексируется то ли лучше, то ли просто красивее)
Мой совет — если в настройках темы ВП есть ссылка для вашей иконки, не используйте ее. В результате лично у меня работало криво и не на всех страницах. Прописал руками — и все гуд)
Код добавлять необязательно. По умолчанию браузер смотрит его, если нет — /favicon.ico.
У меня несколько сайтов. В админки которых захожу с различных браузеров. Фавикон делал как раз на этом онлвйн сервисе. Почему загруженные с различных браузеров фавиконы, некорректно показываются в других браузерах?
Все вполне корректно отображается, картинка не зависит от браузера, в котором была скачана
Этим же сервисом пользуюсь. Плюс здесь еще в том, что можно картинку загрузить и уже из нее фавикон сделать
Упомянутый в статье генератор фавикон хорош, но в сравнении с другими экпорт из картинки, качество страдает. Есть еще один xiconeditor точка com. Преимущество в том, что качественная обработка с прозрачным фоном и несколько вариантов превью.
Тему можно было бы немного раскрыть, например я в свое время намучилась когда имя вафикона было на кирилице и его ни как не видел яндекс