Создание Favicon-а для сайта

Июль8

favicon_logo

Все хотят выделить свой сайт из серого списка остальных — в поисковой выдаче. Для этого существуют маленькие картинки-иконки: favicon.

В этой статье я рассмотрю — что такое 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" /> 

Поделиться в соц. сетях

Метки:
Copyright © 2013-2017. All rights reserved.

Опубликованно Июль 8, 2014 by Feanor184 в категории Web

Об Авторе

Постигаю Linux, учу Python, пытаюсь программировать)

12 комментарий(ев) к записи “Создание Favicon-а для сайта

  1. Антон

    Код добавлять необязательно. По умолчанию браузер смотрит его, если нет — /favicon.ico. Код нужен, если нужно динамически изменять иконку, например, при AJAX запросах как ожидание, или для разных страниц. Можно также использовать любой тип изображения, нужно только указать его тип вместо image/x-icon.

  2. Dofollow Ruslan

    Каждый раз, как натыкаюсь на статью про favicon, сразу думаю: пора бы уже и себе сделать. Но как то все руки не доходят. Надо занести в закладки и в очередной раз «не забыть».

    1. riens666

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

  3. Vlad

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

  4. Алексей

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

    1. Feanor184 Автор поста

      Все вполне корректно отображается, картинка не зависит от браузера, в котором была скачана :)

  5. Никита

    Этим же сервисом пользуюсь. Плюс здесь еще в том, что можно картинку загрузить и уже из нее фавикон сделать

  6. Явер

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

  7. Ульяна

    Тему можно было бы немного раскрыть, например я в свое время намучилась когда имя вафикона было на кирилице и его ни как не видел яндекс :(

Добавить комментарий для Ульяна Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

=

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